locked
XAML Slider with custom Ticks ? RRS feed

  • Question

  • Hi all.

    In WPF I see you can create a Slider component and specify the Ticks attribute to govern what the ticks should be.

    However this doesn't appear to work for Store applications.

    What I want to achieve is a Slider that has ticks 0-10 and a final 'All' tick, so the user can choose from the set or select 'All'.

    I can get 0-10 fine using the built in functionality, but I can't see how I can achieve that 'All' state at the end of the slider.

    Any suggestions?

    Cheers,

    Chris

    Wednesday, December 18, 2013 5:11 PM

Answers

  • The TickBar object is opaque and its implementation is internal to the control so you can't modify it directly, but you can add a TextBlock which says "All" to the right side of the HorizontalTemplate grid over the tick marks.

    For a really bare bones example added between the BottomTickBar and the HorizontalThumb:

     <TickBar x:Name="BottomTickBar" Grid.ColumnSpan="3" Fill="{ThemeResource SliderTickmarkOutsideBackgroundThemeBrush}" Height="{ThemeResource SliderOutsideTickBarThemeHeight}" Margin="0,2,0,0" Grid.Row="2" Visibility="Collapsed" VerticalAlignment="Top"/>
     <TextBlock Grid.Column="3" Text="All" HorizontalAlignment="Right"/>
     <Thumb x:Name="HorizontalThumb" AutomationProperties.AccessibilityView="Raw" Background="{ThemeResource SliderThumbBackgroundThemeBrush}" Grid.Column="1" DataContext="{TemplateBinding Value}" Height="{ThemeResource SliderTrackThemeHeight}" Grid.Row="1" Style="{StaticResource SliderThumbStyle}" Width="{ThemeResource SliderTrackThemeHeight}"/>
                                      

    Wednesday, December 18, 2013 11:06 PM
    Moderator

All replies

  • You can edit the template to include your "all" box. In the designer select the slider, right click, and find the edit template menu option near the bottom.

    Wednesday, December 18, 2013 6:14 PM
    Moderator
  • Rob, thanks for the help, without doing my homework for me so to speak, could you give me a little more guidance?

    I've created a template copied from the default style, and I can see within that the TickBar element, but I can't see anything about how that TickBar is governed. In the Slider control I'm specifying the Maximum for the ticks, where is that getting passed down to?

    Blend has shown me the 'BottomTickBar' item, but the properties of the TickBar are certainly non-obvious to me - but I'm not a big Blend user.

    Cheers,

    Chris

    Wednesday, December 18, 2013 10:45 PM
  • The TickBar object is opaque and its implementation is internal to the control so you can't modify it directly, but you can add a TextBlock which says "All" to the right side of the HorizontalTemplate grid over the tick marks.

    For a really bare bones example added between the BottomTickBar and the HorizontalThumb:

     <TickBar x:Name="BottomTickBar" Grid.ColumnSpan="3" Fill="{ThemeResource SliderTickmarkOutsideBackgroundThemeBrush}" Height="{ThemeResource SliderOutsideTickBarThemeHeight}" Margin="0,2,0,0" Grid.Row="2" Visibility="Collapsed" VerticalAlignment="Top"/>
     <TextBlock Grid.Column="3" Text="All" HorizontalAlignment="Right"/>
     <Thumb x:Name="HorizontalThumb" AutomationProperties.AccessibilityView="Raw" Background="{ThemeResource SliderThumbBackgroundThemeBrush}" Grid.Column="1" DataContext="{TemplateBinding Value}" Height="{ThemeResource SliderTrackThemeHeight}" Grid.Row="1" Style="{StaticResource SliderThumbStyle}" Width="{ThemeResource SliderTrackThemeHeight}"/>
                                      

    Wednesday, December 18, 2013 11:06 PM
    Moderator