Was ist der beste Weg, um einen ‚Laden‘ -Anzeige auf einem WPF-Steuerelement

12

ich ein Layout wie dies in der Regel schaffen würde:

<Grid> 
    <Grid x:Name="MainContent" IsEnabled="False"> 
    ... 
    </Grid> 

    <Grid x:Name="LoadingIndicatorPanel"> 
    ... 
    </Grid> 
</Grid>

Dann lade ich die Daten auf einem Worker-Thread, und wenn es fertig ist ich die Benutzeroberfläche unter dem „maincontent“ Raster aktualisieren und das Raster aktivieren, dann Legen Sie die Sichtbarkeit des LoadingIndicatorPanel auf Collapsed fest.

Ich bin mir nicht sicher, ob dies das war, was Sie gefragt haben oder ob Sie wissen wollten, wie man eine Animation im Ladelabel anzeigt. Wenn es um die Animation geht, aktualisieren Sie bitte Ihre Frage, um genauer zu sein.

Quelle

2008-09-18 18:12:33 dcstraw

9

Dies ist etwas, an dem ich gerade gearbeitet habe, um eine Ladeanimation zu erstellen. Dieser Xaml wird einen animierten Kreisring erzeugen.

Meine ursprüngliche Idee war es, einen Adorner zu erstellen und diese Animation als Inhalt zu verwenden, dann die Ladeanimation in der Adorners-Ebene anzuzeigen und den darunter liegenden Inhalt auszugrauen.

Hatte noch nicht die Chance, es zu beenden, also dachte ich, ich würde nur die Animation für Ihre Referenz posten.

<Window 
    x:Class="WpfApplication2.Window1" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Title="Window1" 
    Height="300" 
    Width="300" 
    > 
    <Window.Resources> 
     <Color x:Key="FilledColor" A="255" B="155" R="155" G="155"/> 
     <Color x:Key="UnfilledColor" A="0" B="155" R="155" G="155"/> 

     <Storyboard x:Key="Animation0" FillBehavior="Stop" BeginTime="00:00:00.0" RepeatBehavior="Forever"> 
      <ColorAnimationUsingKeyFrames Storyboard.TargetName="_00" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"> 
       <SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/> 
       <SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/> 
      </ColorAnimationUsingKeyFrames> 
     </Storyboard> 

     <Storyboard x:Key="Animation1" BeginTime="00:00:00.2" RepeatBehavior="Forever"> 
      <ColorAnimationUsingKeyFrames Storyboard.TargetName="_01" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"> 
       <SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/> 
       <SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/> 
      </ColorAnimationUsingKeyFrames> 
     </Storyboard> 

     <Storyboard x:Key="Animation2" BeginTime="00:00:00.4" RepeatBehavior="Forever"> 
      <ColorAnimationUsingKeyFrames Storyboard.TargetName="_02" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"> 
       <SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/> 
       <SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/> 
      </ColorAnimationUsingKeyFrames> 
     </Storyboard> 

     <Storyboard x:Key="Animation3" BeginTime="00:00:00.6" RepeatBehavior="Forever"> 
      <ColorAnimationUsingKeyFrames Storyboard.TargetName="_03" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"> 
       <SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/> 
       <SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/> 
      </ColorAnimationUsingKeyFrames> 
     </Storyboard> 

     <Storyboard x:Key="Animation4" BeginTime="00:00:00.8" RepeatBehavior="Forever"> 
      <ColorAnimationUsingKeyFrames Storyboard.TargetName="_04" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"> 
       <SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/> 
       <SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/> 
      </ColorAnimationUsingKeyFrames> 
     </Storyboard> 

     <Storyboard x:Key="Animation5" BeginTime="00:00:01.0" RepeatBehavior="Forever"> 
      <ColorAnimationUsingKeyFrames Storyboard.TargetName="_05" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"> 
       <SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/> 
       <SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/> 
      </ColorAnimationUsingKeyFrames> 
     </Storyboard> 

     <Storyboard x:Key="Animation6" BeginTime="00:00:01.2" RepeatBehavior="Forever"> 
      <ColorAnimationUsingKeyFrames Storyboard.TargetName="_06" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"> 
       <SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/> 
       <SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/> 
      </ColorAnimationUsingKeyFrames> 
     </Storyboard> 

     <Storyboard x:Key="Animation7" BeginTime="00:00:01.4" RepeatBehavior="Forever"> 
      <ColorAnimationUsingKeyFrames Storyboard.TargetName="_07" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"> 
       <SplineColorKeyFrame KeyTime="00:00:00.0" Value="{StaticResource FilledColor}"/> 
       <SplineColorKeyFrame KeyTime="00:00:01.6" Value="{StaticResource UnfilledColor}"/> 
      </ColorAnimationUsingKeyFrames> 
     </Storyboard> 
    </Window.Resources> 

    <Window.Triggers> 
     <EventTrigger RoutedEvent="FrameworkElement.Loaded"> 
      <BeginStoryboard Storyboard="{StaticResource Animation0}"/> 
      <BeginStoryboard Storyboard="{StaticResource Animation1}"/> 
      <BeginStoryboard Storyboard="{StaticResource Animation2}"/> 
      <BeginStoryboard Storyboard="{StaticResource Animation3}"/> 
      <BeginStoryboard Storyboard="{StaticResource Animation4}"/> 
      <BeginStoryboard Storyboard="{StaticResource Animation5}"/> 
      <BeginStoryboard Storyboard="{StaticResource Animation6}"/> 
      <BeginStoryboard Storyboard="{StaticResource Animation7}"/> 
     </EventTrigger> 
    </Window.Triggers> 

    <Canvas> 
     <Canvas Canvas.Left="21.75" Canvas.Top="14" Height="81.302" Width="80.197"> 
      <Canvas.Resources> 
       <Style TargetType="Ellipse"> 
        <Setter Property="Width" Value="15"/> 
        <Setter Property="Height" Value="15" /> 
        <Setter Property="Fill" Value="#FFFFFFFF" /> 
       </Style> 
      </Canvas.Resources> 

      <Ellipse x:Name="_00" Canvas.Left="24.75" Canvas.Top="50"/> 
      <Ellipse x:Name="_01" Canvas.Top="36" Canvas.Left="29.5"/> 
      <Ellipse x:Name="_02" Canvas.Left="43.5" Canvas.Top="29.75"/> 
      <Ellipse x:Name="_03" Canvas.Left="57.75" Canvas.Top="35.75"/> 
      <Ellipse x:Name="_04" Canvas.Left="63.5" Canvas.Top="49.75" /> 
      <Ellipse x:Name="_05" Canvas.Left="57.75" Canvas.Top="63.5"/> 
      <Ellipse x:Name="_06" Canvas.Left="43.75" Canvas.Top="68.75"/> 
      <Ellipse x:Name="_07" Canvas.Top="63.25" Canvas.Left="30" /> 
      <Ellipse Stroke="{x:Null}" Width="39.5" Height="39.5" Canvas.Left="31.75" Canvas.Top="37" Fill="{x:Null}"/> 
     </Canvas> 
    </Canvas> 
</Window>

Quelle

2008-09-25 12:22:03

+0

Das ist eine gute Demo! – ariso

+0

Vielleicht ist dies eine dumme Frage, aber warum sollten Sie Ihre eigene Animation schreiben, wenn Sie das extrem ähnliche Aktivitäts-Steuerelement verwenden könnten? –

+0

@Peter Wone: Welche Aktivität Kontrolle? MSDN hat eine Menge Treffer auf das Wort "Aktivität", aber ein kurzer Blick zeigt keine WPF/SL-Steuerelemente. – moswald

1

Wenn Sie es unter Vista ausführen, können Sie auch einfach den Standardwarteschalter verwenden.

this.Cursor = Cursor.Wait;

Quelle

2008-10-01 15:09:45

1

Verwenden Sie BusyIndicator. Es ist eine Silverlight-Sache.

Quelle

2010-01-26 03:48:42

1

können Sie zeigen, animierte GIF als Belastungselement

XAML

<WindowsFormsHost> 
    <winForms:PictureBox x:Name="pictureBoxLoading" /> 
</WindowsFormsHost>

Code hinter

pictureBoxLoading.Image = System.Drawing.Image.FromFile("images/ajax-loader.gif");

Quelle

2010-10-07 13:30:14 VadimB

+7

Nun, ich denke, Laden Winforms Baugruppen in den Speicher nur für die Anzeige einer Ladeanzeige kann eine Art Overkill sein. –

7

ich auf Ian Oakes Entwurf verbessert und bauen eine skalierbare Version seines Ladeindikator:

<UserControl x:Class="Mesap.Framework.UI.Controls.BusyIndicator" 
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      mc:Ignorable="d" Name="Root" Foreground="#9b9b9b" 
      d:DesignHeight="100" d:DesignWidth="100"> 
    <Grid> 
     <Grid.Resources> 
      <Storyboard x:Key="Animation0" FillBehavior="Stop" BeginTime="00:00:00.0" RepeatBehavior="Forever"> 
       <DoubleAnimationUsingKeyFrames Storyboard.TargetName="E00" Storyboard.TargetProperty="Opacity"> 
        <LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="1"/> 
        <LinearDoubleKeyFrame KeyTime="00:00:01.6" Value="0"/> 
       </DoubleAnimationUsingKeyFrames> 
      </Storyboard> 

      <Storyboard x:Key="Animation1" BeginTime="00:00:00.2" RepeatBehavior="Forever"> 
       <DoubleAnimationUsingKeyFrames Storyboard.TargetName="E01" Storyboard.TargetProperty="Opacity"> 
        <LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="1"/> 
        <LinearDoubleKeyFrame KeyTime="00:00:01.6" Value="0"/> 
       </DoubleAnimationUsingKeyFrames> 
      </Storyboard> 

      <Storyboard x:Key="Animation2" BeginTime="00:00:00.4" RepeatBehavior="Forever"> 
       <DoubleAnimationUsingKeyFrames Storyboard.TargetName="E02" Storyboard.TargetProperty="Opacity"> 
        <LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="1"/> 
        <LinearDoubleKeyFrame KeyTime="00:00:01.6" Value="0"/> 
       </DoubleAnimationUsingKeyFrames> 
      </Storyboard> 

      <Storyboard x:Key="Animation3" BeginTime="00:00:00.6" RepeatBehavior="Forever"> 
       <DoubleAnimationUsingKeyFrames Storyboard.TargetName="E03" Storyboard.TargetProperty="Opacity"> 
        <LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="1"/> 
        <LinearDoubleKeyFrame KeyTime="00:00:01.6" Value="0"/> 
       </DoubleAnimationUsingKeyFrames> 
      </Storyboard> 

      <Storyboard x:Key="Animation4" BeginTime="00:00:00.8" RepeatBehavior="Forever"> 
       <DoubleAnimationUsingKeyFrames Storyboard.TargetName="E04" Storyboard.TargetProperty="Opacity"> 
        <LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="1"/> 
        <LinearDoubleKeyFrame KeyTime="00:00:01.6" Value="0"/> 
       </DoubleAnimationUsingKeyFrames> 
      </Storyboard> 

      <Storyboard x:Key="Animation5" BeginTime="00:00:01.0" RepeatBehavior="Forever"> 
       <DoubleAnimationUsingKeyFrames Storyboard.TargetName="E05" Storyboard.TargetProperty="Opacity"> 
        <LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="1"/> 
        <LinearDoubleKeyFrame KeyTime="00:00:01.6" Value="0"/> 
       </DoubleAnimationUsingKeyFrames> 
      </Storyboard> 

      <Storyboard x:Key="Animation6" BeginTime="00:00:01.2" RepeatBehavior="Forever"> 
       <DoubleAnimationUsingKeyFrames Storyboard.TargetName="E06" Storyboard.TargetProperty="Opacity"> 
        <LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="1"/> 
        <LinearDoubleKeyFrame KeyTime="00:00:01.6" Value="0"/> 
       </DoubleAnimationUsingKeyFrames> 
      </Storyboard> 

      <Storyboard x:Key="Animation7" BeginTime="00:00:01.4" RepeatBehavior="Forever"> 
       <DoubleAnimationUsingKeyFrames Storyboard.TargetName="E07" Storyboard.TargetProperty="Opacity"> 
        <LinearDoubleKeyFrame KeyTime="00:00:00.0" Value="1"/> 
        <LinearDoubleKeyFrame KeyTime="00:00:01.6" Value="0"/> 
       </DoubleAnimationUsingKeyFrames> 
      </Storyboard> 

      <Style TargetType="Ellipse"> 
       <Setter Property="Fill" Value="{Binding ElementName=Root, Path=Foreground}"/> 

      </Style> 
     </Grid.Resources> 
     <Grid.Triggers> 
      <EventTrigger RoutedEvent="FrameworkElement.Loaded"> 
       <BeginStoryboard Storyboard="{StaticResource Animation0}"/> 
       <BeginStoryboard Storyboard="{StaticResource Animation1}"/> 
       <BeginStoryboard Storyboard="{StaticResource Animation2}"/> 
       <BeginStoryboard Storyboard="{StaticResource Animation3}"/> 
       <BeginStoryboard Storyboard="{StaticResource Animation4}"/> 
       <BeginStoryboard Storyboard="{StaticResource Animation5}"/> 
       <BeginStoryboard Storyboard="{StaticResource Animation6}"/> 
       <BeginStoryboard Storyboard="{StaticResource Animation7}"/> 
      </EventTrigger> 
     </Grid.Triggers> 

     <Grid.ColumnDefinitions> 
      <ColumnDefinition/> 
      <ColumnDefinition/> 
      <ColumnDefinition/> 
      <ColumnDefinition/> 
      <ColumnDefinition/> 
      <ColumnDefinition/> 
      <ColumnDefinition/> 
      <ColumnDefinition/> 
      <ColumnDefinition/> 
      <ColumnDefinition/> 
      <ColumnDefinition/> 
     </Grid.ColumnDefinitions> 
     <Grid.RowDefinitions> 
      <RowDefinition/> 
      <RowDefinition/> 
      <RowDefinition/> 
      <RowDefinition/> 
      <RowDefinition/> 
      <RowDefinition/> 
      <RowDefinition/> 
      <RowDefinition/> 
      <RowDefinition/> 
      <RowDefinition/> 
      <RowDefinition/> 
     </Grid.RowDefinitions> 

     <Ellipse x:Name="E00" Grid.Row="4" Grid.Column="0" Grid.RowSpan="3" Grid.ColumnSpan="3" Width="Auto" Height="Auto" Opacity="0"/> 
     <Ellipse x:Name="E01" Grid.Row="1" Grid.Column="1" Grid.RowSpan="3" Grid.ColumnSpan="3" Width="Auto" Height="Auto" Opacity="0" /> 
     <Ellipse x:Name="E02" Grid.Row="0" Grid.Column="4" Grid.RowSpan="3" Grid.ColumnSpan="3" Width="Auto" Height="Auto" Opacity="0" /> 
     <Ellipse x:Name="E03" Grid.Row="1" Grid.Column="7" Grid.RowSpan="3" Grid.ColumnSpan="3" Width="Auto" Height="Auto" Opacity="0" /> 
     <Ellipse x:Name="E04" Grid.Row="4" Grid.Column="8" Grid.RowSpan="3" Grid.ColumnSpan="3" Width="Auto" Height="Auto" Opacity="0" /> 
     <Ellipse x:Name="E05" Grid.Row="7" Grid.Column="7" Grid.RowSpan="3" Grid.ColumnSpan="3" Width="Auto" Height="Auto" Opacity="0" /> 
     <Ellipse x:Name="E06" Grid.Row="8" Grid.Column="4" Grid.RowSpan="3" Grid.ColumnSpan="3" Width="Auto" Height="Auto" Opacity="0" /> 
     <Ellipse x:Name="E07" Grid.Row="7" Grid.Column="1" Grid.RowSpan="3" Grid.ColumnSpan="3" Width="Auto" Height="Auto" Opacity="0" /> 
    </Grid> 
</UserControl>

Quelle

2013-02-04 18:21:26

+0

Danke. Ich habe deine Version weiter modifiziert und in mein Projekt aufgenommen.Es war sehr hilfreich, eine Vorstellung davon zu bekommen, wie man einen Lade-Indikator erstellt. – ViVi

Was ist der beste Weg, um einen ‚Laden‘ -Anzeige auf einem WPF-Steuerelement

Antwort

Verwandte Themen