WPF之ProgressBar控件详解

文章目录

• • [1. ProgressBar控件简介](#1. ProgressBar控件简介)
  • [2. ProgressBar的基本属性和用法](#2. ProgressBar的基本属性和用法)
  • • [2.1 基本属性](#2.1 基本属性)
    • [2.2 基本用法](#2.2 基本用法)
    • [2.3 代码中修改进度](#2.3 代码中修改进度)
  • [3. 确定与不确定模式](#3. 确定与不确定模式)
  • • [3.1 确定模式（Determinate）](#3.1 确定模式（Determinate）)
    • [3.2 不确定模式（Indeterminate）](#3.2 不确定模式（Indeterminate）)
  • [4. 在多线程环境中更新ProgressBar](#4. 在多线程环境中更新ProgressBar)
  • • [4.1 使用Dispatcher](#4.1 使用Dispatcher)
    • [4.2 使用BackgroundWorker](#4.2 使用BackgroundWorker)
    • [4.3 使用Task和Progress<T>](#4.3 使用Task和Progress<T>)
  • [5. 自定义ProgressBar外观样式](#5. 自定义ProgressBar外观样式)
  • • [5.1 基本样式设置](#5.1 基本样式设置)
    • [5.2 使用样式资源](#5.2 使用样式资源)
    • [5.3 带文本的进度条](#5.3 带文本的进度条)
    • [5.4 动画效果](#5.4 动画效果)
  • [6. 使用MVVM模式与ProgressBar](#6. 使用MVVM模式与ProgressBar)
  • • [6.1 ViewModel示例](#6.1 ViewModel示例)
    • [6.2 XAML绑定](#6.2 XAML绑定)
  • [7. 实际应用案例](#7. 实际应用案例)
  • • [7.1 文件下载进度条](#7.1 文件下载进度条)
    • [7.2 批量处理进度显示](#7.2 批量处理进度显示)
    • [7.3 带动画的加载指示器](#7.3 带动画的加载指示器)
  • [8. 最佳实践](#8. 最佳实践)
  • • [8.1 性能考虑](#8.1 性能考虑)
    • [8.2 用户体验提示](#8.2 用户体验提示)
  • [9. 总结](#9. 总结)
  • [10. 学习资源](#10. 学习资源)

可以根据Github拉取示例程序运行
GitHub程序演示地址（点击直达）

也可以在本文资源中下载

1. ProgressBar控件简介

ProgressBar（进度条）是WPF中常用的用户界面控件，主要用于向用户展示操作的进度或者任务的完成情况。无论是文件下载、数据处理、长时间的计算操作，还是需要让用户了解当前进度的任何场景，ProgressBar都是理想的选择。

WPF中的ProgressBar控件提供了丰富的功能和高度的可定制性，它可以：

• 显示确定性进度（具体的百分比进度）
• 显示不确定性进度（无法预估完成时间的操作）
• 通过样式和模板完全自定义外观
• 支持动画和视觉效果
• 与MVVM模式无缝集成

本文将详细介绍ProgressBar控件的基本属性、使用方法、自定义样式以及在实际项目中的应用技巧。

2. ProgressBar的基本属性和用法

2.1 基本属性

ProgressBar控件继承自RangeBase类，因此拥有以下重要属性：

属性名	类型	描述
Minimum	double	进度条的最小值，默认为0
Maximum	double	进度条的最大值，默认为100
Value	double	当前进度值
IsIndeterminate	bool	是否为不确定模式，默认为false
Orientation	Orientation	进度条的方向（水平或垂直）
Foreground	Brush	进度条填充颜色
Background	Brush	进度条背景颜色

2.2 基本用法

下面是一个简单的ProgressBar控件XAML示例：

<ProgressBar Width="200" Height="20" 
             Minimum="0" 
             Maximum="100" 
             Value="75" 
             Foreground="Green"/>

这段代码创建了一个宽度为200，高度为20的进度条，最小值为0，最大值为100，当前值为75，填充颜色为绿色。

2.3 代码中修改进度

在C#代码中，可以通过设置Value属性来更新进度条的进度：

// 将进度设置为指定值
progressBar.Value = 50;

// 增加进度值
progressBar.Value += 10;

// 检查是否完成
if (progressBar.Value >= progressBar.Maximum)
{
    // 处理完成逻辑
}

3. 确定与不确定模式

ProgressBar控件有两种工作模式：确定模式和不确定模式。

3.1 确定模式（Determinate）

当您知道任务的总量并能够计算出完成百分比时，应该使用确定模式。在这种模式下，进度条会显示完成的比例。

<ProgressBar Width="200" Height="20" 
             Minimum="0" 
             Maximum="100" 
             Value="45" 
             IsIndeterminate="False"/>

3.2 不确定模式（Indeterminate）

当无法估计任务的完成时间或无法计算进度百分比时，应该使用不确定模式。在这种模式下，进度条会显示一个动画，表示任务正在进行中，但没有具体的完成百分比。

<ProgressBar Width="200" Height="20" 
             IsIndeterminate="True"/>

不确定模式下的进度条会显示一个来回移动的动画，让用户知道程序正在工作，但不显示具体的完成进度。

4. 在多线程环境中更新ProgressBar

在WPF应用程序中，UI元素（包括ProgressBar）只能在创建它们的线程上更新。当在后台线程执行长时间运行的任务时，需要使用特殊方法来更新UI上的ProgressBar。

4.1 使用Dispatcher

// 假设在后台线程中执行任务
void WorkerMethod()
{
    for (int i = 0; i <= 100; i++)
    {
        // 通过Dispatcher更新UI
        Dispatcher.Invoke(() =>
        {
            progressBar.Value = i;
        });
        
        // 模拟工作
        Thread.Sleep(100);
    }
}

4.2 使用BackgroundWorker

BackgroundWorker是一个更便捷的方式来实现后台处理并更新UI：

private void StartProcess()
{
    BackgroundWorker worker = new BackgroundWorker();
    worker.WorkerReportsProgress = true;
    worker.DoWork += Worker_DoWork;
    worker.ProgressChanged += Worker_ProgressChanged;
    worker.RunWorkerCompleted += Worker_RunWorkerCompleted;
    worker.RunWorkerAsync();
}

private void Worker_DoWork(object sender, DoWorkEventArgs e)
{
    for (int i = 0; i <= 100; i++)
    {
        // 执行耗时操作
        Thread.Sleep(100);
        
        // 报告进度
        (sender as BackgroundWorker).ReportProgress(i);
    }
}

private void Worker_ProgressChanged(object sender, ProgressChangedEventArgs e)
{
    // 更新进度条
    progressBar.Value = e.ProgressPercentage;
}

private void Worker_RunWorkerCompleted(object sender, RunWorkerCompletedEventArgs e)
{
    // 处理完成后的逻辑
    MessageBox.Show("处理完成！");
}

4.3 使用Task和Progress

在现代WPF应用程序中，推荐使用Task和IProgress来实现后台处理和进度报告：

private async void StartProcessAsync()
{
    // 创建进度报告器
    var progress = new Progress<int>(value => 
    {
        progressBar.Value = value;
    });
    
    // 异步执行任务
    await Task.Run(() => ProcessDataWithProgress(progress));
    
    MessageBox.Show("处理完成！");
}

private void ProcessDataWithProgress(IProgress<int> progress)
{
    for (int i = 0; i <= 100; i++)
    {
        // 执行耗时操作
        Thread.Sleep(100);
        
        // 报告进度
        progress.Report(i);
    }
}

5. 自定义ProgressBar外观样式

WPF的强大之处在于它提供了丰富的样式和模板定制能力，ProgressBar控件同样可以完全自定义外观。

5.1 基本样式设置

<ProgressBar Width="200" Height="20" 
             Value="75">
    <ProgressBar.Foreground>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
            <GradientStop Color="LightBlue" Offset="0"/>
            <GradientStop Color="Blue" Offset="1"/>
        </LinearGradientBrush>
    </ProgressBar.Foreground>
    <ProgressBar.Background>
        <SolidColorBrush Color="LightGray"/>
    </ProgressBar.Background>
</ProgressBar>

5.2 使用样式资源

<Window.Resources>
    <Style x:Key="CustomProgressBar" TargetType="ProgressBar">
        <Setter Property="Foreground" Value="Orange"/>
        <Setter Property="Background" Value="#EEEEEE"/>
        <Setter Property="Height" Value="10"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ProgressBar">
                    <Grid>
                        <Border Background="{TemplateBinding Background}"
                                BorderBrush="Gray"
                                BorderThickness="1"
                                CornerRadius="5"/>
                        <Border x:Name="PART_Indicator"
                                Background="{TemplateBinding Foreground}"
                                BorderBrush="DarkOrange"
                                BorderThickness="1"
                                CornerRadius="5"
                                HorizontalAlignment="Left"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

<!-- 使用自定义样式 -->
<ProgressBar Width="200" 
             Value="75" 
             Style="{StaticResource CustomProgressBar}"/>

5.3 带文本的进度条

WPF的ProgressBar默认不显示文本，但我们可以通过叠加控件来实现带有文本显示的进度条：

<Grid>
    <ProgressBar x:Name="progressBar" Width="200" Height="25" Value="45"/>
    <TextBlock Text="{Binding Value, ElementName=progressBar, StringFormat={}{0:0}%}"
               HorizontalAlignment="Center"
               VerticalAlignment="Center"/>
</Grid>

5.4 动画效果

可以添加动画效果使ProgressBar更具视觉吸引力：

<Style x:Key="AnimatedProgressBar" TargetType="ProgressBar">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ProgressBar">
                <Grid>
                    <Border Background="{TemplateBinding Background}"
                            BorderBrush="Gray"
                            BorderThickness="1"
                            CornerRadius="5"/>
                    <Border x:Name="PART_Indicator"
                            Background="{TemplateBinding Foreground}"
                            BorderThickness="0"
                            CornerRadius="5"
                            HorizontalAlignment="Left">
                        <Border.Effect>
                            <DropShadowEffect Color="Blue" ShadowDepth="0" BlurRadius="10"/>
                        </Border.Effect>
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <EventTrigger RoutedEvent="ProgressBar.ValueChanged">
            <BeginStoryboard>
                <Storyboard>
                    <ColorAnimation 
                        Storyboard.TargetProperty="(Border.Effect).(DropShadowEffect.Color)"
                        To="LightBlue" 
                        Duration="0:0:0.5" 
                        AutoReverse="True"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Style.Triggers>
</Style>

6. 使用MVVM模式与ProgressBar

在MVVM（Model-View-ViewModel）架构中，ProgressBar通常绑定到ViewModel中的属性，而不是直接在代码后台操作。

6.1 ViewModel示例

public class MainViewModel : INotifyPropertyChanged
{
    private double _progress;
    
    public double Progress
    {
        get { return _progress; }
        set
        {
            if (_progress != value)
            {
                _progress = value;
                OnPropertyChanged(nameof(Progress));
            }
        }
    }
    
    public ICommand StartProcessCommand { get; }
    
    public MainViewModel()
    {
        StartProcessCommand = new RelayCommand(ExecuteStartProcess);
    }
    
    private async void ExecuteStartProcess()
    {
        Progress = 0;
        
        for (int i = 0; i <= 100; i++)
        {
            await Task.Delay(100); // 模拟工作
            Progress = i;
        }
    }
    
    public event PropertyChangedEventHandler PropertyChanged;
    
    protected void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

6.2 XAML绑定

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApp"
        Title="ProgressBar Demo" Height="200" Width="400">
    
    <Window.DataContext>
        <local:MainViewModel/>
    </Window.DataContext>
    
    <StackPanel Margin="20">
        <ProgressBar Height="20" 
                     Minimum="0" 
                     Maximum="100" 
                     Value="{Binding Progress}"/>
        
        <TextBlock Text="{Binding Progress, StringFormat=进度: {0:0}%}"
                   Margin="0,10,0,10"/>
        
        <Button Content="开始处理" 
                Command="{Binding StartProcessCommand}" 
                Width="100" 
                HorizontalAlignment="Left"/>
    </StackPanel>
</Window>

7. 实际应用案例

7.1 文件下载进度条

private async void DownloadFile(string url, string destination)
{
    using (WebClient client = new WebClient())
    {
        client.DownloadProgressChanged += (sender, e) =>
        {
            progressBar.Value = e.ProgressPercentage;
            statusText.Text = $"下载进度: {e.ProgressPercentage}% - 已下载 {e.BytesReceived / 1024} KB / 共 {e.TotalBytesToReceive / 1024} KB";
        };
        
        client.DownloadFileCompleted += (sender, e) =>
        {
            if (e.Error == null)
                statusText.Text = "文件下载完成！";
            else
                statusText.Text = $"下载出错: {e.Error.Message}";
        };
        
        await client.DownloadFileTaskAsync(new Uri(url), destination);
    }
}

7.2 批量处理进度显示

private async Task ProcessFilesAsync(string[] files)
{
    progressBar.Minimum = 0;
    progressBar.Maximum = files.Length;
    progressBar.Value = 0;
    
    for (int i = 0; i < files.Length; i++)
    {
        statusText.Text = $"正在处理: {System.IO.Path.GetFileName(files[i])}";
        
        await Task.Run(() => ProcessSingleFile(files[i]));
        
        progressBar.Value = i + 1;
    }
    
    statusText.Text = "所有文件处理完成！";
}

private void ProcessSingleFile(string filePath)
{
    // 实际的文件处理逻辑
    Thread.Sleep(1000); // 模拟耗时操作
}

7.3 带动画的加载指示器

<Grid>
    <Grid.Resources>
        <Style x:Key="FancyProgressBar" TargetType="ProgressBar">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ProgressBar">
                        <Grid x:Name="TemplateRoot">
                            <Border Background="{TemplateBinding Background}" 
                                    BorderBrush="{TemplateBinding BorderBrush}" 
                                    BorderThickness="{TemplateBinding BorderThickness}"
                                    CornerRadius="10"/>
                            <Grid x:Name="PART_Track">
                                <Rectangle x:Name="PART_Indicator" 
                                           Fill="{TemplateBinding Foreground}" 
                                           HorizontalAlignment="Left" 
                                           RadiusX="10" 
                                           RadiusY="10"/>
                            </Grid>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsIndeterminate" Value="true">
                                <Setter TargetName="PART_Indicator" Property="Width" Value="30"/>
                                <Setter TargetName="PART_Indicator" Property="HorizontalAlignment" Value="Left"/>
                                <Trigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard RepeatBehavior="Forever">
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_Indicator" 
                                                                           Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
                                                <SplineDoubleKeyFrame KeyTime="0:0:0" Value="-30"/>
                                                <SplineDoubleKeyFrame KeyTime="0:0:1.5" Value="300"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.EnterActions>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Foreground" Value="#FF1BA1E2"/>
            <Setter Property="Background" Value="#FFE6E6E6"/>
            <Setter Property="BorderBrush" Value="#FFADADAD"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="MinHeight" Value="10"/>
        </Style>
    </Grid.Resources>
    
    <ProgressBar Style="{StaticResource FancyProgressBar}" 
                 IsIndeterminate="True" 
                 Height="20" 
                 Width="200"/>
</Grid>

8. 最佳实践

8.1 性能考虑

• 避免过于频繁地更新进度条，可以考虑每隔一定时间间隔更新一次
• 在处理大量数据时，可以考虑使用批处理更新进度
• 使用异步方法和Task而不是Thread可以更好地保持UI响应性

// 优化的进度更新
private async Task ProcessLargeDataAsync(List<DataItem> items)
{
    const int batchSize = 100; // 每100项更新一次进度
    int count = 0;
    
    foreach (var item in items)
    {
        await ProcessItemAsync(item);
        count++;
        
        if (count % batchSize == 0 || count == items.Count)
        {
            double progress = (double)count / items.Count * 100;
            progressBar.Value = progress;
            await Task.Delay(1); // 允许UI更新
        }
    }
}

8.2 用户体验提示

• 对于预计需要较长时间的操作，提供取消选项
• 添加文本反馈，让用户了解具体进度和剩余时间
• 对于已完成的进度条，考虑添加成功/失败的视觉提示

private async void StartLongOperation(CancellationTokenSource cts)
{
    try
    {
        DateTime startTime = DateTime.Now;
        int totalItems = 1000;
        
        for (int i = 0; i < totalItems; i++)
        {
            // 检查取消请求
            if (cts.Token.IsCancellationRequested)
            {
                statusText.Text = "操作已取消";
                return;
            }
            
            await Task.Delay(10, cts.Token);
            
            // 更新进度和时间估计
            double progress = (double)(i + 1) / totalItems;
            progressBar.Value = progress * 100;
            
            // 计算预估剩余时间
            if (i > 0)
            {
                TimeSpan elapsed = DateTime.Now - startTime;
                TimeSpan estimated = TimeSpan.FromTicks((long)(elapsed.Ticks / progress));
                TimeSpan remaining = estimated - elapsed;
                
                statusText.Text = $"进度: {progress:P0} - 预计剩余时间: {(int)remaining.TotalMinutes}分{remaining.Seconds}秒";
            }
        }
        
        // 成功完成
        progressBar.Foreground = Brushes.Green;
        statusText.Text = "操作成功完成";
    }
    catch (OperationCanceledException)
    {
        statusText.Text = "操作已取消";
    }
    catch (Exception ex)
    {
        // 处理失败
        progressBar.Foreground = Brushes.Red;
        statusText.Text = $"操作失败: {ex.Message}";
    }
}

9. 总结

ProgressBar是WPF应用程序中非常实用的控件，它能直观地向用户展示操作进度，提高用户体验。通过本文的学习，我们了解了：

• ProgressBar控件的基本属性和用法
• 确定模式和不确定模式的区别和应用场景
• 如何在多线程环境中正确更新ProgressBar
• 自定义ProgressBar外观的多种方法
• 在MVVM架构中使用ProgressBar的最佳实践
• 实际应用案例和优化技巧

通过掌握ProgressBar控件的使用，您可以大幅提升WPF应用程序的用户体验，让用户清楚了解操作的进度，减少等待过程中的不确定感。

10. 学习资源

• Microsoft WPF ProgressBar官方文档
• ProgressBar样式和模板指南
• WPF多线程编程指南
• WPF社区资源