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

Nathan Sokalski 4,106 Reputation points
2020-04-02T17:46:05.76+00:00

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.

Universal Windows Platform (UWP)
{count} votes

1 answer

Sort by: Most helpful
  1. Fay Wang - MSFT 5,221 Reputation points
    2020-04-03T02:43:27.86+00:00

    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>
    
    0 comments No comments

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.