WPF桌面端开发1-常用组件之ProgressBar(进度条)、自定义组件-垂直进度条

水平进度条

<ProgressBar Value="50"
             Maximum="200"
             Foreground="#339DFF"
             Background="#EAF5FF"
             BorderThickness="0">
</ProgressBar>

其中：

• Foreground 设置的是进度的颜色。
• Background 设置的是背景的颜色。
• Value 进度的值，类型为double。
• Maximum 最大的值，类型为double。
• Orientation="Vertical"设置为垂直方向，默认为水平Orientation="Horizontal" 。

垂直进度条

<ProgressBar Value="50"
             Maximum="200"
             Foreground="#339DFF"
             Background="#EAF5FF"
             BorderThickness="0"
             Orientation="Vertical">
</ProgressBar>

设置圆角

自定义样式

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style x:Key="HorRoundedPbStyle"
           TargetType="{x:Type ProgressBar}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ProgressBar}">
                    <Grid>
                        <!-- Background Track -->
                        <Border x:Name="PART_Track"
                                Background="{TemplateBinding Background}"
                                CornerRadius="12" />
                        <!-- Actual Progress Indicator -->
                        <Border x:Name="PART_Indicator"
                                HorizontalAlignment="Left"
                                Background="{TemplateBinding Foreground}"
                                CornerRadius="12">
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

使用

<ProgressBar Value="50"
             Maximum="200"
             Margin="200"
             Foreground="#339DFF"
             Background="#EAF5FF"
             Height="24"
             Style="{StaticResource HorRoundedPbStyle}"
             Orientation="Horizontal"
             BorderThickness="0">
</ProgressBar>

效果

垂直进度条自定义

垂直进度条我们就没法向上面那样自定义样式了，原因是就算是垂直PART_Indicator也是宽度会变，高度不会。

所以我们使用自定义组件解决

<UserControl
    x:Class="SchoolClient.UC.UcProgressBarVer"
    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:local="clr-namespace:SchoolClient.UC"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Grid Name="OuterGrid" Background="Transparent">
        <Border Background="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type local:UcProgressBarVer}}, Path=BarBackground}" />

        <Border
            Height="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type local:UcProgressBarVer}}, Path=BarHeight}"
            VerticalAlignment="Bottom"
            Background="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type local:UcProgressBarVer}}, Path=Foreground}"
            CornerRadius="12 12 0 0" />
    </Grid>
</UserControl>

对应的代码

namespace SchoolClient.UC
{
    using System.Windows;
    using System.Windows.Media;

    /// <summary>
    /// UcProgressBarVer.xaml 的交互逻辑
    /// </summary>
    public partial class UcProgressBarVer
    {
        public static readonly DependencyProperty BarBackgroundProperty = DependencyProperty.Register(
            nameof(BarBackground),
            typeof(Brush),
            typeof(UcProgressBarVer),
            new PropertyMetadata()
        );

        public Brush BarBackground
        {
            get => (Brush)GetValue(BarBackgroundProperty);
            set => SetValue(BarBackgroundProperty, value);
        }

        public static readonly DependencyProperty MaxNumProperty = DependencyProperty.Register(
            nameof(MaxNum),
            typeof(double),
            typeof(UcProgressBarVer),
            new PropertyMetadata(0d)
        );

        public double MaxNum
        {
            get => (double)GetValue(MaxNumProperty);
            set => SetValue(MaxNumProperty, value);
        }

        public static readonly DependencyProperty NumProperty = DependencyProperty.Register(
            nameof(Num),
            typeof(double),
            typeof(UcProgressBarVer),
            new PropertyMetadata(0d)
        );

        public double Num
        {
            get => (double)GetValue(NumProperty);
            set => SetValue(NumProperty, value);
        }

        public static readonly DependencyProperty BarHeightProperty = DependencyProperty.Register(
            nameof(BarHeight),
            typeof(double),
            typeof(UcProgressBarVer),
            new PropertyMetadata(0d)
        );

        public double BarHeight
        {
            get => (double)GetValue(BarHeightProperty);
            set => SetValue(BarHeightProperty, value);
        }

        public UcProgressBarVer()
        {
            InitializeComponent();
            DataContext = this;
        }

        protected override void OnRenderSizeChanged(SizeChangedInfo sizeInfo)
        {
            base.OnRenderSizeChanged(sizeInfo);
            BarHeight = RenderSize.Height * Num / MaxNum;
        }
    }
}

使用

<uc:UcProgressBarVer
    Width="24"
    Height="100"
    BarBackground="#EAF5FF"
    Foreground="#339DFF"
    MaxNum="200"
    Num="50" />

注意

计算高度的时候要用RenderSize.Height，直接使用Height会导致组件自适应的高度的时候，获取不到实际的高度。

在绑定外层的值的时候建议外面套一个布局，否则的话绑定值的时候会在组件内找。

<Border Name="OuterBorder">
    <uc:UcProgressBarVer
        Width="40"
        BarBackground="#f0f0f0"
        Foreground="{Binding DataContext.BarColor, ElementName=OuterBorder}"
        MaxNum="{Binding DataContext.maxNum, ElementName=OuterBorder}"
        Num="{Binding DataContext.count, ElementName=OuterBorder}" />
</Border>

绑定属性查找的机制

参看文章：

https://www.psvmc.cn/article/2023-06-29-wpf-binding.html