水平进度条
1
2
3
4
5
6
| <ProgressBar Value="50"
Maximum="200"
Foreground="#339DFF"
Background="#EAF5FF"
BorderThickness="0">
</ProgressBar>
|
其中：
Foreground 设置的是进度的颜色。Background 设置的是背景的颜色。Value 进度的值，类型为double。Maximum 最大的值，类型为double。Orientation="Vertical"设置为垂直方向，默认为水平Orientation="Horizontal" 。
垂直进度条
1
2
3
4
5
6
7
| <ProgressBar Value="50"
Maximum="200"
Foreground="#339DFF"
Background="#EAF5FF"
BorderThickness="0"
Orientation="Vertical">
</ProgressBar>
|
设置圆角
自定义样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <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>
<Border x:Name="PART_Track"
Background="{TemplateBinding Background}"
CornerRadius="12" />
<Border x:Name="PART_Indicator"
HorizontalAlignment="Left"
Background="{TemplateBinding Foreground}"
CornerRadius="12">
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
|
使用
1
2
3
4
5
6
7
8
9
10
| <ProgressBar Value="50"
Maximum="200"
Margin="200"
Foreground="#339DFF"
Background="#EAF5FF"
Height="24"
Style="{StaticResource HorRoundedPbStyle}"
Orientation="Horizontal"
BorderThickness="0">
</ProgressBar>
|
效果
垂直进度条自定义
垂直进度条我们就没法向上面那样自定义样式了，原因是就算是垂直PART_Indicator也是宽度会变，高度不会。
所以我们使用自定义组件解决
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <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>
|
对应的代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
| namespace SchoolClient.UC
{
using System.Windows;
using System.Windows.Media;
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;
}
}
}
|
使用
1
2
3
4
5
6
7
| <uc:UcProgressBarVer
Width="24"
Height="100"
BarBackground="#EAF5FF"
Foreground="#339DFF"
MaxNum="200"
Num="50" />
|
注意
计算高度的时候要用RenderSize.Height，直接使用Height会导致组件自适应的高度的时候，获取不到实际的高度。
在绑定外层的值的时候建议外面套一个布局，否则的话绑定值的时候会在组件内找。
1
2
3
4
5
6
7
8
| <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