WPF 简单的绕圈进度条(无cs代码)

最新推荐文章于 2023-11-28 22:48:20 发布
最新推荐文章于 2023-11-28 22:48:20 发布
阅读量127 收藏
点赞数
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/lonelyxmas/p/9038431.html
本文介绍了一种使用WPF实现的绕圈进度条效果，通过设置多个小圆圈的透明度动画来模拟旋转进度的效果。此方法无需编写.cs代码，全部通过XAML完成。
WPF 简单的绕圈进度条(无cs代码)

方案: 图标位置不变化的情况下设置透明度实现

代码:

<Window
    x:Class="WpfApp1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:ec="http://schemas.microsoft.com/expression/2010/controls"
    xmlns:local="clr-namespace:WpfApp1"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="MainWindow"
    Width="300"
    Height="300"
    mc:Ignorable="d">

    <Window.Resources>
        <Duration x:Key="AnimationTime">0:0:.84</Duration>
    </Window.Resources>
    <Grid Background="Gray">
        <Ellipse
            x:Name="ellipse"
            Width="80"
            Height="80"
            RenderTransformOrigin="0.5,0.5" />
        <ec:PathListBox HorizontalAlignment="Left" VerticalAlignment="Top">
            <ec:PathListBox.LayoutPaths>
                <ec:LayoutPath Distribution="Even" SourceElement="{Binding ElementName=ellipse}" />
            </ec:PathListBox.LayoutPaths>
            <Ellipse
                Width="15"
                Height="15"
                Fill="White">
                <Ellipse.Triggers>
                    <EventTrigger RoutedEvent="Window.Loaded">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                                    BeginTime="0:0:.770"
                                    RepeatBehavior="Forever"
                                    Storyboard.TargetProperty="Opacity"
                                    From=".2"
                                    To="1"
                                    Duration="{StaticResource AnimationTime}" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Ellipse.Triggers>
            </Ellipse>
            <Ellipse
                Width="15"
                Height="15"
                Fill="White">
                <Ellipse.Triggers>
                    <EventTrigger RoutedEvent="Window.Loaded">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                                    BeginTime="0:0:.700"
                                    RepeatBehavior="Forever"
                                    Storyboard.TargetProperty="Opacity"
                                    From=".2"
                                    To="1"
                                    Duration="{StaticResource AnimationTime}" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Ellipse.Triggers>
            </Ellipse>
            <Ellipse
                Width="15"
                Height="15"
                Fill="White">
                <Ellipse.Triggers>
                    <EventTrigger RoutedEvent="Window.Loaded">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                                    BeginTime="0:0:.630"
                                    RepeatBehavior="Forever"
                                    Storyboard.TargetProperty="Opacity"
                                    From=".2"
                                    To="1"
                                    Duration="{StaticResource AnimationTime}" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Ellipse.Triggers>
            </Ellipse>
            <Ellipse
                Width="15"
                Height="15"
                Fill="White">
                <Ellipse.Triggers>
                    <EventTrigger RoutedEvent="Window.Loaded">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                                    BeginTime="0:0:.560"
                                    RepeatBehavior="Forever"
                                    Storyboard.TargetProperty="Opacity"
                                    From=".2"
                                    To="1"
                                    Duration="{StaticResource AnimationTime}" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Ellipse.Triggers>
            </Ellipse>
            <Ellipse
                Width="15"
                Height="15"
                Fill="White">
                <Ellipse.Triggers>
                    <EventTrigger RoutedEvent="Window.Loaded">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                                    BeginTime="0:0:.490"
                                    RepeatBehavior="Forever"
                                    Storyboard.TargetProperty="Opacity"
                                    From=".2"
                                    To="1"
                                    Duration="{StaticResource AnimationTime}" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Ellipse.Triggers>
            </Ellipse>
            <Ellipse
                Width="15"
                Height="15"
                Fill="White">
                <Ellipse.Triggers>
                    <EventTrigger RoutedEvent="Window.Loaded">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                                    BeginTime="0:0:.420"
                                    RepeatBehavior="Forever"
                                    Storyboard.TargetProperty="Opacity"
                                    From=".2"
                                    To="1"
                                    Duration="{StaticResource AnimationTime}" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Ellipse.Triggers>
            </Ellipse>
            <Ellipse
                Width="15"
                Height="15"
                Fill="White">
                <Ellipse.Triggers>
                    <EventTrigger RoutedEvent="Window.Loaded">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                                    BeginTime="0:0:.350"
                                    RepeatBehavior="Forever"
                                    Storyboard.TargetProperty="Opacity"
                                    From=".2"
                                    To="1"
                                    Duration="{StaticResource AnimationTime}" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Ellipse.Triggers>
            </Ellipse>
            <Ellipse
                Width="15"
                Height="15"
                Fill="White">
                <Ellipse.Triggers>
                    <EventTrigger RoutedEvent="Window.Loaded">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                                    BeginTime="0:0:0.280"
                                    RepeatBehavior="Forever"
                                    Storyboard.TargetProperty="Opacity"
                                    From=".2"
                                    To="1"
                                    Duration="{StaticResource AnimationTime}" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Ellipse.Triggers>
            </Ellipse>
            <Ellipse
                Width="15"
                Height="15"
                Fill="White">
                <Ellipse.Triggers>
                    <EventTrigger RoutedEvent="Window.Loaded">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                                    BeginTime="0:0:0.210"
                                    RepeatBehavior="Forever"
                                    Storyboard.TargetProperty="Opacity"
                                    From=".2"
                                    To="1"
                                    Duration="{StaticResource AnimationTime}" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Ellipse.Triggers>
            </Ellipse>
            <Ellipse
                Width="15"
                Height="15"
                Fill="White">
                <Ellipse.Triggers>
                    <EventTrigger RoutedEvent="Window.Loaded">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                                    BeginTime="0:0:0.140"
                                    RepeatBehavior="Forever"
                                    Storyboard.TargetProperty="Opacity"
                                    From=".2"
                                    To="1"
                                    Duration="{StaticResource AnimationTime}" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Ellipse.Triggers>
            </Ellipse>
            <Ellipse
                Width="15"
                Height="15"
                Fill="White">
                <Ellipse.Triggers>
                    <EventTrigger RoutedEvent="Window.Loaded">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                                    BeginTime="0:0:0.7"
                                    RepeatBehavior="Forever"
                                    Storyboard.TargetProperty="Opacity"
                                    From=".2"
                                    To="1"
                                    Duration="{StaticResource AnimationTime}" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Ellipse.Triggers>
            </Ellipse>
            <Ellipse
                Width="15"
                Height="15"
                Fill="White">
                <Ellipse.Triggers>
                    <EventTrigger RoutedEvent="Window.Loaded">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                                    BeginTime="0:0:0"
                                    RepeatBehavior="Forever"
                                    Storyboard.TargetProperty="Opacity"
                                    From=".2"
                                    To="1"
                                    Duration="{StaticResource AnimationTime}" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Ellipse.Triggers>
            </Ellipse>
        </ec:PathListBox>
    </Grid>
</Window>

 

posted on 2018-05-14 22:07 NET未来之路 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/lonelyxmas/p/9038431.html

WPF绘制进度条（弧形，圆形，异形）
星火燎猿
11-30 2800
WPF里面圆形进度条实现还比较麻烦，主要涉及到的就是动态绘制进度条的进度需要用到简单的数学算法。其实原理比较简单，我们需要的是话两条重叠的弧线，里面的弧线要比里面的弧线要宽，这样简单的雏形就出来了。我们可以用Path来绘制弧线，代码如下： 出来的效果： Path里面我们重点用到的就三个属性值：我们下面李来看一下如果我们不设置：，的效果图： 是不是很突兀。这个方案还算有趣，Ellipse 明明是圆形，却能用来画弧形。为了用 Ellipse 显示进度，我们会用 StrokeDashArray 控制它的边框长
wpf slider 进度条的样式模板，带有进度颜色显示
Boris的专栏
12-30 6857
效果图： 只需在前台加上这段代码即可： <Window x:Class="WpfAppSlider.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.
继续聊WPF——进度条
kanwoerzi
11-12 532
ProgressBar控件与传统WinForm使用方法完全一样，我们只需关注： Minimum——最小值，默认为0； Maximum——最大值，默认为100. Value——当前值。 关键是它的控件模板，因为系统的默认主题不好看，很多时候我们是需要自定义样式和模板。 老方法，先看定义： [TemplatePartAttribute(Name = "PART_Track", T...
WPF 简易进度条效果
weixin_30740581的博客
06-15 283
最近做一个项目，看到以前同事写的进度条效果不错，所以，拿来简化了下，不炫，但是项目中还是够用的。 还是，先来看下调用以后的效果 1、因为ProgressbBar的Foreground显示不得不一样，所以，要有一个参数去给控件进行设置，因此定义了一个参数值ForegroundColor public int ForegroundColor { get { ...
WPF好看的进度条实现浅谈（效果有点类似VS2012安装界面）
weixin_30896763的博客
06-08 456
　　为了界面友好，一般的操作时间较长时，都需要增加进度条提示。由于WPF自带的进度条其实不怎么好看，而且没啥视觉效果。后来，装VS2012时，发现安装过程中进度条效果不错，于是上网查了资料。学习了ModernUI（开源的），地址：https://github.com/firstfloorsoftware/mui。 　　后来，做了尝试写了个Demo，效果不错。另外，专门录制了tif文件，方便大家看...
WPF中自定义漂亮的进度条
weixin_30596735的博客
01-25 381
wpf中自带的进度条是这个样子德。 在2003中这个进度条的样子就会变得非常难看。 在wpf中您可以自己制作任意样式的进度条。如下图： UserControl.xaml 用户控件 <Grid x:Name="LayoutRoot" Background="Transparent" HorizontalAlignmen...
WPF自定义绕圈进度条实现教程
"WPF实现转圈进度条效果的教程" 在Windows Presentation Foundation（WPF）中，创建一个自定义的转圈进度条效果是通过利用图形元素和动画来实现的。这种进度条通常以圆形或者环形的方式显示进度，给予用户一种动态...
WPF实现的圆形进度条
03-16
在Windows Presentation Foundation (WPF) 中，开发人员可以利用丰富的图形功能来创建各种自定义UI元素，其中之一就是圆形进度条。圆形进度条通常用于展示一个任务的进度，它以直观的方式呈现百分比完成状态，与传统...
WPF_小圆点环状进度条
11-09
在本文中，我们将深入探讨如何在WPF（Windows Presentation Foundation）环境中实现一个独特且吸引人的小圆点环状进度条。这种进度条设计通常用于显示应用程序的加载或处理进度，为用户界面增添视觉吸引力，同时提供...
仿vs实现WPF好看的进度条
10-24
由于WPF自带的进度条其实不怎么好看，而且没啥视觉效果。下面给大家分享的是仿VS的进度条效果的代码，有需要的小伙伴可以参考下。
WPF,好看的圆形ProgressBar实现
05-18
经典的使用样式的方法是用圆形的ProgressBar，提供多种演示样式。
WPF动画进度条
qq_37343780的博客
03-17 1924
WPF动画进度条 前台代码 <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="AnimationTiming.AutoReverseExample" WindowTitle="AutoReverse Example"> <StackPanel Mar
WPF创建进度条
最新发布
故里2130
11-28 1404
关键点就是要对max的值进行判断，如果大于100和小于100的话，显示是不一样的，主要是因为进度条的值是100，要相对的扩大或者缩小，那么界面上显示的数据变化就是一样的。功能就是点击按钮，后台处理数据，前台显示处理数据的变化，当然还可以对进度条进行美化和关闭的操作，等待后台处理完毕数据，然后自动关闭。5.ProgressBarStyle.xaml，最后就是对进度条的美化样式。使用wpf做一个原生的进度条，进度条上面有值，先看效果。4.MainWindow.xaml.cs的代码。其中最重要的就是Task。
Photoshop和WPF双剑配合，打造炫酷个性的进度条控件
savagelin的专栏
03-24 430
现在如果想打造一款专业的App，UI的设计和操作的简便性相当重要。UI设计可以借助Photoshop或者AI等设计工具，之前了解到WPF设计工具Expression Blend可以直接导入PSD文件或者AI设计文件（当然不是全部特征支持），最近研究了一下，也费了一番周折，好在最后实现了预期的效果。下面将step by step用示例说明如何先用PS构建一个矢量图形模板，然后用Expression ...
封装一个特别好看的进度条样式！
123的博客
11-27 2004
这可是我一个属性一个属性从国外网站上爬下来的啊！超炫的动态进度条啊，有木有！，效果如下： demo下载地址：http://download.csdn.net/detail/lemon_zhao/9596906...
WPF手绘进度条
如果有一天...
02-15 6653
话说现在的项目中我要用进度条了。本想用自带的那个ProcessBar控件，可是样式不好看，加上自己本事有限，对WPF中的样式相当的不熟。只好想别的办法了。不知哪根儿神经一动，我想到了用Rectangle控件。知道这个控件的一定就知道我是怎么想的了。具体通过DispatcherTimer类实现。因为这个类有一个Interval属性设置使用的多长时间完成，再加上一个Tick事件，每一毫秒就会触发一下这
WPF 创建水柱状进度条
u011023096的专栏
05-08 1017
最近由于项目需要，需要在界面上绘制一个水柱状的进度条，如图所示： 第一反应是，重写ProgressBar，创建一个自定义的模板。结果呢，在改写的时候发现，进度条的增长方向是水平的，不是竖直，然后就各种百度，然鹅，没有找到解决方案。 受https://blog.csdn.net/qq_30975833/article/details/54987404这篇文章的启发，原来是可以用渐变的画笔来表...
WPF之Shape形状
LADT的博客
10-01 6846
在WPF用户界面中，绘制2D图形内容的最简单方法是使用形状，专门用于表示简单的直线、椭圆、矩形以及多边形的一些类。 Shape类 每个形状都是继承自抽象类System.Windows.Shape Shape类中有Ellipse椭圆、Line直线、Polyline多段线、Polygon封闭多段线、Rectangle矩形、Path曲线 Shape属性 Fill属性： 形状表面画刷。 Stroke属性...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值