请帮我写一个WPF 圆圈进度条
时间: 2023-10-09 20:14:18 浏览: 143
好的,以下是一个简单的 WPF 圆形进度条示例代码:
```xml
<Window x:Class="WpfApp1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Circular Progress Bar" Height="200" Width="200">
<Grid>
<Grid.Background>
<SolidColorBrush Color="#F8F8F8"/>
</Grid.Background>
<Ellipse x:Name="Circle" Height="100" Width="100" StrokeThickness="10" StrokeDashArray="0 300" Margin="10">
<Ellipse.Stroke>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#00C853" Offset="0"/>
<GradientStop Color="#1A237E" Offset="1"/>
</LinearGradientBrush>
</Ellipse.Stroke>
</Ellipse>
<TextBlock x:Name="PercentageText" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20" FontWeight="Bold"/>
</Grid>
</Window>
```
在上面的代码中,我们使用一个 `Ellipse` 元素作为圆形进度条的外框,使用 `StrokeDashArray` 属性来设置圆形进度条的长度和间隔,然后通过修改这个属性的值来改变圆形进度条的进度。同时,我们还使用了一个 `LinearGradientBrush` 来为圆形进度条设置渐变色填充。最后,我们使用一个 `TextBlock` 元素在圆形进度条的中心显示进度百分比。
接下来,我们需要在代码中动态修改 `StrokeDashArray` 属性的值来改变圆形进度条的进度。可以使用以下代码实现:
```csharp
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
// 设置定时器,每隔一段时间更新圆形进度条的进度
var timer = new DispatcherTimer();
timer.Interval = TimeSpan.FromMilliseconds(100);
timer.Tick += Timer_Tick;
timer.Start();
}
private void Timer_Tick(object sender, EventArgs e)
{
// 计算当前进度百分比
double percentage = (DateTime.Now.Second % 60) / 60.0;
// 更新圆形进度条的进度
var dashLength = Circle.StrokeDashArray.Sum();
var progress = percentage * dashLength;
Circle.StrokeDashArray = new DoubleCollection { progress, dashLength - progress };
// 更新进度百分比的显示
PercentageText.Text = $"{percentage:P0}";
}
}
```
上面的代码中,我们使用一个 `DispatcherTimer` 定时器来每隔一段时间更新圆形进度条的进度。在 `Tick` 事件中,我们计算当前的进度百分比,然后根据该百分比更新圆形进度条的 `StrokeDashArray` 属性,同时更新进度百分比的显示。这样,当我们运行程序时,就可以看到一个动态的圆形进度条了。
希望这个示例可以帮助你实现你想要的圆形进度条效果。
阅读全文