#1,026 – Horizontal and Vertical Sliders

You can orient a Slider either horizontally or vertically by setting the Orientation property to Horizontal (the default) or Vertical.  The thumb on the Slider will be rendered differently, depending on the orientation.

Below is an example of both a horizontal and a vertical Slider.

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <Label Content="Width" VerticalAlignment="Center"/>
            <Slider Grid.Column="1" Margin="10" Foreground="Blue"
                    Minimum="1" Maximum="5"
                    TickPlacement="BottomRight"/>
        </Grid>

        <Slider Grid.Row="1" Margin="10,0" Foreground="Blue"
                Minimum="1" Maximum="10"
                Orientation="Vertical"
                TickPlacement="BottomRight"/>
        <Label Grid.Row="2" Content="Height"/>
    </Grid>

1026-001

Advertisement