进度条样式右侧圆角化

Question

我希望为我的圆角进度条创建一个模板，但是我在实现进度条的右侧时遇到了困难。

这是我的模板：

<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）仍然是直线，并且隐藏了我的右半径：

我该如何避免这种情况？

- user2088807

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

或者我将使用以下方式触发器：

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

- Nitin

---

但是如果我输入4，我将失去指示器的直边，这正是我想要的。 - user2088807

我已经采纳了您的建议：http://hpics.li/4ac6ca9 但我想让我的指标右侧与第一张图片中的相同。 - user2088807

当进度条为不确定状态时，指示器仍然在两侧呈矩形。 - geer

Answer 2

我在 Timothy Eichfeld 的 microsoft 论坛 上找到了一个简单的解决方案，使用 <Clip>。

这对我来说很有效：

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

只需确保进度条的宽度和高度与裁剪矩形大小匹配。

- geer

Answer 3

除了Nitin的回答之外，您还需要将边框元素的名称从“PART_Track”和“PART_Indicator”更改为“ProgressBarTrack”和“ProgressBarIndicator”。如果不这样做，如果其宽度大于元素，则绑定值可能会超出范围。

- Sukera