手把手教你 用 wpf 制作metro ProgressRing (Windows8 等待动画）

最新推荐文章于 2023-11-13 17:02:24 发布
最新推荐文章于 2023-11-13 17:02:24 发布
阅读量5.9k 收藏 3
点赞数 3
分类专栏： async XAML Metro ProgressRing WPF .net4.5 Windows8 文章标签： wpf resources class .net 工作 2010
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangrenzhu2011/article/details/7712537
版权
XAML 同时被 3 个专栏收录
22 篇文章 0 订阅
订阅专栏
WPF
19 篇文章 0 订阅
订阅专栏
Windows8
17 篇文章 0 订阅
订阅专栏

效果图:

 

还在羡慕metro的ProgressRing吗？

wpf 也可以拥有

首先说下思路，

一共6个点围绕一直圆转，所以需要使用rotation动画 并且一直转下去。

那么下面的问题就好解决了。

首先是xaml 部分

我们需要实现旋转动画：

所以要用到这个：

 

<DoubleAnimationUsingKeyFrames 
      Storyboard.TargetProperty="(Ellipse.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
                <LinearDoubleKeyFrame Value="0" KeyTime="0:0:0"/>
                <EasingDoubleKeyFrame Value="90" KeyTime="0:0:0.2">
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame Value="270" KeyTime="0:0:1.6">
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame Value="450" KeyTime="0:0:1.8">
                </EasingDoubleKeyFrame>
                <LinearDoubleKeyFrame Value="630" KeyTime="0:0:3.2"/>
                <EasingDoubleKeyFrame Value="720" KeyTime="0:0:3.4">
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame Value="720" KeyTime="0:0:5.0">
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>

上面这一段是单个ellipse的运动轨迹，当然你需要在属性中设置他的中心点值

代码如下：

<Ellipse x:Name="el" Width="10" Height="10" Fill="White" Canvas.Left="73" Canvas.Top="57" >
            <Ellipse.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform CenterX="-20" CenterY="-40"/>
                    <TranslateTransform/>
                </TransformGroup>
            </Ellipse.RenderTransform>
        </Ellipse>


 

 

接下来的事情就好办了，我们需要他转1圈就消失 结束后也消失，所以需要控制透明度，

<DoubleAnimationUsingKeyFrames 
						Storyboard.TargetProperty="Opacity">
                <LinearDoubleKeyFrame Value="0" KeyTime="0:0:0"/>
                <EasingDoubleKeyFrame Value="1" KeyTime="0:0:0.2">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BackEase EasingMode="EaseInOut"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame Value="1" KeyTime="0:0:1.6">
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame Value="1" KeyTime="0:0:1.8">
                </EasingDoubleKeyFrame>
                <LinearDoubleKeyFrame Value="1" KeyTime="0:0:3.2"/>
                <EasingDoubleKeyFrame Value="0" KeyTime="0:0:3.5">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BackEase EasingMode="EaseOut"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame Value="0" KeyTime="0:0:5.0">
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>


 

 

最终把一个圆变成多个圆的工作 就交给代码了，需要一点点小技巧 以下使用.net 4.5实现 其他版本可以吧Task.Delay 替换成Thread.Sleep

<UserControl
             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" 
             xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
             xmlns:local="clr-namespace:Transvalue.MetroStyleBusyIndicator" 
             x:Class="Transvalue.MetroStyleBusyIndicator.MetroRotaionIndicator" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <UserControl.Resources>
        <Storyboard x:Key="Trans" RepeatBehavior="Forever">
            <DoubleAnimationUsingKeyFrames 
						Storyboard.TargetProperty="(Ellipse.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
                <LinearDoubleKeyFrame Value="0" KeyTime="0:0:0"/>
                <EasingDoubleKeyFrame Value="90" KeyTime="0:0:0.2">
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame Value="270" KeyTime="0:0:1.6">
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame Value="450" KeyTime="0:0:1.8">
                </EasingDoubleKeyFrame>
                <LinearDoubleKeyFrame Value="630" KeyTime="0:0:3.2"/>
                <EasingDoubleKeyFrame Value="720" KeyTime="0:0:3.4">
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame Value="720" KeyTime="0:0:5.0">
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames 
						Storyboard.TargetProperty="Opacity">
                <LinearDoubleKeyFrame Value="0" KeyTime="0:0:0"/>
                <EasingDoubleKeyFrame Value="1" KeyTime="0:0:0.2">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BackEase EasingMode="EaseInOut"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame Value="1" KeyTime="0:0:1.6">
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame Value="1" KeyTime="0:0:1.8">
                </EasingDoubleKeyFrame>
                <LinearDoubleKeyFrame Value="1" KeyTime="0:0:3.2"/>
                <EasingDoubleKeyFrame Value="0" KeyTime="0:0:3.5">
                    <EasingDoubleKeyFrame.EasingFunction>
                        <BackEase EasingMode="EaseOut"/>
                    </EasingDoubleKeyFrame.EasingFunction>
                </EasingDoubleKeyFrame>
                <EasingDoubleKeyFrame Value="0" KeyTime="0:0:5.0">
                </EasingDoubleKeyFrame>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>
    <Canvas>
        <Ellipse x:Name="el" Width="10" Height="10" Fill="White" Canvas.Left="73" Canvas.Top="57" >
            <Ellipse.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform CenterX="-20" CenterY="-40"/>
                    <TranslateTransform/>
                </TransformGroup>
            </Ellipse.RenderTransform>
        </Ellipse>
        <Ellipse x:Name="el2" Width="10" Height="10" Fill="White" Canvas.Left="73" Canvas.Top="57" Opacity="0" >
            <Ellipse.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform CenterX="-20" CenterY="-40"/>
                    <TranslateTransform/>
                </TransformGroup>
            </Ellipse.RenderTransform>
        </Ellipse>
        <Ellipse x:Name="el3" Width="10" Height="10" Fill="White" Canvas.Left="73" Canvas.Top="57" Opacity="0">
            <Ellipse.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform CenterX="-20" CenterY="-40"/>
                    <TranslateTransform/>
                </TransformGroup>
            </Ellipse.RenderTransform>
        </Ellipse>
        <Ellipse x:Name="el4" Width="10" Height="10" Fill="White" Canvas.Left="73" Canvas.Top="57" Opacity="0">
            <Ellipse.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform CenterX="-20" CenterY="-40"/>
                    <TranslateTransform/>
                </TransformGroup>
            </Ellipse.RenderTransform>
        </Ellipse>
        <Ellipse x:Name="el5" Width="10" Height="10" Fill="White" Canvas.Left="73" Canvas.Top="57" Opacity="0">
            <Ellipse.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform CenterX="-20" CenterY="-40"/>
                    <TranslateTransform/>
                </TransformGroup>
            </Ellipse.RenderTransform>
        </Ellipse>
        <Ellipse x:Name="el6" Width="10" Height="10" Fill="White" Canvas.Left="73" Canvas.Top="57" Opacity="0">
            <Ellipse.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform CenterX="-20" CenterY="-40"/>
                    <TranslateTransform/>
                </TransformGroup>
            </Ellipse.RenderTransform>
        </Ellipse>
    </Canvas>
</UserControl>


 

 

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace Transvalue.MetroStyleBusyIndicator
{
    /// <summary>
    /// MetroRotaionIndicator.xaml 的交互逻辑
    /// </summary>
    public partial class MetroRotaionIndicator : UserControl
    {
        Storyboard trans;
        public MetroRotaionIndicator()
        {
            InitializeComponent();
            trans = Resources["Trans"] as Storyboard;
            this.Loaded += ((sender, e) =>
            {
                Active();
            });
        }

        public async void Active()
        {
            el.BeginStoryboard(trans);
            await Task.Delay(170);
            el2.BeginStoryboard(trans);
            await Task.Delay(170);
            el3.BeginStoryboard(trans);
            await Task.Delay(170);
            el4.BeginStoryboard(trans);
            await Task.Delay(170);
            el5.BeginStoryboard(trans);
            await Task.Delay(170);
            el6.BeginStoryboard(trans);
        }

        public void Stop()
        {
            trans.Stop(el);
            trans.Stop(el2);
            trans.Stop(el3);
            trans.Stop(el4);
            trans.Stop(el5);
            trans.Stop(el6);
        }

      
    }
}


 

 

 

将以上内容编译成用户控件即可使用。

 xmlns:MetroStyleBusyIndicator="clr-namespace:Transvalue.MetroStyleBusyIndicator;assembly=Transvalue.MetroStyleBusyIndicator"

 <MetroStyleBusyIndicator:MetroRotaionIndicator HorizontalAlignment="Left" Height="187" Margin="924,534,0,0" VerticalAlignment="Top" Width="217"/>

GhostZephyrus
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
WPF 等待页面动画
01-13
WPF 等待页面动画
WPF制作滚动圈圈等待控件效果
01-08
项目开发中遇到费时的资源加载情况，不能没有任何相映效果反馈不然会让人误以为死机了，这个时候你可能就需要加载等待效果来处理这种问题了。
基于WPF实现的等待动画
10-07
使用wpf实现了一个等待动画， 在客户端程序里，某些耗时的操作可能需要使用进度条、等待动画来提供友好的UI交互。本资源演示了wpf里实现等待动画的一种简单方案。
wpf加载等待动画（loading）
03-17
用wpf程序实现Loadingwait动画等待效果，在canvas里放9个Ellipse，，然后再用用定时器，一直改变每个Ellipse的位置，从而实现loading 效果。
wpf之loading加载动画
09-29
wpf之loading加载动画
WPF编程，等待动画的几中实现形式
君一席
06-23 2168
WPF界面加载动画
WPF - 请求等待动画--Loading
最新发布
qq_44920920的博客
11-13 200
加载动画,请求动画,等待动画,Loading,WPF
C# WPF 基础等待动画Loading...动态转圈 Storyboard ContentControl
qq_20758141的博客
12-06 1654
C# WPF 等待 动画 Loading 转圈 Storyboard ContentControl Interaction InvokeCommandAction
WPF 如何在控件上显示 Loading 等待动画
dotNET跨平台
03-26 655
WPF 如何在控件上显示 Loading 等待动画控件名：Loading作 者：WPFDevelopersOrg - 驚鏵原文链接[1]：https://github.com/WPFDevelopersOrg/WPFDevelopers框架使用.NET40；Visual Studio 2022;使用方式需引入命名空间后设置控件的附加属性 wd:Loading.IsShow="true"，即...
智能WPF登录覆盖（Windows 8样式）
04-08
WPF应用程序的登录覆盖，其样式类似于Windows 8登录屏幕。
使用XAML创建Metro（Windows 8）加载动画
04-04
模拟使用纯XAML在Windows 8中看到的加载动画。
wpf圆形加载等待效果
10-02
一个加载等待特效，喜欢的朋友可以下载参考
WPF之带旋转动画的三维界面效果
12-28
通过WPF的三维材料，动态应用动画等技术，做到多个UI界面视图在三维空间中的动画切换，本例通过键盘快捷键来控制动画。
图片循环播放器。WPF制作 以下为代码
王韧竹 的专栏
03-22 3108
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; us
WPF 悬浮键盘
王韧竹 的专栏
03-22 3017
public class TouchScreenKeyboard : Window { #region Property & Variable & Constructor private static double _WidthTouchKeyboard = 830; public static double WidthTouchKeyb
wpf+.net 4.5 surface2.0 = 异步多点触控 时间轴 part1
王韧竹 的专栏
05-24 2963
直接贴代码 废话不多说了。 运行环境  vs11 beta  framework4.5 surface runtime  surface sdk 2.0 多点触控模拟器 multitouchVista 或多点触控设备 源码请关注我的资源下载 功能说明： 多点触控时间轴，事件可缩放 旋转  多点同时操作 放大缩小等， 时间范围0001-9980年 定位精确到天 时间轴数据
wpf+.net 4.5 surface2.0 = 异步多点触控 时间轴 part7
王韧竹 的专栏
05-25 2379
本开源项目svn 地址 如需加入开发或者有其他疑问请在博客留言   svn://www.oksvn.com/Timeline/     Win8 metro开发者联盟  群号：195314253 欢迎win8开发者 或对win8 开发感兴趣的 有志之士加入
用wpf制作登录界面
09-15
要用WPF制作登录界面，您需要了解WPF的基本知识和使用方法。您可以使用Visual Studio创建WPF项目，然后在项目中添加用户界面元素，如文本框、标签和按钮等，并使用C#代码实现登录功能。 下面是一个简单的例子： 1....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值