WPF實(shí)現(xiàn)轉(zhuǎn)圈進(jìn)度條效果
更新時(shí)間：2018年05月25日 17:15:46 作者：唐宋元明清2188
這篇文章主要為大家詳細(xì)介紹了WPF實(shí)現(xiàn)轉(zhuǎn)圈進(jìn)度條效果，如何設(shè)計(jì)自定義的繞圈進(jìn)度條，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
在設(shè)計(jì)界面時(shí)，有時(shí)會(huì)遇到進(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、控件后臺(tái)邏輯：
控件后臺(tái)：
/// <summary>
/// 進(jìn)度條
/// </summary>
public partial class ProgressBarControl : UserControl
{
//集成到按指定時(shí)間間隔和指定優(yōu)先級(jí)處理的 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)文章
解決 .NET Core 中 GetHostAddressesAsync 引起的 EnyimMemcached 死鎖問題
這篇文章主要介紹了解決 .NET Core 中 GetHostAddressesAsync 引起的 EnyimMemcached 死鎖問題的相關(guān)資料,需要的朋友可以參考下2016-09-09
.net 單點(diǎn)登錄的設(shè)計(jì)與實(shí)踐
本篇文章主要介紹了解析.net 單點(diǎn)登錄實(shí)踐，具有一定的參考價(jià)值，有需要的可以了解一下。2016-11-11
C# 實(shí)現(xiàn)抓取網(wǎng)站頁面內(nèi)容的實(shí)例方法
這篇文章介紹了C# 實(shí)現(xiàn)抓取網(wǎng)站頁面內(nèi)容的實(shí)例方法，有需要的朋友可以參考一下2013-08-08
MVC是一種架構(gòu)設(shè)計(jì)模式，該模式主要應(yīng)用于圖形化用戶界面(GUI)應(yīng)用程序。那么什么是MVC？MVC由三部分組成：Model（模型）、View（視圖）及Controller（控制器）2014-03-03
C# POP3獲取郵件的代碼 包括正文和附件，需要的朋友可以參考下。2010-03-03
.NET Core 微信小程序退款步驟——（統(tǒng)一退款）
這篇文章主要介紹了.NET Core 微信小程序退款步驟——（統(tǒng)一退款）,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-09-09
.NET程序性能監(jiān)控系統(tǒng)Elastic?AMP的使用方法
這篇文章介紹了.NET程序性能監(jiān)控系統(tǒng)Elastic?AMP的使用方法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-11-11
asp.net2.0如何加密數(shù)據(jù)庫聯(lián)接字符串
asp.net2.0如何加密數(shù)據(jù)庫聯(lián)接字符串...2006-09-09
使用谷歌搜索引擎的用戶都知道，只要在文本框中輸入部分關(guān)鍵字，就能顯示相關(guān)搜索提示信息列表2012-06-06
獲取遠(yuǎn)程網(wǎng)頁的內(nèi)容之一（downmoon原創(chuàng)）
獲取遠(yuǎn)程網(wǎng)頁的內(nèi)容之一（downmoon原創(chuàng)）...2007-03-03