How to achieve the customized slider control in the tick bae with rounded circles?

[Rajesh]

I am trying to achieve customized slider control required customizations are :

1.Thumb with the teal color

2.Repeat buttons end with rounded corners

3.Inside tick bar ticks as circles or ellipse instead of lines(please refer attached image.png file blue arrow mark)

 I am able achieve first and second points above, but third point I am not getting.

<Window x:Class="SliderControl.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:SliderControl"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">

    <Window.Resources>
        <Style TargetType="Slider" x:Key="SliderStyle">
            <Setter Property="OverridesDefaultStyle" Value="True"/>
            <Setter Property="SnapsToDevicePixels" Value="true" />
            <Setter Property="IsTabStop" Value="false" />
            <Setter Property="Focusable" Value="false" />

            <Setter Property="Template">
                <Setter.Value>
<ControlTemplate TargetType="Slider">

<Track Name="PART_Track">
                            <Track.DecreaseRepeatButton>
                                <RepeatButton Command="Slider.DecreaseLarge">
                                    <RepeatButton.Style>
                                        <Style TargetType="RepeatButton">
                                            <Setter Property="Template">
                                                <Setter.Value>
                                                    <ControlTemplate TargetType="RepeatButton">
                                                        <Grid>
                                                            <Border BorderBrush="#CACACA" BorderThickness="1" CornerRadius="7,0,0,7" Background="#CACACA" Height="15" >

                                                            </Border>
                                                        </Grid>
                                                    </ControlTemplate>
                                                </Setter.Value>
                                            </Setter>
                                        </Style>
                                    </RepeatButton.Style>
                                </RepeatButton>
                            </Track.DecreaseRepeatButton>

                            <Track.IncreaseRepeatButton>
                                <RepeatButton Command="Slider.IncreaseLarge" >
                                    <RepeatButton.Style>
                                        <Style TargetType="RepeatButton">
                                            <Setter Property="Template">
                                                <Setter.Value>
                                                    <ControlTemplate TargetType="RepeatButton">
                                                        <Grid >
                                                            <Border BorderBrush="#CACACA" BorderThickness="1" CornerRadius="0,7,7,0" Background="#CACACA" Height="15" >

                                                            </Border>

</Grid>
                                                    </ControlTemplate>
                                                </Setter.Value>
                                            </Setter>
                                        </Style>
                                    </RepeatButton.Style>
                                </RepeatButton>
                            </Track.IncreaseRepeatButton>

                            <Track.Thumb>
                                <Thumb>
                                    <Thumb.Style>
                                        <Style TargetType="Thumb">
                                            <Setter Property="Template">
                                                <Setter.Value>
                                                    <ControlTemplate TargetType="Thumb">
                                                        <Canvas>
                                                            <Rectangle Canvas.Left="4" Canvas.Bottom="-3.7" Fill="Teal" Width="12" Height="15" Margin="-8,0,0,5" Stroke="Teal"/>
                                                            <Path  Fill="Teal" Data="M 0 10 L 20 10 L 10 0 Z" Canvas.Left="-4" Stretch="Fill" Width="12" Height="9.333"/>
                                                        </Canvas>
                                                    </ControlTemplate>
                                                </Setter.Value>
                                            </Setter>
                                        </Style>
                                    </Thumb.Style>
                                </Thumb>
                            </Track.Thumb>
                        </Track>

                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

    <Grid>
        <StackPanel HorizontalAlignment="Center" Height="100" VerticalAlignment="Center" Width="400">
            <Slider Height="25" Width="250" Margin="30" Maximum="5" Minimum="1" Value="0" Cursor="Hand"
                    TickPlacement="Both" TickFrequency="1" Ticks="1, 2, 3, 4, 5" Name="Slider" Style="{StaticResource SliderStyle}">


            </Slider>
            <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Width="80" Margin="70,-20,0,0"
                       Text="{Binding ElementName=Slider, Path=Value}"></TextBlock>
        </StackPanel>

    </Grid>
</Window>

 

 

Can you please help me ,how to get circles inside tickbar in wpf .

                                                                                                                                                                

[Masha]

Hello Rajesh,

There is no easy way to achieve tick bar ticks as an ellipse using the native Slider control. I suggest you try RadSlide where you can create a custom template for ticks.

<DataTemplate x:Key="EllipseTemplate">
    <Grid>
        <Ellipse Width="6" Height="6" Fill="White" />
     </Grid>
</DataTemplate>

<Style x:Key="CustomRadSliderStyle" TargetType="telerik:RadSlider" BasedOn="{StaticResource RadSliderStyle}">  <Setter Property="ThumbStyle" Value="{StaticResource SliderThumb}"/>
    <Setter Property="TickTemplate" Value="{StaticResource EllipseTemplate}" />
</Style>

I demonstrated this approach in the attached project. Please note you need to reference NoXaml binaries and Fluent theme.

I hope this helps.

Regards,
Masha
Progress Telerik