WPF实现转圈进度条效果

技术  /  管理员 发布于 7年前   124

在设计界面时，有时会遇到进度条，本次讲解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="{Binding EclipseSize}"></Setter>        <Setter Property="Width" Value="{Binding EclipseSize}"></Setter>        <Setter Property="Stretch" Value="Fill"></Setter>        <!--设置圆的颜色-->        <Setter Property="Fill" Value="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、控件后台逻辑：

 控件后台：

/// <summary>  /// 进度条  /// </summary>  public partial class ProgressBarControl : UserControl  {    //集成到按指定时间间隔和指定优先级处理的 System.Windows.Threading.Dispatcher 队列中的计时器。    private DispatcherTimer animationTimer;    private ProgressBarDataModel _dataModel;    private int index = 0;    #region 构造方法与加载    /// <summary>    /// 构造方法    /// </summary>    public ProgressBarControl()    {      InitializeComponent();          }    /// <summary>    /// 加载后刷新    /// </summary>    /// <param name="sender"></param>    /// <param name="e"></param>    private void ProgressBarControl_OnLoaded(object sender, RoutedEventArgs e)    {      animationTimer = new DispatcherTimer(DispatcherPriority.ContextIdle, Dispatcher);      //指定时间间隔      animationTimer.Interval = new TimeSpan(0, 0, 0, 0, TimeSpan);      if (EllipseCount < 1)      {        EllipseCount = 12;      }      for (int i = 0; i < EllipseCount; i++)      {        ProgressBarCanvas.Children.Add(new Ellipse());      }      var dataModel = new ProgressBarDataModel()      {        CanvasSize = CanvasSize,        EclipseSize = EllipseSize      };      _dataModel = dataModel;      this.DataContext = dataModel;    }    #endregion    #region 属性    /// <summary>    /// 获取或设置圆圈数量    /// 默认12    /// </summary>    public double EllipseCount    {      get { return (double)GetValue(EllipseCountProperty); }      set { SetValue(EllipseCountProperty, value); }    }    public static readonly DependencyProperty EllipseCountProperty =      DependencyProperty.Register("EllipseCount", typeof(double), typeof(ProgressBarControl),      new FrameworkPropertyMetadata(10.0, FrameworkPropertyMetadataOptions.AffectsRender));    /// <summary>    /// 获取或设置圆圈大小    /// 默认10    /// </summary>    public double EllipseSize    {      get { return (double)GetValue(EllipseSizeProperty); }      set { SetValue(EllipseSizeProperty, value); }    }    public static readonly DependencyProperty EllipseSizeProperty =      DependencyProperty.Register("EllipseSize", typeof(double), typeof(ProgressBarControl),      new FrameworkPropertyMetadata(10.0, FrameworkPropertyMetadataOptions.AffectsRender));    /// <summary>    /// 获取或设置面板大小    /// 默认80    /// </summary>    public double CanvasSize    {      get { return (double)GetValue(CanvasSizeProperty); }      set { SetValue(CanvasSizeProperty, value); }    }    public static readonly DependencyProperty CanvasSizeProperty =      DependencyProperty.Register("CanvasSize", typeof(double), typeof(ProgressBarControl),      new FrameworkPropertyMetadata(80.0, FrameworkPropertyMetadataOptions.AffectsRender));    /// <summary>    /// 获取或设置每次旋转角度    /// 默认10.0    /// </summary>    public double StepAngle    {      get { return (double)GetValue(StepAngleProperty); }      set { SetValue(StepAngleProperty, value); }    }    public static readonly DependencyProperty StepAngleProperty =      DependencyProperty.Register("StepAngle", typeof(double), typeof(ProgressBarControl),      new FrameworkPropertyMetadata(10.0, FrameworkPropertyMetadataOptions.AffectsRender));    /// <summary>    /// 获取或设置每次旋转间隔时间（毫秒）    /// 默认100毫秒    /// </summary>    public int TimeSpan    {      get { return (int)GetValue(TimeSpanProperty); }      set { SetValue(TimeSpanProperty, value); }    }    public static readonly DependencyProperty TimeSpanProperty =      DependencyProperty.Register("TimeSpan", typeof(int), typeof(ProgressBarControl),      new FrameworkPropertyMetadata(100, FrameworkPropertyMetadataOptions.AffectsRender));        #endregion    #region 方法    /// <summary>    /// Canvas加载    /// </summary>    /// <param name="sender"></param>    /// <param name="e"></param>    private void HandleLoaded(object sender, RoutedEventArgs e)    {      //设置设置圆的位置和旋转角度      SetEclipsePosition(_dataModel);      //DesignerProperties  提供用于与设计器进行通信的附加属性。      if (!DesignerProperties.GetIsInDesignMode(this))      {        if (this.Visibility == System.Windows.Visibility.Visible)        {          //超过计时器间隔时发生。          animationTimer.Tick += HandleAnimationTick;          animationTimer.Start();        }      }    }    /// <summary>    /// 设置圆的位置和旋转角度    /// </summary>    private void SetEclipsePosition(ProgressBarDataModel dataModel)    {      //圆周长就是：C = π * d 或者C=2*π*r（其中d是圆的直径，r是圆的半径）      double r =dataModel.R;      var children=ProgressBarCanvas.Children;      int count = children.Count;      double step = (Math.PI * 2) / count;      //根据圆中正弦、余弦计算距离      int index = 0;      foreach (var element in children)      {        var ellipse = element as Ellipse;        //透明度        var opacity = Convert.ToDouble(index)/(count - 1);        ellipse.SetValue(UIElement.OpacityProperty, opacity<0.05?0.05:opacity);        //距离        double left = r + Math.Sin(step*index)*r;        ellipse.SetValue(Canvas.LeftProperty,left);        double top = r - Math.Cos(step*index)*r;        ellipse.SetValue(Canvas.TopProperty, top);        index++;      }    }    /// <summary>    /// Canvas卸载时    /// </summary>    /// <param name="sender"></param>    /// <param name="e"></param>    private void HandleUnloaded(object sender, RoutedEventArgs e)    {      animationTimer.Stop();      //除去委托      animationTimer.Tick -= HandleAnimationTick;    }    /// <summary>    /// 超过计时器间隔时发生。    /// </summary>    /// <param name="sender"></param>    /// <param name="e"></param>    private void HandleAnimationTick(object sender, EventArgs e)    {      //设置旋转角度      SpinnerRotate.Angle = (SpinnerRotate.Angle + StepAngle) % 360;    }    #endregion}

数据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="10" EllipseSize="10" StepAngle="36" TimeSpan="60"/>

 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。