Quelle est la meilleure façon d'afficher un "chargement" indicateur sur un contrôle WPF

Dans C#.Net WPF Pendant UserControl.Load ->

Quelle est la meilleure façon de montrer un tournoiement de cercle ou de "Chargement" Indicateur sur le UserControl jusqu'à ce qu'il ait terminé la collecte de données et de rendu, c'est le contenu?

InformationsquelleAutor pro | 2008-09-18
  1. 13

    En général, je voudrais créer une mise en page comme ceci:

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

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

    Puis-je charger les données sur un thread de travail, et lorsque c'est fini, je l'ai mise à jour de l'INTERFACE utilisateur dans le cadre du "MainContent" de la grille et permettre à la grille, puis définissez la LoadingIndicatorPanel la Visibilité s'est Effondré.

    Je ne suis pas sûr si c'est ce que vous posiez des questions ou si vous voulais savoir comment faire pour afficher une animation dans l'étiquette de chargement. Si c'est l'animation que vous êtes après, veuillez mettre à jour votre question pour être plus précis.

    InformationsquelleAutor dcstraw
  2. 9

    C'est quelque chose que je travaillais sur tout récemment, dans le but de créer une animation de chargement. Ce xaml va produire une animation d'anneau de cercle.

    Mon idée initiale était de créer un décorateur et d'utiliser cette animation comme c'est le contenu, puis pour afficher l'animation de chargement dans les ornements de la couche de gris et le contenu en dessous.

    N'ai pas eu la chance de le terminer, de sorte que je pensais que j'allais juste poster l'animation pour votre référence.

    <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>
    • C'est une bonne démo!
    • C'est peut-être une question idiote, mais pourquoi écrire votre propre animation quand vous pourriez utiliser le très similaires de contrôle de l'Activité?
    • Wone: Quel contrôle de l'Activité? MSDN a une tonne de frappe sur le mot "activité", mais un rapide coup d'œil montre pas de WPF/SL contrôles.
    • Le contrôle de l'Activité a été renommé BusyIndicator et est disponible avec une grande sélection d'autres l'extension des contrôles à silverlight.codeplex.com/releases/view/43528
    • Cela fonctionne en Silverlight, mais pas WPF, qui a fait l'objet de la question d'origine. Autant que je sache, il n'y a pas encore de BusyIndicator ou l'équivalent en WPF ou de la boîte à outils. Même si je suis sûr que vous pourriez port le contrôle Silverlight assez facilement.
    InformationsquelleAutor Ian Oakes
  3. 9

    J'ai amélioré sur Ian Oakes Concevoir et à construire une version évolutive de son indicateur de chargement:

    <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>
    • Je vous remercie. J'ai modifié le vôtre plus de l'inclure dans mon projet.. C'était vraiment utile pour avoir une idée de comment faire un indicateur de chargement.
    • comment l'utiliser? dans mon windows, rien ne se passe? je l'ai mis comme <local1:BusyIndicator Height="40" Width="50" />
    InformationsquelleAutor Sven Hecht
  4. 1

    Si vous l'exécutez sur Vista, vous pourriez tout aussi bien utiliser la valeur par défaut curseur d'attente.

    cette.Curseur = Curseurs.Attendre;

    InformationsquelleAutor Christopher Scott
  5. 1

    Utilisation BusyIndicator. C'est une silverlight chose.

    InformationsquelleAutor Peter Wone
  6. 1

    Vous pouvez afficher gif animé que le chargement de l'élément

    XAML

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

    CODE DERRIÈRE

    pictureBoxLoading.Image = System.Drawing.Image.FromFile("images/ajax-loader.gif");
    • eh bien, je suppose que le chargement winforms assemblées dans la mémoire juste pour l'affichage d'un indicateur de chargement peut être une sorte de surenchère.
    InformationsquelleAutor VadimB