进度条样式右半径

Question

我正在尝试为圆角的progressebar创建一个模板，但是我无法实现进度条的右侧。

这是我的模板：

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

看起来我想要：

但是当值达到100％时，（PART_Indicator）中的进度条仍然是直线并隐藏我的右半径：

我该如何避免？

Answer 1

在Part_Indicator上设置CornerRadius="4"

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

或者我将使用下面的Triggers：

       <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

添加到Nitin的答案中，您必须将Border元素的名称分别从“PART_Track”和“PART_Indicator”更改为“ProgressBarTrack”和“ProgressBarIndicator”。如果不这样做，如果绑定值的宽度大于元素，则绑定值可能超出范围。