How do I Customize the Ticks in a Slider's Tickbar?

Question

I am working on customizing a Slider using it's ControlTemplate. One component of the ControlTemplate is the Tickbar(s). According to the information I found, the ticks are always 1 pixel wide. This makes the tick marks very hard to see, so I would like to make them wider? Setting the Width property of the Tickbar does not work for this. Is there any kind of Template for the ticks (like there is for the Thumb)? I would also like to display the value of each tick above or below the tick. Is there any way to do this (preferably in XAML)? Thanks.

Answer 1

Hello,

Welcome to Microsoft Q&A!

There is no default style for Tickbar, it is designed internally. So if you want to make them wider and display the value of each tick above or below the tick, you can customize it. For example, you can add a GridView which contains a Rectangle and TextBlock above or below Slider, based on the Minimum, Maximum and TickFrequency you want to set to calculate how many GridViewItems you need to add and the Width of each GridViewItem. You can refer to the following simple example.

.xaml:

<StackPanel>
    <GridView ItemsSource="{x:Bind lists,Mode=OneWay}" HorizontalAlignment="Left" Margin="4,0,4,0">
        <GridView.ItemContainerStyle>
            <Style TargetType="GridViewItem">
                <Setter Property="Margin" Value="0,0,0,0"/>
            </Style>
        </GridView.ItemContainerStyle>
        <GridView.ItemTemplate>
            <DataTemplate>
                <StackPanel Width="70" Background="Transparent">
                    <TextBlock HorizontalAlignment="Left">0.1</TextBlock>
                    <Rectangle Fill="Red" Width="3" Height="5" HorizontalAlignment="Left" ></Rectangle>
                </StackPanel>
            </DataTemplate>
        </GridView.ItemTemplate>
    </GridView>

    <Slider  Width="428"
    HorizontalAlignment="Left"
    VerticalAlignment="Stretch"
    Minimum="0"
    Maximum="3" TickFrequency=".5" TickPlacement="None" Margin="0,-35,0,0"
    >
   </Slider>
</StackPanel>