WPF Custom Progress Bar

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

This works very well, but when the progress is complete, the right side of the fill bar is trimmed, which eliminates the rounding style I'm going to. I was looking for registration, margins, maximum width, etc., but I can’t find a way to prevent clipping.

Here is the image:

alt text

+3
source share
1 answer

. , , , , . PART_Indicator PART_Track, paddings. .

<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>
+8

Source: https://habr.com/ru/post/1779430/


All Articles