question

njsokalski avatar image
0 Votes"
njsokalski asked ·

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

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.

windows-uwp-xaml
· 4
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Any updates about this issue? Does @FayWang-MSFT 's reply make sense?

0 Votes 0 · ·

Hi, have you solved your issue? Do you have other questions?

0 Votes 0 · ·

Hi, is there any update?

0 Votes 0 · ·

Hi, any updates about this issue?

0 Votes 0 · ·

1 Answer

FayWang-MSFT avatar image
0 Votes"
FayWang-MSFT answered ·

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>

· Share
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.