progressbar bar style right radius

Question

I'm trying to create a template for my progressebar with round corners but I have trouble implementing the right side of my progressbar.

Here is my template :

<ProgressBar Name="blabla" Value="80" Maximum="100" Margin="95,282,113,0">
    <ProgressBar.Style>
        <Style TargetType="{x:Type ProgressBar}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ProgressBar}">
                        <Grid Height="10" MinWidth="50" Background="{TemplateBinding Background}">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Determinate" />
                                    <VisualState x:Name="Indeterminate">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Duration="00:00:00"
                                                                           Storyboard.TargetName="PART_Indicator"
                                                                           Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <SolidColorBrush>Transparent</SolidColorBrush>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>

                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border x:Name="PART_Track" CornerRadius="4" BorderThickness="1"
                                    BorderBrush="{DynamicResource CouleurForegroundProgressBar}">
                            </Border>

                            <Border CornerRadius="4,0,0,4" BorderThickness="1" x:Name="PART_Indicator"
                                    HorizontalAlignment="Left" Background="{DynamicResource CouleurForegroundProgressBar}"
                                    BorderBrush="{DynamicResource CouleurForegroundProgressBar}"
                                    Margin="0,0,0,0">                               
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="Foreground" Value="{DynamicResource CouleurForegroundProgressBar}" />
        </Style>
    </ProgressBar.Style>
</ProgressBar>

And it looks like I wanted :

But When the value reaches 100% the progression bar inside (PART_Indicator) is still straight and hide my right radius :

How can I avoid that ?

Answer 1

Set CornerRadius="4" on your Part_Indicator also

           <Border
              CornerRadius="4"
              BorderThickness="1"
              x:Name="PART_Indicator"
              HorizontalAlignment="Left"
              Background="Red"
              BorderBrush="Red"
              Margin="0,0,0,0">

OR I will use the Triggers like below:

       <Border BorderThickness="1"
              x:Name="PART_Indicator"
              HorizontalAlignment="Left"
              Background="Red"
              BorderBrush="Red"
              Margin="0,0,0,0">
                    <Border.Style>
                         <Style TargetType="Border">
                              <Setter Property="CornerRadius" Value="4,0,0,4"/>
                            <Style.Triggers>
                              <DataTrigger Binding="{Binding Path=Value, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ProgressBar}}}" Value="100">
                                 <Setter Property="CornerRadius" Value="4"/>
                               </DataTrigger>
                             </Style.Triggers>
                           </Style>
                    </Border.Style>
            </Border>

Answer 2

I just found a simple solution using <Clip> on a microsoft forum from Timothy Eichfeld.

This worked for me like this:

<ProgressBar x:Name="progressBar" IsIndeterminate="True" Width="300" Height="10" VerticalAlignment="Center" HorizontalAlignment="Center">
    <ProgressBar.Clip>
        <RectangleGeometry RadiusX="5" RadiusY="5" Rect="0,0,300,10"/>
    </ProgressBar.Clip>
</ProgressBar>

Just take care of ProgressBar width and height to match with clipping rectangle size.