开发者

WPF custom progress bar clipping

开发者 https://www.devze.com 2023-01-29 12:14 出处:网络
I\'ve created a custom progress bar as follows: <!-- Custom progress bar --> <Style 开发者_如何转开发 x:Key=\"CopyProgressBar\"

I've created a custom progress bar as follows:

<!-- 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>

Here's how it is used:

<ProgressBar
            x:Name="copyProgress"
            Height="13"
            Width="279"
            Canvas.Left="158"
            Canvas.Top="103"
            Minimum="0"
            Maximum="100"
            Style="{StaticResource CopyProgressBar}" />

It works quite well, but when the progress is full, the right side of the fill bar is clipped, which removes the rounding styling I'm going for. I've fiddled with padding, margins, max width, etc, but I can't find a way to prevent the clipping.

Here is an image:

WPF custom progress bar clipping


This was an interesting one to answer. I finally got it nailed down to being the margin that was causing the problem. The progress bar sets the width of PART_Indicator based on the width of PART_Track regardless of the margin or paddings that are set. The following style will get you the desired behaviour.

<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>
0

精彩评论

暂无评论...
验证码 换一张
取 消