如何在ProgressBar的进度行末尾添加一个简单的形状指示器?

时间:2017-09-04 20:33:52

标签: wpf xaml

最近我不得不根据设计师给我的风格指南重新设计我的WPF应用程序。我的一个新要求是更改ProgressBar的外观。

大多数变化都相当简单,但是我很难搞清楚如何在进度线的末尾添加一个简单的形状。
尝试在进度条的最右边绘制一个形状。相反,如果进度表为50%,我想在50%点绘制一个圆,依此类推。下面是我试图完成的示例图片。

请注意,我已为Slider控制做了类似的事情。然而,它似乎是一个非常不同的野兽。感谢您的指导。

Updated ProgressBar

1 个答案:

答案 0 :(得分:2)

这样的事情对我有用

<Style TargetType="{x:Type ProgressBar}">
            <Setter Property="BorderBrush" Value="#235b92" />
            <Setter Property="Foreground" Value="#235b92" />
            <Setter Property="BorderThickness" Value="2" />
            <Setter Property="Background" Value="#e8f0f7" />

            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ProgressBar}">
                        <Grid Background="{TemplateBinding Background}"
                                  Margin="10,5">
                            <Border x:Name="PART_Track"
                                    BorderThickness="2"
                                    BorderBrush="{TemplateBinding BorderBrush}" />
                            <Border x:Name="PART_Indicator"
                                    HorizontalAlignment="Left"
                                    Background="{TemplateBinding Foreground}">
                                <Ellipse Fill="#06e5ed" HorizontalAlignment="Right" VerticalAlignment="Center" Width="20" Height="20" Margin="-10,-5"/>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

该代码为我产生以下结果: Progress result

红色虚线区域只是突出显示的PART_Indicator控件