WPF：Metro样式ProgressBar(圆点横向移动)，自适应宽度

先看效果图：

最直观的，这是4个圆点在移动，就用一个横向的StackPanel表示这四个点吧。

<StackPanel Orientation="Horizontal">

        <StackPanel.Resources>

            <Style TargetType="{x:Type Border}">

                <Setter Property="BorderBrush" Value="Transparent"/>

                <Setter Property="BorderThickness" Value=""/>

                <Setter Property="Background" Value="{Binding RelativeSource={RelativeSource AncestorType=UserControl, AncestorLevel=1}, Path= Foreground}"/>

                <Setter Property="CornerRadius" Value=""/>

                <Setter Property="Height" Value=""/>

                <Setter Property="Width" Value=""/>

            </Style>

        </StackPanel.Resources>

        <Border x:Name="border4" Margin="0,0,5,0" RenderTransformOrigin="0.5,0.5">

            <Border.RenderTransform>

                <TransformGroup>

                    <ScaleTransform/>

                    <SkewTransform/>

                    <RotateTransform/>

                    <TranslateTransform/>

                </TransformGroup>

            </Border.RenderTransform>

        </Border>

        <Border x:Name="border3" Margin="0,0,5,0" RenderTransformOrigin="0.5,0.5">

            <Border.RenderTransform>

                <TransformGroup>

                    <ScaleTransform/>

                    <SkewTransform/>

                    <RotateTransform/>

                    <TranslateTransform/>

                </TransformGroup>

            </Border.RenderTransform>

        </Border>

        <Border x:Name="border2" Margin="0,0,5,0" RenderTransformOrigin="0.5,0.5">

            <Border.RenderTransform>

                <TransformGroup>

                    <ScaleTransform/>

                    <SkewTransform/>

                    <RotateTransform/>

                    <TranslateTransform/>

                </TransformGroup>

            </Border.RenderTransform>

        </Border>

        <Border x:Name="border1" RenderTransformOrigin="0.5,0.5">

            <Border.RenderTransform>

                <TransformGroup>

                    <ScaleTransform/>

                    <SkewTransform/>

                    <RotateTransform/>

                    <TranslateTransform/>

                </TransformGroup>

            </Border.RenderTransform>

        </Border>

    </StackPanel>

圆点的颜色绑定在用户控件的Foreground上面。在调用控件的时候记得对其Foreground赋值以便显示适合的颜色。

这个动画实际上很简单，分为5个部分：

1.准备部分：准备向前移动

2.正向加速度部分：移动速度越来越快

3.匀速部分：慢速匀速移动

4.负向加速度部分：移动速度越来越慢

5.等待部分：等待所有动画完成

动画代码如下：

<Storyboard x:Key="sbKey" Completed="Storyboard_Completed"  >

            <!--最右边-->

            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="border1">

                <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0"/>

                <EasingDoubleKeyFrame KeyTime="0:0:0.8">

                    <EasingDoubleKeyFrame.EasingFunction>

                        <CircleEase EasingMode="EaseOut"/>

                    </EasingDoubleKeyFrame.EasingFunction>

                </EasingDoubleKeyFrame>

                <EasingDoubleKeyFrame KeyTime="0:0:1.2"/>

                <EasingDoubleKeyFrame KeyTime="0:0:2">

                    <EasingDoubleKeyFrame.EasingFunction>

                        <CircleEase EasingMode="EaseIn"/>

                    </EasingDoubleKeyFrame.EasingFunction>

                </EasingDoubleKeyFrame>

                <EasingDoubleKeyFrame KeyTime="0:0:2.6"/>

            </DoubleAnimationUsingKeyFrames>

            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="border2">

                <EasingDoubleKeyFrame KeyTime="0:0:0.1" Value="0" x:Name="_2_1">

                    <EasingDoubleKeyFrame.EasingFunction>

                        <CircleEase EasingMode="EaseOut"/>

                    </EasingDoubleKeyFrame.EasingFunction>

                </EasingDoubleKeyFrame>

                <EasingDoubleKeyFrame KeyTime="0:0:0.9" Value="190" x:Name="_2_2">

                    <EasingDoubleKeyFrame.EasingFunction>

                        <CircleEase EasingMode="EaseOut"/>

                    </EasingDoubleKeyFrame.EasingFunction>

                </EasingDoubleKeyFrame>

                <EasingDoubleKeyFrame KeyTime="0:0:1.3" Value="210" x:Name="_2_3"/>

                <EasingDoubleKeyFrame KeyTime="0:0:2.1" Value="400" x:Name="_2_4">

                    <EasingDoubleKeyFrame.EasingFunction>

                        <CircleEase EasingMode="EaseIn"/>

                    </EasingDoubleKeyFrame.EasingFunction>

                </EasingDoubleKeyFrame>

                <EasingDoubleKeyFrame KeyTime="0:0:2.6" Value="400" x:Name="_2_5"/>

            </DoubleAnimationUsingKeyFrames>

            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="border3">

                <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0" x:Name="_3_1">

                    <EasingDoubleKeyFrame.EasingFunction>

                        <CircleEase EasingMode="EaseOut"/>

                    </EasingDoubleKeyFrame.EasingFunction>

                </EasingDoubleKeyFrame>

                <EasingDoubleKeyFrame KeyTime="0:0:1.0" Value="190" x:Name="_3_2">

                    <EasingDoubleKeyFrame.EasingFunction>

                        <CircleEase EasingMode="EaseOut"/>

                    </EasingDoubleKeyFrame.EasingFunction>

                </EasingDoubleKeyFrame>

                <EasingDoubleKeyFrame KeyTime="0:0:1.4" Value="210" x:Name="_3_3"/>

                <EasingDoubleKeyFrame KeyTime="0:0:2.2" Value="400" x:Name="_3_4">

                    <EasingDoubleKeyFrame.EasingFunction>

                        <CircleEase EasingMode="EaseIn"/>

                    </EasingDoubleKeyFrame.EasingFunction>

                </EasingDoubleKeyFrame>

                <EasingDoubleKeyFrame KeyTime="0:0:2.6" Value="400" x:Name="_3_5"/>

            </DoubleAnimationUsingKeyFrames>

            <!--最左边-->

            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="border4">

                <EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0" x:Name="_4_1">

                    <EasingDoubleKeyFrame.EasingFunction>

                        <CircleEase EasingMode="EaseOut"/>

                    </EasingDoubleKeyFrame.EasingFunction>

                </EasingDoubleKeyFrame>

                <EasingDoubleKeyFrame KeyTime="0:0:1.1" Value="190" x:Name="_4_2">

                    <EasingDoubleKeyFrame.EasingFunction>

                        <CircleEase EasingMode="EaseOut"/>

                    </EasingDoubleKeyFrame.EasingFunction>

                </EasingDoubleKeyFrame>

                <EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="210" x:Name="_4_3"/>

                <EasingDoubleKeyFrame KeyTime="0:0:2.3" Value="400" x:Name="_4_4">

                    <EasingDoubleKeyFrame.EasingFunction>

                        <CircleEase EasingMode="EaseIn"/>

                    </EasingDoubleKeyFrame.EasingFunction>

                </EasingDoubleKeyFrame>

                <EasingDoubleKeyFrame KeyTime="0:0:2.6" Value="400" x:Name="_4_5"/>

            </DoubleAnimationUsingKeyFrames>

        </Storyboard>

由于动画需要自适应宽度，所以部分关键帧的值无法在XAML中表现出来，只有在后台进行动态处理。

当控件的宽度发生变化时需要更新动画部分关键帧：

/// <summary>

        /// 当控件的大小发生变化时

        /// </summary>

        /// <param name="sender"></param>

        /// <param name="e"></param>

        private void UserControl_SizeChanged(object sender, SizeChangedEventArgs e)

        {

            //当控件的宽度发生变化时

            if(e.WidthChanged)

            {

                isNeedUpdateStoryboard = true;

            }

        }

当动画每一次执行完毕后，下一次执行之前，判断是否需要更新部分关键帧，所以响应动画的Completed事件：

/// <summary>

        /// 动画执行完毕

        /// </summary>

        /// <param name="sender"></param>

        /// <param name="e"></param>

        private void Storyboard_Completed(object sender, EventArgs e)

        {

            //每次动画执行完毕后判断是否需要更新动画

            if(isNeedUpdateStoryboard)

            {

                UpdateStoryboard();

            }

            isNeedUpdateStoryboard = false;

            storyboard.Begin(this);

        }

/// <summary>

        /// 更新动画部分关键帧

        /// </summary>

        private void UpdateStoryboard()

        {

            //获取控件的实际宽度，减去4个点占用的宽度

            double realWidth = this.ActualWidth - ;

            //正向加速度占比47.5%

            double _0Width = realWidth * 0.475;

            //匀速部分占比5%

            double _1Width = _0Width + realWidth * 0.05;

            //根据控件的实际大小动态更改动画

            #region 右边第一个

            var _0 = storyboard.Children[] as DoubleAnimationUsingKeyFrames;

            var _0_1 = _0.KeyFrames[] as EasingDoubleKeyFrame;

            var _0_2 = _0.KeyFrames[] as EasingDoubleKeyFrame;

            var _0_3 = _0.KeyFrames[] as EasingDoubleKeyFrame;

            var _0_4 = _0.KeyFrames[] as EasingDoubleKeyFrame;

            _0_1.Value = _0Width;

            _0_2.Value = _1Width;

            _0_3.Value = realWidth;

            _0_4.Value = realWidth;

            #endregion

            #region 右边倒数第二个

            var _1 = storyboard.Children[] as DoubleAnimationUsingKeyFrames;

            var _1_1 = _1.KeyFrames[] as EasingDoubleKeyFrame;

            var _1_2 = _1.KeyFrames[] as EasingDoubleKeyFrame;

            var _1_3 = _1.KeyFrames[] as EasingDoubleKeyFrame;

            var _1_4 = _1.KeyFrames[] as EasingDoubleKeyFrame;

            _1_1.Value = _0Width;

            _1_2.Value = _1Width;

            _1_3.Value = realWidth;

            _1_4.Value = realWidth;

            #endregion

            #region 右边倒数第三个

            var _2 = storyboard.Children[] as DoubleAnimationUsingKeyFrames;

            var _2_1 = _2.KeyFrames[] as EasingDoubleKeyFrame;

            var _2_2 = _2.KeyFrames[] as EasingDoubleKeyFrame;

            var _2_3 = _2.KeyFrames[] as EasingDoubleKeyFrame;

            var _2_4 = _2.KeyFrames[] as EasingDoubleKeyFrame;

            _2_1.Value = _0Width;

            _2_2.Value = _1Width;

            _2_3.Value = realWidth;

            _2_4.Value = realWidth;

            #endregion

            #region 右边倒数第四个

            var _3 = storyboard.Children[] as DoubleAnimationUsingKeyFrames;

            var _3_1 = _3.KeyFrames[] as EasingDoubleKeyFrame;

            var _3_2 = _3.KeyFrames[] as EasingDoubleKeyFrame;

            var _3_3 = _3.KeyFrames[] as EasingDoubleKeyFrame;

            var _3_4 = _3.KeyFrames[] as EasingDoubleKeyFrame;

            _3_1.Value = _0Width;

            _3_2.Value = _1Width;

            _3_3.Value = realWidth;

            _3_4.Value = realWidth;

            #endregion

        }

最后提供动画的开始和结束调用：

/// <summary>

        /// 使进度条开始滚动

        /// </summary>

        public void Start()

        {

            this.Visibility = System.Windows.Visibility.Visible;

            UpdateStoryboard();

            storyboard.Begin(this, true);

        }

        /// <summary>

        /// 使进度条停止滚动

        /// </summary>

        public void Stop()

        {

            this.Visibility = System.Windows.Visibility.Collapsed;

            storyboard.Stop(this);

        }

源代码下载：http://download.csdn.net/detail/lyclovezmy/7598897

WPF：Metro样式ProgressBar(圆点横向移动)，自适应宽度的更多相关文章

ASP.NET实例——漂亮的自适应宽度的导航条（仿Discuz!）
PHP比较成熟的开放的源代码比较多,比方说PrestaShop,比方说Discuz!...... 虽然语言不同,但基本原理是一样的,有时间的话读一读,对学习ASP.NET应该是非常有好处的(唉,什么时 ...
shrink-to-fit(自适应宽度)
自适应宽度是指当未明白设定容器的宽度(或外边距设为auto)时,在特定的情况下容器的宽度会依据情况自行设定.而设定的结果往往并非我们想要的. W3C规范中描写叙述了几种shrink-to-fit的情况 ...
从三栏自适应宽度布局到css布局的讨论
如何实现一个三栏自适应布局,左右各100px,中间随着浏览器宽度自适应? 第一个想到的是使用table布局,设置table的宽度为100%,三个td,第1个和第3个固定宽度为100px,那么中间那个就 ...
UEditor百度富文本编辑器--让编辑器自适应宽度的解决方案
UEditor百度富文本编辑器的initialFrameWidth属性,默认值是1000. 不能够自适应屏幕宽度.如图1: 刚开始的时候,我是直接设置initialFrameWidth=null的.效 ...
JS实现自适应宽度的Tag切换
效果体验:http://hovertree.com/texiao/js/3.htm 该效果使用纯JavaScript代码,实现TAB页切换效果,TAB标签根据内容自适应宽度,点击TAB标签切换内容页. ...
WPF设置DataGrid行内容高度自适应与 TextBox/TextBlock内容高度自适应
WPF设置DataGrid行内容高度自适应 TextBox/TextBlock内容高度自适应参考: DataGrid 控件中的调整大小选项: http://msdn.microsoft.com/ ...
RelativeLayout中的格局，自适应宽度布局
RelativeLayout中的布局,自适应宽度布局该图片中为android布局:总布局为 RelativeLayoutAtLeft 为居左 <TextView android:backgro ...
Qt的tablewidget行列头自适应宽度
Qt构造一个TableWidget后,窗口最大化后,列头默认不能自适应宽度,研究了一下,Qt提供了两种方式来处理这个问题,如下: 1. 使用horizontalHeader()->setRe ...
[Winform]DataGridView列自适应宽度
引言在做winform项目中,数据控件DataGridView的使用多多少少是会用到的,如果不设置它的属性,默认情况下是不会自适应宽度的,你想查看某项的数据,就不得不将标题栏拖来拖去,挺烦的. 方法 ...

随机推荐

PythonDay02——编程语言、python介绍以及安装解释器、运行程序的两种方式、变量
一.编程语言 1.1 机器语言:直接用计算机能理解的二进制指令编写程序,直接控制硬件 1.2 汇编语言:用英文标签取代二进制指令去编写程序,本质也是直接控制硬件 1.3 高级语言:用人能理解的表达方式 ...
MySQL导入导出实践
最近一次数据迁移,需要将MySQL的数据导出.处理后导入到新表和ES.这里做个简单记录,方便后续查询. 注: 为了写文章方便及隐私安全,实际内容会有所简化.例如表结构简化.数据库连接部分全部用 xxx ...
HttpSessionListener的用法
Session创建事件发生在每次一个新的session创建的时候,类似地Session失效事件发生在每次一个Session失效的时候. 这个接口也只包含两个方法,分别对应于Session的创建和失效: ...
项目实战2.1—nginx 反向代理负载均衡、动静分离和缓存的实现
总项目流程图,详见 http://www.cnblogs.com/along21/p/8000812.html 实验一:实现反向代理负载均衡且动静分离 1.环境准备: 机器名称 IP配置服务角色备 ...
koa2入门使用总结
koa2的介绍 Koa 是一个新的 web 框架,由 Express 幕后的原班人马打造, 致力于成为 web 应用和 API 开发领域中的一个更小.更富有表现力.更健壮的基石. 通过利用 async ...
搞懂Python的类和对象名称空间
代码块的分类 python中分几种代码块类型,它们都有自己的作用域,或者说名称空间: 文件或模块整体是一个代码块,名称空间为全局范围函数代码块,名称空间为函数自身范围,是本地作用域,在全局范围的内层 ...
【转】CentOS系统操作下安装相关各种软件
CentOS系统是非常强大经常应用的系统,我就对CentOS系统深入探讨学习,对大家概括讲述CentOS系统应用,希望对大家有用.虽然CentOS Linux使用了RHEL的源代码,但是由于这些源代码 ...
数据库部分（MySql）_3
表设计之关联关系一对一:有两张表A和B,A表中有一条数据对应B表中的一条数据称为一对一: 应用场景:用户表和用户扩展表,商品表和商品信息扩展表: 如何建立关系:在从表中添加一个外键字段指向主表的主键 ...
C#.NET 中的 Timer 计时器及 3 种使用方法
定时器是系统常用的组件之一,程序员可以根据自己的需求定制一个定时器类型,也可以使用.net内建的定时器类型.在.net中一共为程序员提供了3种定时器: System.Windows.Forms.Tim ...
npm 安装卸载模块（转载）
来源 https://blog.csdn.net/yihanzhi/article/details/75665959 利用npm 安装删除模块 npm安装模块 [npm install xxx]利用 ...

WPF：Metro样式ProgressBar(圆点横向移动)，自适应宽度

WPF：Metro样式ProgressBar(圆点横向移动)，自适应宽度的更多相关文章

随机推荐

热门专题