在 WPF 控件上显示“加载”指示器的最佳方法是啥
Posted
技术标签:
【中文标题】在 WPF 控件上显示“加载”指示器的最佳方法是啥【英文标题】：What is the best way to display a 'loading' indicator on a WPF control在 WPF 控件上显示“加载”指示器的最佳方法是什么 【发布时间】：2010-09-10 18:51:20 【问题描述】：在 UserControl.Load 期间在 C#.Net WPF 中 ->
在完成收集数据并呈现其内容之前，在 UserControl 上显示旋转圆圈/“正在加载”指示器的最佳方式是什么？
【问题讨论】：
【参考方案1】：我通常会创建这样的布局：
<Grid>
<Grid x:Name="MainContent" IsEnabled="False">
...
</Grid>
<Grid x:Name="LoadingIndicatorPanel">
...
</Grid>
</Grid>
然后我在工作线程上加载数据，完成后我更新“MainContent”网格下的 UI 并启用网格，然后将 LoadingIndicatorPanel 的可见性设置为 Collapsed。
我不确定这是您要问的还是您想知道如何在加载标签中显示动画。如果是您所追求的动画，请更新您的问题以更具体。
【讨论】：
【参考方案2】：这是我最近为了创建加载动画而正在做的事情。此 xaml 将生成一个动画圈。
我最初的想法是创建一个装饰器并将这个动画用作它的内容，然后在装饰器层中显示加载动画并将下面的内容变灰。
还没有机会完成它，所以我想我会发布动画供您参考。
<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>
【讨论】：
也许这是个愚蠢的问题，但既然可以使用极其相似的 Activity 控件，为什么还要编写自己的动画呢？ @Peter Wone：什么活动控制？ MSDN 对“活动”一词有大量点击，但快速浏览显示没有 WPF/SL 控件。 @mos：Activity 控件已重命名为 BusyIndicator，并且可以在 silverlight.codeplex.com/releases/view/43528 处与大量其他扩展控件一起使用 @Peter：这将适用于 Silverlight，但不适用于 WPF，这是原始问题的主题。据我所知，WPF 或工具包中仍然没有 BusyIndicator 或等效项。虽然我确信你可以很容易地移植 Silverlight 控件。【参考方案3】：我改进了 Ian Oakes 设计并构建了他的加载指示器的可扩展版本：
<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>
【讨论】：
谢谢。我已经进一步修改了你的，并将其包含在我的项目中。了解如何制作加载指示器真的很有帮助。 怎么用？在我的窗户里什么都没有发生？我把它写成<local1:BusyIndicator Height="40" Width="50" />【参考方案4】：
如果你在 Vista 上运行它，你也可以只使用默认的等待光标。
this.Cursor = Cursors.Wait;
【讨论】：
【参考方案5】：使用 BusyIndicator。这是一件银光闪闪的事情。
【讨论】：
【参考方案6】：您可以将动画 gif 显示为加载元素
XAML
<WindowsFormsHost>
<winForms:PictureBox x:Name="pictureBoxLoading" />
</WindowsFormsHost>
代码隐藏
pictureBoxLoading.Image = System.Drawing.Image.FromFile("images/ajax-loader.gif");
【讨论】：
好吧，我想将 winforms 程序集加载到内存中只是为了显示加载指示器可能是某种矫枉过正。以上是关于在 WPF 控件上显示“加载”指示器的最佳方法是啥的主要内容，如果未能解决你的问题，请参考以下文章
在 PasswordBox 中捕获返回键的最佳方法是啥？ (WPF/XAML)
在 RxSwift-MVVM 架构中，触发弹出窗口和指示器等 UI 元素的最佳方式是啥？
为了使用 winapi 显示推文，我可以选择的最佳控件是啥？