WPF自定义进度条剪裁

Question

我已经创建了一个自定义进度条，如下所示：

<!-- 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}" />

这个功能运行得相当不错，但是当进度条填充到满时，填充条的右侧会被裁剪掉，这样就无法实现我想要的圆角效果。我尝试过调整内边距、外边距、最大宽度等方法，但是无法找到防止裁剪的方法。

这里有一张图片：

- BabaBooey

Answer 1

这个问题很有趣。我最终发现是边框引起了问题。进度条根据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>

- Leom Burke

---

太好了，谢谢！自定义这些控件并不是一件直观的过程。你知道有哪些有用的教程或文档可以帮助处理这些问题吗？ - BabaBooey

对我来说，使用Kaxaml进行速度测试总是试错。你可以使用Blend复制和修改样式，但整体的样式设计是一个强大、精彩但复杂的过程，所以即使这样做也可能会很棘手。 - Leom Burke

作为附带说明……在新添加的边框上设置Padding="3"，可以更好地还原原作者想要的效果。 - Aaron McIver

@Aaron - 如果你同时运行padding=3和margin=3，会得到不同的结果。在我看来，padding=1最接近预期结果。 - Leom Burke