Custom Slider

Learn creating a Custom Sliderusing Windows App SDK with this Tutorial

Custom Slider shows how to create a Style for a Slider using Windows App SDK.

Step 1

Follow Setup and Start on how to get Setup and Install what you need for Visual Studio 2022 and Windows App SDK.

In Windows 11 choose Start and then find or search for Visual Studio 2022 and then select it.

Once Visual Studio 2022 has started select Create a new project.

Then choose the Blank App, Packages (WinUI in Desktop) and then select Next.

After that in Configure your new project type in the Project name as CustomSlider, then select a Location and then select Create to start a new Solution.

Step 2

Then in Visual Studio within Solution Explorer for the Solution double-click on App.xaml to see the XAML for the Project.

Step 3

In the XAML for App.xaml below the Comment of  type in the following XAML:


<Style x:Key="CustomSlider" TargetType="Slider">
    <Setter Property="Background" Value="LightSalmon"/>
    <Setter Property="BorderBrush" Value="Salmon"/>
    <Setter Property="BorderThickness" Value="2"/>
    <Setter Property="Foreground" Value="Gold"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Slider">
                <Grid Margin="{TemplateBinding Padding}">
                    <Grid.Resources>
                        <Style x:Key="SliderThumbStyle" TargetType="Thumb">
                            <Setter Property="BorderThickness" Value="2"/>
                            <Setter Property="BorderBrush" Value="Goldenrod"/>
                            <Setter Property="Foreground" Value="Gold"/>
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="Thumb">
                                        <Ellipse StrokeThickness="2" 
                                        Stroke="{TemplateBinding BorderBrush}" 
                                        Fill="{TemplateBinding Foreground}"/>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </Grid.Resources>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Grid x:Name="SliderContainer" 
                    Background="Transparent" Grid.Row="1">
                        <!-- Horizontal Template -->

                        <!-- Vertical Template -->
                                    
                    </Grid>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

This XAML is part of a Style of CustomSlider that will be used to target a Slider which will contain a Template for when it is Horizontal or Vertical for the Custom Slider.

Step 4

While still the XAML for App.xaml below the Comment of  type in the following XAML:


<Grid x:Name="HorizontalTemplate">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="17"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="17"/>
    </Grid.RowDefinitions>
    <Rectangle x:Name="HorizontalTrackRect" 
    Grid.ColumnSpan="3" Fill="{TemplateBinding Background}" 
    Grid.Row="1" Height="10" RadiusX="5" RadiusY="5"/>
    <Rectangle x:Name="HorizontalDecreaseRect" 
    Fill="{TemplateBinding Background}" 
    Grid.Row="1" Height="10" RadiusX="5" RadiusY="5"/>
    <Rectangle x:Name="HorizontalBorder" 
    Grid.ColumnSpan="3" Grid.Row="1" 
    Stroke="{TemplateBinding BorderBrush}"
    StrokeThickness="{TemplateBinding BorderThickness}" 
    Height="10" RadiusX="5" RadiusY="5"/>
    <Thumb x:Name="HorizontalThumb" 
    AutomationProperties.AccessibilityView="Raw" 
    Background="{ThemeResource SliderThumbBackgroundThemeBrush}"
    Grid.Column="1" DataContext="{TemplateBinding Value}" 
    Grid.Row="1" Style="{StaticResource SliderThumbStyle}" 
    Height="25" Width="25"/>
</Grid>

This XAML is for the Horizontal Template when the Slider is Horizontal for the Custom Slider.

Step 5

Then in the XAML for App.xaml below the Comment of  type in the following XAML:


<Grid x:Name="VerticalTemplate" Visibility="Collapsed">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="17"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="17"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Rectangle x:Name="VerticalTrackRect" Grid.Column="1" 
    Fill="{TemplateBinding Background}" Grid.RowSpan="3" 
    Width="10" RadiusX="5" RadiusY="5"/>
    <Rectangle x:Name="VerticalDecreaseRect" Grid.Column="1" 
    Fill="{TemplateBinding Background}" Grid.Row="2"/>
    <Rectangle x:Name="VerticalBorder" Grid.RowSpan="3" 
    Grid.Column="1"  Stroke="{TemplateBinding BorderBrush}"
    StrokeThickness="{TemplateBinding BorderThickness}" 
    Width="10" RadiusX="5" RadiusY="5" />
    <Thumb x:Name="VerticalThumb" AutomationProperties.AccessibilityView="Raw" 
    Background="{ThemeResource SliderThumbBackgroundThemeBrush}"
    Grid.Column="1" DataContext="{TemplateBinding Value}" Grid.Row="1" 
    Style="{StaticResource SliderThumbStyle}" Height="25" Width="25"/>
</Grid>

This XAML is for the Vertical Template when the Slider is Vertical for the Custom Slider.

Step 6

Within Solution Explorer for the Solution double-click on MainWindow.xaml to see the XAML for the Main Window.

Step 7

In the XAML for MainWindow.xaml there will be some XAML for a StackPanel, this should be Removed:


<StackPanel Orientation="Horizontal" 
HorizontalAlignment="Center" VerticalAlignment="Center">
    <Button x:Name="myButton" Click="myButton_Click">Click Me</Button>
</StackPanel>

Step 8

While still in the XAML for MainWindow.xaml above </Window>, type in the following XAML:

                            
<Slider Margin="50" VerticalAlignment="Center"  
Style="{StaticResource CustomSlider}"/>

This XAML contains a Slider with Style set to the StaticResource of CustomSlider from App.xaml.

Step 9

Within Solution Explorer for the Solution select the arrow next to MainWindow.xaml then double-click on MainWindow.xaml.cs to see the Code for the Main Window.

Step 10

In the Code for MainWindow.xaml.cs there be a Method of myButton_Click(...) this should be Removed by removing the following:


private void myButton_Click(object sender, RoutedEventArgs e)
{
    myButton.Content = "Clicked";
}

Step 11

That completes the Windows App SDK application. In Visual Studio 2022 from the Toolbar select CustomSlider (Package) to Start the application.

Step 12

Once running you will see the Custom Slider displayed.

Custom Slider Running and Output

Step 13

To Exit the Windows App SDK application, select the Close button from the top right of the application as that concludes this Tutorial for Windows App SDK from tutorialr.com!

Custom Slider PDF