#508 – 显示繁忙等待提示（Displaying a Spinning Busy Indicator）

最新推荐文章于 2025-06-05 10:39:09 发布

翻译最新推荐文章于 2025-06-05 10:39:09 发布 · 612 阅读

文章标签：

#WPF #等待提示

WPF 专栏收录该内容

191 篇文章

订阅专栏

本文介绍如何使用WPF中的Image控件实现一个旋转的忙碌指示器。通过绑定Busy属性并结合旋转动画，当属性为真时，Image控件将显示旋转效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

你会发现，当程序正在进行某项耗时的工作的时候常常会显示一个旋转的圆形图标。在WPF中你可以非常简单的用Image 控件实现这个功能。

下面的例子中，你有一个当Busy 属性设置为为ture的时候会进行旋转动画的Image 控件（通过按钮点击触发）。

<StackPanel>
    <Image Source="Images\Spinny3.jpg" Height="40" Width="40" Stretch="None"
           HorizontalAlignment="Center" VerticalAlignment="Center" Margin="15">
        <Image.RenderTransform>
            <RotateTransform  CenterX="20" CenterY="20"/>
        </Image.RenderTransform>
        <Image.Style>
            <Style>
                <Style.Triggers>
                    <DataTrigger Binding="{Binding Busy}" Value="True">
                        <DataTrigger.EnterActions>
                            <BeginStoryboard Name="rotatingStoryboard">
                                <Storyboard>
                                    <DoubleAnimation
                                        Storyboard.Target="{Binding TemplatedParent}"
                                        Storyboard.TargetProperty="(Image.RenderTransform).(RotateTransform.Angle)"
                                        From="0" To="360" Duration="0:0:1" RepeatBehavior="Forever"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </DataTrigger.EnterActions>
                        <DataTrigger.ExitActions>
                            <RemoveStoryboard BeginStoryboardName="rotatingStoryboard"/>
                        </DataTrigger.ExitActions>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Image.Style>
    </Image>
    <Button Content="Start-Stop" HorizontalAlignment="Center" Margin="15" Padding="10,5" Click="Button_Click"/>
</StackPanel>

后台代码中，实现Busy 属性，并且实现了属性更改通知。

public partial class MainWindow : Window, INotifyPropertyChanged
    {
        private bool busy = false;

        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = this;
        }

        public bool Busy 
        {
            set
            {
                this.busy = value;
                this.PropertyChanged(this, new PropertyChangedEventArgs("Busy"));
            }

            get
            {
                return this.busy;
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            this.Busy = !this.Busy;
        }
    }

你点击按钮后，将会看到旋转的图标。