使用WPF怎么编写一个转圈进度条效果-创新互联

使用WPF怎么编写一个转圈进度条效果？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

创新互联长期为千余家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为博州企业提供专业的网站建设、成都网站建设，博州网站改版等技术服务。拥有10多年丰富建站经验和众多成功案例,为您定制开发。

1、控件界面


<UserControl x:Class="ProgressBarControl" 
       xmlns="/tupian/20230522/error.aspx
       xmlns:x="/tupian/20230522/error.aspx
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
       xmlns:d="/tupian/20230522/error.aspx
       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"/>

看完上述内容，你们掌握使用WPF怎么编写一个转圈进度条效果的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读！

分享名称：使用WPF怎么编写一个转圈进度条效果-创新互联
当前地址：https://www.cdcxhl.com/article48/dccihp.html

成都网站建设公司_创新互联，为您提供做网站、全网营销推广、网站改版、响应式网站、外贸网站建设、网站建设

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

h5响应式网站建设

网站设计知识

分类信息网站