WPF實(shí)現(xiàn)轉(zhuǎn)圈進(jìn)度條效果
在設(shè)計(jì)界面時(shí),有時(shí)會遇到進(jìn)度條,本次講解WPF如何設(shè)計(jì)自定義的繞圈進(jìn)度條,直接上代碼:
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> <!--設(shè)置圓的顏色--> <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> /// 進(jìn)度條 /// </summary> public partial class ProgressBarControl : UserControl { //集成到按指定時(shí)間間隔和指定優(yōu)先級處理的 System.Windows.Threading.Dispatcher 隊(duì)列中的計(jì)時(shí)器。 private DispatcherTimer animationTimer; private ProgressBarDataModel _dataModel; private int index = 0; #region 構(gòu)造方法與加載 /// <summary> /// 構(gòu)造方法 /// </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); //指定時(shí)間間隔 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> /// 獲取或設(shè)置圓圈數(shù)量 /// 默認(rèn)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> /// 獲取或設(shè)置圓圈大小 /// 默認(rèn)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> /// 獲取或設(shè)置面板大小 /// 默認(rèn)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> /// 獲取或設(shè)置每次旋轉(zhuǎn)角度 /// 默認(rèn)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> /// 獲取或設(shè)置每次旋轉(zhuǎn)間隔時(shí)間(毫秒) /// 默認(rèn)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) { //設(shè)置設(shè)置圓的位置和旋轉(zhuǎn)角度 SetEclipsePosition(_dataModel); //DesignerProperties 提供用于與設(shè)計(jì)器進(jìn)行通信的附加屬性。 if (!DesignerProperties.GetIsInDesignMode(this)) { if (this.Visibility == System.Windows.Visibility.Visible) { //超過計(jì)時(shí)器間隔時(shí)發(fā)生。 animationTimer.Tick += HandleAnimationTick; animationTimer.Start(); } } } /// <summary> /// 設(shè)置圓的位置和旋轉(zhuǎn)角度 /// </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; //根據(jù)圓中正弦、余弦計(jì)算距離 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卸載時(shí) /// </summary> /// <param name="sender"></param> /// <param name="e"></param> private void HandleUnloaded(object sender, RoutedEventArgs e) { animationTimer.Stop(); //除去委托 animationTimer.Tick -= HandleAnimationTick; } /// <summary> /// 超過計(jì)時(shí)器間隔時(shí)發(fā)生。 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> private void HandleAnimationTick(object sender, EventArgs e) { //設(shè)置旋轉(zhuǎn)角度 SpinnerRotate.Angle = (SpinnerRotate.Angle + StepAngle) % 360; } #endregion }
數(shù)據(jù)Model類:
/// <summary> /// 進(jìn)度條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"/>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- WPF實(shí)現(xiàn)3D翻牌式倒計(jì)時(shí)特效
- WPF實(shí)現(xiàn)時(shí)鐘特效
- WPF實(shí)現(xiàn)文本描邊+外發(fā)光效果的示例代碼
- WPF實(shí)現(xiàn)動(dòng)畫效果
- WPF實(shí)現(xiàn)3D粒子波浪效果
- WPF實(shí)現(xiàn)平面三角形3D運(yùn)動(dòng)效果
- WPF實(shí)現(xiàn)文字粒子閃爍動(dòng)畫效果
- WPF實(shí)現(xiàn)3D立方體波浪墻效果
- WPF實(shí)現(xiàn)進(jìn)度條實(shí)時(shí)更新效果
- WPF實(shí)現(xiàn)流光動(dòng)畫特效
相關(guān)文章
SQL Server數(shù)據(jù)庫連接 Web.config如何配置
以下的文章主要描述的是Web.config正確配置SQL Server數(shù)據(jù)庫連接的實(shí)際擦步驟。我們以圖文結(jié)合的方式對其有個(gè)更好的說明,需要的朋友可以參考下2015-10-10關(guān)于.NET動(dòng)態(tài)代理的介紹和應(yīng)用簡介
關(guān)于.NET動(dòng)態(tài)代理的介紹和應(yīng)用簡介...2006-09-09asp.net基礎(chǔ)學(xué)習(xí)之控件的使用方法
這篇文章主要為大家詳細(xì)介紹了asp.net基礎(chǔ)學(xué)習(xí)之控件的使用方法,感興趣的小伙伴們可以參考一下2016-08-08ASP.NET Core 應(yīng)用程序中的靜態(tài)文件中間件的實(shí)現(xiàn)
這篇文章主要介紹了ASP.NET Core 應(yīng)用程序中的靜態(tài)文件中間件的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04AspNetPager分頁控件源代碼(Version 4.2)
AspNetPager分頁控件源代碼(Version 4.2)...2007-04-04.NET?Core實(shí)現(xiàn)簡單的Redis?Client框架
本文詳細(xì)講解了.NET?Core實(shí)現(xiàn)簡單的Redis?Client框架,文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-02-02VS2015 搭建Asp.net core開發(fā)環(huán)境的方法
最近想在vs2015體驗(yàn)下.net core,折騰了兩天終于把環(huán)境弄好了。下面這篇文章就給大家分享下我的搭建過程,有需要的朋友們可以參考學(xué)習(xí),下面來一起看看吧。2016-12-12