wpf 进度条样式右半径

ljo96ir5 于 2023-03-09 发布在其他

关注(0)|答案(3)|浏览(178)

我试图为进度条创建一个圆角模板，但在实现进度条的右侧时遇到了麻烦。
下面是我的模板：

<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）内部的进度条仍然是直的，并隐藏我的右半径：

我怎么能避免呢？

wpf

来源：https://stackoverflow.com/questions/24406224/progressbar-bar-style-right-radius

3条答案

按热度按时间

sd2nnvve1#

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

赞(0）回复(0）举报 2023-03-09

ct3nt3jp2#

在Nitin's Answer中，你需要将Border元素的名称从“PART_Track”和“PART_Indicator”分别改为“ProgressBarTrack”和“ProgressBarIndicator”，如果你不这样做，那么当边界值的宽度大于元素的宽度时，边界值可能会超出边界。

赞(0）回复(0）举报 2023-03-09

bqjvbblv3#

我刚刚找到了一个简单的解决方案，在Timothy Eichfeld的microsoft forum上使用<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>

只需将ProgressBar的宽度和高度与裁剪矩形的大小相匹配即可。

赞(0）回复(0）举报 2023-03-09

我来回答

wpf 进度条样式右半径

3条答案

相关问题

热门标签

最新问答