¿Cuál es la mejor manera de mostrar un indicador de 'carga' en un control de WPF

Question

En C# .Net WPF Durante UserControl.Load ->

Cuál es la mejor forma de mostrar un círculo torbellino/'Carga' Indicador de el UserControl hasta que haya terminado de recopilar datos y renderizar sus contenidos?

Answer 1

por lo general iba a crear un diseño de la siguiente manera:

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

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

Entonces cargar los datos en un subproceso de trabajo, y cuando esté terminado me actualizar la interfaz de usuario debajo de la rejilla "maincontent" y activar la red, a continuación, establezca la Visibilidad del Panel de Indicador de Carga en Contraído.

No estoy seguro de si esto es lo que estaba preguntando o si desea saber cómo mostrar una animación en la etiqueta de carga. Si es la animación que buscas, actualiza tu pregunta para ser más específico.

Answer 2

Esto es algo en lo que estaba trabajando recientemente para crear una animación de carga. Este xaml producirá un anillo animado de círculos.

Mi idea inicial era crear un adorno y usar esta animación como contenido, luego mostrar la animación de carga en la capa de adornos y oscurecer el contenido debajo.

No he tenido la oportunidad de terminarlo todavía, así que pensé que simplemente publicaría la animación para su referencia.

<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> 

Answer 3

Si está ejecutando en Vista, también puede usar el cursor de espera predeterminado.

this.Cursor = Cursors.Wait;

Answer 4

Utilice BusyIndicator. Es una cosa Silverlight.

Answer 5

Puede mostrar gif animado como elemento de carga

XAML

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

código detrás

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

Answer 6

he mejorado sobre Ian Oakes Diseño y construcción de una versión escalable de su indicador de carga:

<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>