WPF ProgressBar tick marks

Question

How do I style the ProgressBar to use the old fashioned tick marks? There is this question, but it is WinForms.

Answer 1

I hope the following style is a good starting point. I leave it to you to style the green ticks (the Background of the first Rectangle of the VisualBrush).

    <Style TargetType="{x:Type ProgressBar}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ProgressBar}">
                    <Grid>
                        <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>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="PART_GlowRect" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
                                            <EasingColorKeyFrame KeyTime="0" Value="#00FFFFFF" />
                                        </ColorAnimationUsingKeyFrames>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetName="PART_GlowRect" Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[3].(GradientStop.Color)">
                                            <EasingColorKeyFrame KeyTime="0" Value="#00FFFFFF" />
                                        </ColorAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="PART_Track"
                                Background="White"
                                BorderBrush="#FFDEDEDE"
                                BorderThickness="2"
                                ClipToBounds="True"
                                CornerRadius="3">
                            <Border x:Name="PART_Indicator"
                                    Margin="4"
                                    HorizontalAlignment="Left"
                                    BorderThickness="0"
                                    CornerRadius="0">
                                <Border.Background>
                                    <VisualBrush Stretch="None"
                                                 TileMode="Tile"
                                                 Viewbox="0,0,1.,1"
                                                 ViewboxUnits="RelativeToBoundingBox"
                                                 Viewport="0,0,30,30"
                                                 ViewportUnits="Absolute">
                                        <VisualBrush.Visual>
                                            <StackPanel Orientation="Horizontal">
                                                <Rectangle Width="30"
                                                           Height="30"
                                                           Fill="#FF23FF00" />
                                                <Rectangle Width="10"
                                                           Height="30"
                                                           Fill="Transparent" />
                                            </StackPanel>
                                        </VisualBrush.Visual>
                                    </VisualBrush>
                                </Border.Background>

                                <Grid x:Name="Animation" ClipToBounds="True">
                                    <Border x:Name="PART_GlowRect"
                                            Width="100"
                                            Margin="-100,0,0,0"
                                            HorizontalAlignment="Left"
                                            VerticalAlignment="Stretch"
                                            CornerRadius="0">
                                        <Border.Background>
                                            <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                                                <GradientStop Offset="0" Color="#00E8DF2E" />
                                                <GradientStop Offset="0.4" Color="#FF38E41D" />
                                                <GradientStop Offset="0.6" Color="#FF38E41D" />
                                                <GradientStop Offset="1" Color="#00E8DF2E" />
                                            </LinearGradientBrush>
                                        </Border.Background>
                                    </Border>
                                </Grid>
                            </Border>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>