WPF：使用【Arc】制作环形加载动画和环形进度条

最新推荐文章于 2024-07-25 16:38:17 发布

pandawangyt

最新推荐文章于 2024-07-25 16:38:17 发布

阅读量2.9k

点赞数 5

分类专栏： WPF c# 文章标签： ui wpf c#

本文链接：https://blog.csdn.net/pandawangyt/article/details/119826101

版权

WPF 同时被 2 个专栏收录

13 篇文章 16 订阅

订阅专栏

13 篇文章 2 订阅

订阅专栏

本文介绍了如何在WPF中利用Blend包创建环形加载等待动画和环形进度条。通过NuGet包管理器安装Blend包，然后在XAML中引入相关命名空间，并设置Arc元素的属性来实现动画效果。此外，还展示了如何通过后台代码动态更新进度，创建环形进度条。

摘要由CSDN通过智能技术生成

安装Blend包

首先引入Blend包，【工具】-【NuGet包管理器】-【管理解决方案的NuGet程序包】，在【浏览】页面搜索关键词【Blend】，安装
在这里插入图片描述

引入Blend包

在MainWindow.xaml的Window标签里引入

xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"

环形加载等待动画

<ed:Arc Width="300"
        Height="300"
        StartAngle="0" 
        EndAngle="90"
        Stretch="None"
        ArcThickness="10"
        Fill="Black">
    <ed:Arc.Effect>
        <DropShadowEffect Color="Black" BlurRadius="10" Opacity="0.8"/>
    </ed:Arc.Effect>
</ed:Arc>

StartAngle和EndAngle设置环形的起始结束位置，最大为360。超过360相对于绕回一圈，例如420和60是一样的。
ArcThickness环形的粗细
Fill环形颜色
Stretch不拉伸

然后为其添加旋转动画，只需要一直改变StartAngle和EndAngle的值就行

<ed:Arc.Triggers>
    <EventTrigger RoutedEvent="Loaded">
        <BeginStoryboard>
            <Storyboard RepeatBehavior="Forever">
                <DoubleAnimation Storyboard.TargetProperty="StartAngle" To="360" BeginTime="0:0:0" Duration="0:0:2"/>
                <DoubleAnimation Storyboard.TargetProperty="EndAngle" To="360" BeginTime="0:0:0" Duration="0:0:1.5"/>
                <DoubleAnimation Storyboard.TargetProperty="EndAngle" To="450" BeginTime="0:0:1.5" Duration="0:0:0.5"/>
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>
</ed:Arc.Triggers>

效果

在这里插入图片描述

环形进度条

<Grid>
    <ed:Arc Width="300"
            Height="300"
            StartAngle="0" 
            EndAngle="360"
            Stretch="None"
            ArcThickness="30"
            Fill="#0A000000"/>
    <ed:Arc Name="arcProgress"
            Width="300"
            Height="300"
            StartAngle="0" 
            EndAngle="0"
            Stretch="None"
            ArcThickness="30"
            Fill="#AA000000"/>
    <TextBlock Name="txtBlockProgress"
               HorizontalAlignment="Center"
               VerticalAlignment="Center"
               Text="0%"
               FontSize="50"/>
</Grid>
<Button Content="开始" Width="100" Height="50" Click="Button_Click"/>

添加两个Arc，一个用作背景，一个用于显示进度。一个TextBlock显示数字。

private Thread ProgressThread;
private void Button_Click(object sender, RoutedEventArgs e)
{
    if (ProgressThread != null && ProgressThread.IsAlive) return;
    ProgressThread = new Thread(() =>
    {
        double endAngle = 0;
        while (true)
        {
            if(endAngle >= 360)
            {
                break;
            }
            endAngle += 1;
            Application.Current.Dispatcher.Invoke(() =>
            {
                arcProgress.EndAngle = endAngle;
                txtBlockProgress.Text = $"{(endAngle * 100 / 360).ToString("F1")}%";
            });
            Thread.Sleep((int)endAngle / 10);
        }
    });
    ProgressThread.Start();
}