首页 > 代码库 > WPF 自定义绕圈进度条（转）
WPF 自定义绕圈进度条（转）
在设计界面时，有时会遇到进度条，本次讲解如何设计自定义的绕圈进度条，直接上代码：
1、控件界面
<UserControl x:Class="ProgressBarControl" 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" mc:Ignorable="d" d:DesignHeight="200" d:DesignWidth="300" Background="Gray" Loaded="ProgressBarControl_OnLoaded"> <Grid> <Grid.Resources> <Style TargetType="Ellipse"> <Setter Property="Height" Value="http://www.mamicode.com/{Binding EclipseSize}"></Setter> <Setter Property="Width" Value="http://www.mamicode.com/{Binding EclipseSize}"></Setter> <Setter Property="Stretch" Value="http://www.mamicode.com/Fill"></Setter> <!--设置圆的颜色--> <Setter Property="Fill" Value="http://www.mamicode.com/White"></Setter> </Style> </Grid.Resources> <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center"> <Viewbox Width="{Binding ViewBoxSize}" Height="{Binding ViewBoxSize}" HorizontalAlignment="Center" VerticalAlignment="Center"> <Grid x:Name="LayoutRoot" Background="Transparent" HorizontalAlignment="Center" VerticalAlignment="Center"> <!--此处有canvas的加载和卸载事件--> <Canvas x:Name="ProgressBarCanvas" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Center" VerticalAlignment="Center" Width="{Binding CanvasSize}" Height="{Binding CanvasSize}" Loaded="HandleLoaded" Unloaded="HandleUnloaded" > <!--画圆--> <Canvas.RenderTransform> <RotateTransform x:Name="SpinnerRotate" Angle="0" /> </Canvas.RenderTransform> </Canvas> </Grid> </Viewbox> </StackPanel> </Grid></UserControl>
2、控件后台逻辑：
控件后台：
View Code数据Model类：
/// <summary> /// 进度条Model类 /// </summary> public class ProgressBarDataModel { public double EclipseSize { get; set; } public double CanvasSize { get; set; } public double ViewBoxSize { get { double length = Convert.ToDouble(CanvasSize) - Convert.ToDouble(EclipseSize); return length; } } public double EclipseLeftLength { get { double length = Convert.ToDouble(CanvasSize) / 2; return length; } } public double R { get { double length = (Convert.ToDouble(CanvasSize) - Convert.ToDouble(EclipseSize)) / 2; return length; } } }
3、取用控件
<control:ProgressBarControl CanvasSize="100" EllipseCount="9" EllipseSize="10" StepAngle="10" TimeSpan="200"></control:ProgressBarControl>
WPF 自定义绕圈进度条（转）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。