Qual é a melhor maneira de exibir um indicador de 'carregar' em um controle WPF
-
01-07-2019 - |
Pergunta
Em C # .net WPF Durante UserControl.Load ->
O que é a melhor maneira de mostrar um círculo / 'Carregando' girando Indicador no UserControl até que ele tem coleta de dados acabados e tornando o seu conteúdo?
Solução
Eu geralmente iria criar um layout parecido com isto:
<Grid>
<Grid x:Name="MainContent" IsEnabled="False">
...
</Grid>
<Grid x:Name="LoadingIndicatorPanel">
...
</Grid>
</Grid>
Então eu carregar os dados em um segmento de trabalho, e quando terminou eu atualizar a interface do usuário sob o grid "mainContent" e permitir a grade, em seguida, defina a visibilidade do LoadingIndicatorPanel ao colapso.
Eu não tenho certeza se é isso que você estava perguntando ou se você queria saber como mostrar uma animação na etiqueta de carregamento. Se é a animação que você está depois, atualize sua pergunta para ser mais específico.
Outras dicas
Isso é algo que eu estava trabalhando em apenas recentemente, a fim de criar uma animação de carregamento. Este xaml irá produzir um anel animado de círculos.
A minha ideia inicial era criar um adorno e usar esta animação como de conteúdo, em seguida, para exibir a animação de carregamento na camada adorners e cinza o baixo conteúdo.
não tive a chance de terminá-lo ainda, então eu pensei que eu iria basta postar a animação para sua referência.
<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>
I melhorou Ian Oakes projeto e construir uma versão escalável de seu indicador de carregamento:
<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>
Se você estiver executando-lo no Vista, você também pode simplesmente usar o cursor de espera padrão.
this.Cursor = Cursors.Wait;
Use BusyIndicator. É uma coisa Silverlight.
Você pode mostrar gif animado como elemento de carregamento
XAML
<WindowsFormsHost>
<winForms:PictureBox x:Name="pictureBoxLoading" />
</WindowsFormsHost>
ATRÁS CÓDIGO
pictureBoxLoading.Image = System.Drawing.Image.FromFile("images/ajax-loader.gif");