WPF如何自定义ProgressBar滚动条样式

下面是" WPF如何自定义ProgressBar滚动条样式"的完整攻略。

1. 了解ProgressBar控件

在WPF中，ProgressBar控件常用于展示进度条，可以在控件中设置Value属性来表示进度的大小。而滚动条的显示效果是ProgressBar样式的一种形式，因此，我们可以通过自定义ProgressBar的样式来实现滚动条的效果。

2. 新建自定义样式

将ProgressBar的样式从默认样式改成自定义样式的一般过程是：

1. 将默认控件模板赋值到自定义控件样式中。
2. 在自定义控件样式中查找模板中需要自定义的控件元素。
3. 根据自己的需要修改控件元素的样式属性。

示例1：

我们先来看一个自定义样式的例子。这个样式中自定义了ProgressBar的背景色、前景色、粗细和动画。

<Window.Resources>
    <Style TargetType="{x:Type ProgressBar}" x:Key="MyProgressBarStyle">
        <Style.Resources>
            <!--定义背景Brush，这里为了演示就定义了一个简单的静态Brush-->
            <SolidColorBrush x:Key="progressBarBackground" Color="LightGray"/>
            <!--定义前景Brush，这里为了演示就定义了一个简单的静态Brush-->
            <SolidColorBrush x:Key="progressBarForeground" Color="Red"/>
        </Style.Resources>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ProgressBar}">
                    <Grid x:Name="TemplateRoot" ClipToBounds="true" Background="{StaticResource progressBarBackground}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Border x:Name="PART_Track" 
                                Background="{TemplateBinding Background}" 
                                BorderBrush="{TemplateBinding BorderBrush}" 
                                BorderThickness="{TemplateBinding BorderThickness}" 
                                CornerRadius="2"/>
                        <Border x:Name="PART_Indicator" 
                                Background="{StaticResource progressBarForeground}" 
                                BorderBrush="{TemplateBinding BorderBrush}" 
                                BorderThickness="{TemplateBinding BorderThickness}" 
                                CornerRadius="2">
                            <Grid x:Name="Animation" ClipToBounds="True" HorizontalAlignment="Left">
                                <Rectangle x:Name="PART_Animation" Fill="{StaticResource progressBarForeground}" Height="6" Margin="-210,0,0,0" RadiusX="2" RadiusY="2" VerticalAlignment="Center" Width="50"/>
                                <Rectangle x:Name="PART_Animation2" Fill="{StaticResource progressBarForeground}" Height="6" Margin="-160,0,0,0" RadiusX="2" RadiusY="2" VerticalAlignment="Center" Width="50"/>
                                <Rectangle x:Name="PART_Animation3" Fill="{StaticResource progressBarForeground}" Height="6" Margin="-110,0,0,0" RadiusX="2" RadiusY="2" VerticalAlignment="Center" Width="50"/>
                                <Rectangle x:Name="PART_Animation4" Fill="{StaticResource progressBarForeground}" Height="6" Margin="-60,0,0,0" RadiusX="2" RadiusY="2" VerticalAlignment="Center" Width="50"/>
                                <Rectangle x:Name="PART_Animation5" Fill="{StaticResource progressBarForeground}" Height="6" Margin="-10,0,0,0" RadiusX="2" RadiusY="2" VerticalAlignment="Center" Width="50"/>
                                <Rectangle x:Name="PART_Animation6" Fill="{StaticResource progressBarForeground}" Height="6" Margin="40,0,0,0" RadiusX="2" RadiusY="2" VerticalAlignment="Center" Width="50"/>
                            </Grid>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsIndeterminate" Value="true">
                            <Setter Property="Visibility" TargetName="PART_Animation" Value="Collapsed"/>
                            <Setter Property="Visibility" TargetName="PART_Animation2" Value="Collapsed"/>
                            <Setter Property="Visibility" TargetName="PART_Animation3" Value="Collapsed"/>
                            <Setter Property="Visibility" TargetName="PART_Animation4" Value="Collapsed"/>
                            <Setter Property="Visibility" TargetName="PART_Animation5" Value="Collapsed"/>
                            <Setter Property="Visibility" TargetName="PART_Animation6" Value="Collapsed"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

3. 应用自定义样式

将ProgressBar控件的样式指定为我们自定义的样式即可。

示例2：

我们使用自定义样式升级了WPF默认的进度条样式。

<Window x:Class="ProgressBarStyleDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:ProgressBarStyleDemo"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <ProgressBar HorizontalAlignment="Left" Height="33" Margin="210,181,0,0" VerticalAlignment="Top" Width="346"
                     Style="{StaticResource MyProgressBarStyle}" Maximum="100" Value="20"/>
    </Grid>
</Window>

以上就是自定义ProgressBar滚动条样式的完整攻略，希望对您有所帮助。