在设计界面时，有时会遇到进度条，本次讲解数据绑定如何设计自定义的绕圈进度条，直接上代码：

1、控件界面

用户控件x : class=' ProgressBarControl ' xmlns=' http://schemas。微软。com/winfx/2006/xaml/presentation ' xmlns : x=' http://架构。微软。com/winfx/2006/xaml ' xmlns : MC=' http://schemas。openxmlformas。org/markup-compatibility/2006 ' xmlns 3360d=' 3http://架构。微软资源样式目标类型='椭圆'设置器属性='高度'值=' {绑定重叠大小} '/设置器设置器属性='宽度'值=' {绑定重叠大小} '/设置器设置器属性='拉伸'值='填充'/设置器！-设置圆的颜色-设置器属性="填充"值="白色"/设置器/样式/网格。资源堆栈面板水平对齐="中心"垂直对齐="中心"视图框宽度="{绑定视图框大小}"高度="{绑定视图框大小}"水平对齐="中心"垂直对齐="中心"网格x :名称="布局"背景="透明"水平对齐="中心"垂直对齐="中心"!-此处有帆布的加载和卸载事件-Canvas x : name=' ProgressBarCanvas ' RenderTransformOrigin=' 0.5，0.5 '水平对齐=' Center '垂直对齐=' Center ' Width=' { Binding canvasize } ' Height=' { Binding canvasize } ' Loaded=' HandleLoaded ' Unloaded=' HandleUnloaded '！-画圆-帆布RenderTransform RotateTransform x : name=' spinner state ' Angle=' 0 '/Canvas .渲染变换/画布/网格/视图框/堆栈面板/网格/用户控件2、控件后台逻辑：

控件后台：

///摘要///进度条////摘要公共分部类ProgressBarControl :用户控件{//集成到按指定时间间隔和指定优先级处理的系统窗户。线程。调度程序队列中的计时器。

私有DispatcherTimer animationTimerprivate progress bardatamodel _ dataModel；私有int索引=0;#地区构造方法与加载///摘要///构造方法////summary public ProgressBarControl(){ InitializeComponent()；} ///摘要///加载后刷新////summary////param name=' sender '/param///param name=' e '/param private void ProgressBarControl _ OnLoaded(对象发送方，RoutedEventArgs e){ animationTimer=新调度程序(调度优先级).ContextIdle，Dispatcher)；//指定时间间隔动画定时器。间隔=新的时间跨度(0,0,0,0,时间跨度);if(EllipseCount 1){ EllipseCount=12；} for(int I=0；I ellipscounti){ progress bar canvas .孩子们。添加(新椭圆());} var dataModel=new ProgressBarDataModel(){ 0拉票大小=拉票大小，eclipse size=EllipseSize }；_数据模型=数据模型这个数据上下文=数据模型} #endregion #region属性///摘要///获取或设置圆圈数量///默认12////summary public double EllipseCount { get { return(double)GetValue(EllipseCountProperty)；} set { SetVaLue(EllipsCountProperty，value)；} }公共静态只读依赖属性EllipseCountProperty=依赖属性.注册(“EllipseCount”，typeof(double)，typeof(ProgressBarControl)，新的框架属性元数据(10.0，框架属性元数据选项.效果渲染))；///摘要///获取或设置圆圈大小///默认10////summary public double EllipseSize { get { return(double)GetValue(EllipseSizeProperty)；} set { setVaLue(ellipsesize属性，值)；} }公共静态只读依赖属性EllipseSizeProperty=依赖属性.注册(' EllipseSize '，typeof(double)，typeof(ProgressBarControl)，新的框架属性元数据(10.0，框架属性元数据选项.效果渲染))；///摘要///获取或设置面板大小///默认80////summary public double crawlize { get { return(double)GetValue(laclazizeproperty)；} set { SetValue(LacanizeProperty，value)；} }公共静态只读依赖属性canlazizeproperty=依赖属性.register(' lacralize '，typeof(double)，typeof(ProgressBarControl)，新的框架属性元数据(80.0，框架属性元数据选项.效果渲染))；///摘要///获取或设置每次旋转角度///默认10.0////summary public double StepAngle { get { return(double)GetValue(StepAngleProperty)；} set { SetValue(StepAngleProperty，value)；} }公共静态只读依赖属性StepAngleProperty=依赖属性.注册(“StepAngle”，typeof(double)，typeof(ProgressBarControl)，新的框架属性元数据(10.0，框架属性元数据选项.效果渲染))；///摘要///获取或设置每次旋转间隔时间（毫秒) ///默认100毫秒////summary public int TimeSpan { get { return(int)GetValue(TimeSpan)属性)；} set { SetValue(TimeSpanProperty，value)；} }公共静态只读依赖属性timespan属性=依赖属性.注册(“TimeSpan”，typeof(int)，typeof(ProgressBarControl)，新的框架属性元数据(100，框架属性元数据选项.效果渲染))；# endregion #区域方法///摘要///画布加载////summary////param name=' sender '/param///param name=' e '/param private void HandleLoaded(对象发件人，RoutedEventArgs e) { //设置设置圆的位置和旋转角度seteclipse position(_ dataModel)；//设计器属性提供用于与设计器进行通信的附加属性。

if(！设计属性.getsindesignmode(this)){ if(this .可见性==系统窗户。能见度。可见性){//超过计时器间隔时发生动画时间勾选=手柄动画勾选动画定时器start()；} } } ///摘要///设置圆的位置和旋转角度////摘要私有void seteclipse position(ProgressBarDataModel数据模型){//圆周长就是：C= * d或者C=2**r(其中d是圆的直径，r是圆的半径)double r=dataModel .r；var children=ProgressBarCanvas .儿童；int计数=子级。计数；两步=(数学* 2)/计数；//根据圆中正弦、余弦计算距离（同Internationalorganizations）国际组织索引=0;foreach(子代中的定义变量元素){ var椭圆=元素为椭圆；//透明度变化不透明度=转换.到double(index)/(count-1)；椭圆设置值(UIElement .OpacityProperty，opacity0.05？0.05:不透明度);//距离双左=r数学罪恶(步长*索引)* r；椭圆。设置值（画布左属性，左侧);双顶=r -数学.Cos(步长*索引)* r；椭圆。设置值（画布TopProperty，top)；指数；} } ///摘要////画布卸载时////summary////param name=' sender '/param///param name=' e '/param private void HandleUnloaded(对象发送者，routed eventargs e){ animationTimer .stop()；//除去委托动画定时器tick-=HandleAnimationTick；} ///摘要///超过计时器间隔时发生////summary////param name=' sender '/param///param name=' e '/param private void handleaniminek(对象发送者，EventArgs e) { //设置旋转角度旋转状态。角度=(旋转状态。角度步长角度)% 360;} #endregion}数据模型类：

///摘要///进度条模型类////摘要公共类ProgressBarDataModel { public double eclipse size { get；设置；}公共双拉票{ get设置；}公共双视图框大小{ get { double length=Convert .双击（拉票)-转换. ToDouble(重叠大小);返回长度；} } public double eclipse eleft length { get { double length=Convert .ToDouble(拉票)/2;返回长度；} }公共双R { get { double length=(Convert .双击（拉票)-转换.到两倍(月食大小))/2；返回长度；} }}3、取用控件

control : progressbarcontrol laclaize=' 100 ' EllipseCount=' 10 ' ellipsec大小=' 10 ' StepAngle=' 36 ' TimeSpan=' 60 '/以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。