none
How to change style of Slider

    Question

  • Hi, I  want to use specific type of slider for my application,  I am creating same but not able to make same as given sample.

    I am attaching sample image file. See-

    Any one can help or provide style for the same slide theme?

    Thanks.

    Thursday, December 6, 2018 2:01 PM

Answers

  • I can explain some of what you'd do in order to replace the template.

    There's a track, in that go two repeatbuttons. They decrease and increase. 

    Then there's also the thumb.

    You need to replace all that. 

    This is more to get you started and nowhere near cut and paste.

       <ControlTemplate x:Key="WhiteSlider"  TargetType="Slider">
            <Grid MinHeight="{TemplateBinding MinHeight}">
                <Track x:Name="PART_Track">
                    <Track.DecreaseRepeatButton>
                        <RepeatButton Style="{StaticResource SliderDecreaseSliderButton}"  Command="Slider.DecreaseLarge" />
                    </Track.DecreaseRepeatButton>
                    <Track.IncreaseRepeatButton>
                        <RepeatButton Style="{StaticResource SliderIncreaseSliderButton}" Command="Slider.IncreaseLarge" />
                    </Track.IncreaseRepeatButton>
                    <Track.Thumb>
                        <Thumb Style="{StaticResource SomeSortofEllipse}" />
                    </Track.Thumb>
                </Track>
            </Grid>
        </ControlTemplate>

    You need a white button, very roughly:

        <Style x:Key="SliderDecreaseButton" TargetType="RepeatButton">
            <Setter Property="SnapsToDevicePixels" Value="true" />
            <Setter Property="OverridesDefaultStyle" Value="true" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="RepeatButton">
                        <Border SnapsToDevicePixels="True" 
                                Background="White" 
                                BorderThickness="0" Height="6"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    Another like that but with blue for the increase button.

    And you need some sort of an ellipse with a blue fill and white stroke for the thumb.

    Then bind a couple of textblocks to min and max.

    I adapted the above from one of mine which looks like the brass sliders here:


    Hope that helps.

    Technet articles: WPF: Layout Lab; All my Technet Articles

    Thursday, December 6, 2018 7:58 PM
    Moderator

All replies

  • Doing it as a style is complicated so here is the way to do it without using a style:

    <Window x:Class="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:WpfApplication1"
            mc:Ignorable="d"
            Title="MainWindow" Height="350" Width="525">
    	<Grid>
    		<Grid Background="Blue" Height="20" VerticalAlignment="Top">
    			<Grid.ColumnDefinitions>
    				<ColumnDefinition Width="Auto"></ColumnDefinition>
    				<ColumnDefinition></ColumnDefinition>
    				<ColumnDefinition Width="Auto"></ColumnDefinition>
    			</Grid.ColumnDefinitions>
    			<TextBlock Text="{Binding ElementName=theSlider, Path=Value,StringFormat={}{0:F2}}" Foreground="White" ></TextBlock>
    			<Slider x:Name="theSlider" Grid.Column="1" Minimum="1" Maximum="10" Background="Blue"></Slider>
    			<TextBlock Grid.Column="2" Text="{Binding ElementName=theSlider, Path=Maximum,StringFormat={}{0:F2}}" Foreground="White"></TextBlock>
    		</Grid>
    	</Grid>
    </Window>
    


    Lloyd Sheen

    Thursday, December 6, 2018 6:47 PM
  • I can explain some of what you'd do in order to replace the template.

    There's a track, in that go two repeatbuttons. They decrease and increase. 

    Then there's also the thumb.

    You need to replace all that. 

    This is more to get you started and nowhere near cut and paste.

       <ControlTemplate x:Key="WhiteSlider"  TargetType="Slider">
            <Grid MinHeight="{TemplateBinding MinHeight}">
                <Track x:Name="PART_Track">
                    <Track.DecreaseRepeatButton>
                        <RepeatButton Style="{StaticResource SliderDecreaseSliderButton}"  Command="Slider.DecreaseLarge" />
                    </Track.DecreaseRepeatButton>
                    <Track.IncreaseRepeatButton>
                        <RepeatButton Style="{StaticResource SliderIncreaseSliderButton}" Command="Slider.IncreaseLarge" />
                    </Track.IncreaseRepeatButton>
                    <Track.Thumb>
                        <Thumb Style="{StaticResource SomeSortofEllipse}" />
                    </Track.Thumb>
                </Track>
            </Grid>
        </ControlTemplate>

    You need a white button, very roughly:

        <Style x:Key="SliderDecreaseButton" TargetType="RepeatButton">
            <Setter Property="SnapsToDevicePixels" Value="true" />
            <Setter Property="OverridesDefaultStyle" Value="true" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="RepeatButton">
                        <Border SnapsToDevicePixels="True" 
                                Background="White" 
                                BorderThickness="0" Height="6"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    Another like that but with blue for the increase button.

    And you need some sort of an ellipse with a blue fill and white stroke for the thumb.

    Then bind a couple of textblocks to min and max.

    I adapted the above from one of mine which looks like the brass sliders here:


    Hope that helps.

    Technet articles: WPF: Layout Lab; All my Technet Articles

    Thursday, December 6, 2018 7:58 PM
    Moderator