WPF自定义进度栏剪辑

时间:2010-12-09 15:50:39

标签: wpf progress-bar styles

我创建了一个自定义进度条,如下所示:

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

效果很好,但是当进度已满时,填充条的右侧会被剪裁,从而消除了我想要的圆角样式。我已经摆弄了填充,边距,最大宽度等,但我找不到防止裁剪的方法。

这是一张图片:

alt text

1 个答案:

答案 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>