WPF自定义进度条剪辑答案

【问题标题】：WPF custom progress bar clippingWPF自定义进度条剪辑
【发布时间】：2011-05-22 22:59:18
【问题描述】：

我创建了一个自定义进度条如下：

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

它工作得很好，但是当进度已满时，填充栏的右侧会被剪掉，这会删除我想要的舍入样式。我摆弄了填充、边距、最大宽度等，但我找不到防止剪裁的方法。

这是一张图片：

【问题讨论】：

标签： wpf progress-bar styles

【解决方案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>

【讨论】：

宾果游戏。谢谢！自定义这些控件并不是一个直观的过程。您是否知道任何有用的教程或文档来帮助解决这些问题？
对我来说，它总是反复试验（在 Kaxaml 中是为了速度）。您可以使用 Blend 来复制和更改样式，但整体造型是一个强大、出色但复杂的过程，因此即使这样也可能很尴尬。
+1 作为旁注...您实际上希望在新添加的边框上设置 Padding="3" 以获得他之前想要的感觉。
@Aaron - 如果您同时运行两种样式 padding=3 和 margin=3 会给出不同的结果。在我看来，padding=1 看起来最像预期的结果。