WPF 实现圆形进度条

发布网友 发布时间：2024-10-23 22:52

我来回答

共1个回答

热心网友 时间：2024-11-01 06:39

要实现一个圆形进度条在WPF中，可以使用名为CircularProgressBar的控件。下面分别介绍CircularProgressBar控件的XAML代码、代码实现、以及两个辅助类的代码。

首先，打开或创建名为CircularProgressBar.xaml的文件，粘贴以下代码来定义控件的外观和基本行为：

xml
<Control x:Class="CircularProgressBarExample.CircularProgressBar"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<Ellipse Fill="Gray" Stroke="Black" StrokeThickness="1" Width="100" Height="100"
Name="progressRing"/>
<TextBlock Grid.Row="1" Text="{Binding CurrentValue}" HorizontalAlignment="Center"
VerticalAlignment="Center"/>

接下来，创建CircularProgressBar.xaml.cs文件，添加以下代码来实现进度条的逻辑：

csharp
public partial class CircularProgressBar : UserControl
{
public CircularProgressBar()
{
InitializeComponent();
}

public double CurrentValue
{
get => (double)GetValue(CurrentValueProperty);
set => SetValue(CurrentValueProperty, value);
}

public static readonly DependencyProperty CurrentValueProperty =
DependencyProperty.Register("CurrentValue", typeof(double), typeof(CircularProgressBar), new PropertyMetadata(0.0, OnCurrentValueChanged));

private static void OnCurrentValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var control = d as CircularProgressBar;
if (control != null)
{
control.UpdateProgress();
}
}

private void UpdateProgress()
{
var progressRing = (Ellipse)FindResource("progressRing");
var radius = progressRing.Width / 2;
var angle = (360 - (2 * Math.Asin(radius * CurrentValue / radius)));
var x = radius * Math.Cos(Math.PI * angle / 180);
var y = radius * Math.Sin(Math.PI * angle / 180);
var point = new Point(x, y);
((AngleToPointConverter)progressRing.GetValue(Canvas.LeftProperty.Converter)).Convert(point, typeof(double));
}
}

为了使进度条看起来更自然，还需要创建两个辅助类AngleToPointConverter和AngleToIsLargeConverter。AngleToPointConverter用于将角度转换为实际的点坐标，而AngleToIsLargeConverter则判断进度条是否已经到达最大值。

在CircularMenuExample.xaml中，可以使用CircularProgressBar控件来展示。只需将CircularProgressBar控件拖入到XAML文件中，并根据需要调整属性即可。

通过以上步骤，即可实现一个简单的圆形进度条。可根据实际需求调整样式和逻辑，以满足不同场景下的使用。