我创建了一个自定义进度条,如下所示:
<!-- Custom progress bar -->
<Style
x:Key="CopyProgressBar"
TargetType="ProgressBar">
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="ProgressBar">
<Grid>
<Border
x:Name="PART_Track"
CornerRadius="5"
BorderBrush="#BBC6C4"
BorderThickness="2" />
<Rectangle
x:Name="PART_Indicator"
Fill="#A5B2B0"
RadiusX="5"
RadiusY="5"
Margin="3"
HorizontalAlignment="Left" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
以下是它的使用方法:
<ProgressBar
x:Name="copyProgress"
Height="13"
Width="279"
Canvas.Left="158"
Canvas.Top="103"
Minimum="0"
Maximum="100"
Style="{StaticResource CopyProgressBar}" />
效果很好,但是当进度已满时,填充条的右侧会被剪裁,从而消除了我想要的圆角样式。我已经摆弄了填充,边距,最大宽度等,但我找不到防止裁剪的方法。
这是一张图片:
答案 0 :(得分:8)
这是一个有趣的答案。我终于把它钉在了导致问题的边缘上。进度条根据PART_Track的宽度设置PART_Indicator的宽度,而不管设置的边距或填充。以下样式将为您提供所需的行为。
<Style x:Key="CopyProgressBar" TargetType="ProgressBar">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ProgressBar">
<Border BorderBrush="#BBC6C4" BorderThickness="1" CornerRadius="5" Padding="1">
<Grid x:Name="PART_Track" >
<Rectangle x:Name="PART_Indicator" HorizontalAlignment="Left" Fill="#A5B2B0" RadiusX="5" RadiusY="5"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>