<HeaderedContentControl
    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:b="http://schemas.microsoft.com/xaml/behaviors"
    xmlns:noesis="clr-namespace:NoesisGUIExtensions;assembly=Noesis.GUI.Extensions"
    xmlns:local="clr-namespace:Gallery"
    mc:Ignorable="d"
    d:DesignWidth="1280" d:DesignHeight="720"
    Style="{StaticResource SampleControlStyle}"
    Header="Slider"
    Tag="https://www.noesisengine.com/docs/Gui.Core._Slider.html">

    <StackPanel>
        <TextBlock Style="{StaticResource SampleSectionDesc}" Text="Use a Slider when you want your users to be able to select from a range of values by moving a thumb control along a track." />
        <HeaderedContentControl Style="{StaticResource SampleSectionStyle}" Tag="https://www.noesisengine.com/xamltoy/24a4c593cd8feabea3d7bba35b07d158" TabIndex="100">
            <HeaderedContentControl.Header>
                <StackPanel>
                    <TextBlock Style="{StaticResource SampleSectionTitle}" Text="Orientation and Ticks"/>
                    <TextBlock Style="{StaticResource SampleSectionDesc}" Margin="0,5,0,0">
                        <Run FontWeight="Bold">TickPlacement</Run>
                        <Run>property defines how to position the tick marks in a Slider with respect to the slider bar.</Run>
                        <Run FontWeight="Bold">TickFrequency</Run>
                        <Run>property determines the distance between tick marks.</Run>
                        <Run>User can also specify custom ticks by setting the</Run>
                        <Run FontWeight="Bold">Ticks</Run>
                        <Run>property. To revert the direction of the slider set the property</Run>
                        <Run FontWeight="Bold">IsDirectionReversed</Run><Run>.</Run>
                    </TextBlock>
                </StackPanel>
            </HeaderedContentControl.Header>
            <WrapPanel HorizontalAlignment="Center" VerticalAlignment="Center">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="150"/>
                        <ColumnDefinition Width="50"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>

                    <TextBlock Grid.ColumnSpan="4" Text="Horizontal Sliders" TextAlignment="Right" HorizontalAlignment="Center" FontWeight="Bold" Margin="0,0,0,8"/>

                    <TextBlock Grid.Column="0" Grid.Row="1" Text="No ticks" TextAlignment="Right" Margin="2" VerticalAlignment="Center"/>
                    <Slider Grid.Column="1" Grid.Row="1" x:Name="Slider1" Margin="8,4,6,2"/>
                    <TextBlock Grid.Column="2" Grid.Row="1" Margin="2" VerticalAlignment="Center" TextAlignment="Right" Text="{Binding Value, ElementName=Slider1, StringFormat=F2}"/>

                    <TextBlock Grid.Column="0" Grid.Row="2" Text="Top ticks" TextAlignment="Right" Margin="2" VerticalAlignment="Center"/>
                    <Slider Grid.Column="1" Grid.Row="2" x:Name="Slider2" Margin="8,4,6,2" TickPlacement="TopLeft"/>
                    <TextBlock Grid.Column="2" Grid.Row="2" Margin="2" VerticalAlignment="Center" TextAlignment="Right" Text="{Binding Value, ElementName=Slider2, StringFormat=F2}"/>

                    <TextBlock Grid.Column="0" Grid.Row="3" Text="Ticks on both" TextAlignment="Right" Margin="2" VerticalAlignment="Center"/>
                    <Slider Grid.Column="1" Grid.Row="3" x:Name="Slider3" Margin="8,4,6,2" TickPlacement="Both" IsDirectionReversed="True"/>
                    <TextBlock Grid.Column="2" Grid.Row="3" Margin="2" VerticalAlignment="Center" TextAlignment="Right" Text="{Binding Value, ElementName=Slider3, StringFormat=F2}"/>

                    <TextBlock Grid.Column="0" Grid.Row="4" Text="Bottom ticks" TextAlignment="Right" Margin="2" VerticalAlignment="Center"/>
                    <Slider Grid.Column="1" Grid.Row="4" x:Name="Slider4" Margin="8,4,6,2" TickPlacement="BottomRight"/>
                    <TextBlock Grid.Column="2" Grid.Row="4" Margin="2" VerticalAlignment="Center" TextAlignment="Right" Text="{Binding Value, ElementName=Slider4, StringFormat=F2}"/>

                    <TextBlock Grid.Column="0" Grid.Row="5" Text="Custom ticks" TextAlignment="Right" Margin="2,2,2,20" VerticalAlignment="Center"/>
                    <Slider Grid.Column="1" Grid.Row="5" x:Name="Slider5" Margin="8,4,6,20" Ticks="0 5 6 7 10" TickPlacement="BottomRight"/>
                    <TextBlock Grid.Column="2" Grid.Row="5" Margin="2,2,2,20" VerticalAlignment="Center" TextAlignment="Right" Text="{Binding Value, ElementName=Slider5, StringFormat=F2}"/>
                </Grid>
                <Grid Margin="40,0,40,20" HorizontalAlignment="Center">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="100"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="60"/>
                        <ColumnDefinition Width="60"/>
                        <ColumnDefinition Width="60"/>
                        <ColumnDefinition Width="60"/>
                    </Grid.ColumnDefinitions>

                    <TextBlock Grid.ColumnSpan="4" Text="Vertical Sliders" TextAlignment="Right" HorizontalAlignment="Center" FontWeight="Bold" Padding="0,0,0,8"/>

                    <Slider Grid.Row="1" Grid.Column="0" x:Name="SliderV0" Orientation="Vertical" TickPlacement="None" HorizontalAlignment="Center" Margin="8,0"/>
                    <TextBlock Grid.Row="2" Grid.Column="0" VerticalAlignment="Center" HorizontalAlignment="Right" Text="{Binding Value, ElementName=SliderV0, StringFormat=F2}" Margin="0,4,8,0"/>

                    <Slider Grid.Row="1" Grid.Column="1" x:Name="SliderV1" Orientation="Vertical" TickPlacement="TopLeft" HorizontalAlignment="Center" Margin="8,0" TickFrequency="2"/>
                    <TextBlock Grid.Row="2" Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Right" Text="{Binding Value, ElementName=SliderV1, StringFormat=F2}" Margin="0,4,8,0"/>

                    <Slider Grid.Row="1" Grid.Column="2" x:Name="SliderV2" Orientation="Vertical" TickPlacement="Both" HorizontalAlignment="Center" Margin="8,0" TickFrequency="2" IsDirectionReversed="True"/>
                    <TextBlock Grid.Row="2" Grid.Column="2" VerticalAlignment="Center" HorizontalAlignment="Right" Text="{Binding Value, ElementName=SliderV2, StringFormat=F2}" Margin="0,4,8,0"/>

                    <Slider Grid.Row="1" Grid.Column="3" x:Name="SliderV3" Orientation="Vertical" TickPlacement="BottomRight" HorizontalAlignment="Center" Margin="8,0" TickFrequency="2"/>
                    <TextBlock Grid.Row="2" Grid.Column="3" VerticalAlignment="Center" HorizontalAlignment="Right" Text="{Binding Value, ElementName=SliderV3, StringFormat=F2}" Margin="0,4,8,0"/>
                </Grid>
            </WrapPanel>
        </HeaderedContentControl>
        <HeaderedContentControl Style="{StaticResource SampleSectionStyle}" Tag="https://www.noesisengine.com/xamltoy/f0e1bdaa860f268012914157f91856b5" TabIndex="200">
            <HeaderedContentControl.Header>
                <StackPanel>
                    <TextBlock Style="{StaticResource SampleSectionTitle}" Text="Snap to ticks"/>
                </StackPanel>
            </HeaderedContentControl.Header>
            <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="190"/>
                    <ColumnDefinition Width="60"/>
                </Grid.ColumnDefinitions>
                <Slider Grid.Column="0" Grid.Row="7" x:Name="Slider7" IsSnapToTickEnabled="True" TickFrequency="2" LargeChange="4" TickPlacement="BottomRight"/>
                <TextBlock Grid.Column="1" Grid.Row="7" VerticalAlignment="Center" TextAlignment="Right" Text="{Binding Value, ElementName=Slider7, StringFormat=F2}"/>
            </Grid>
        </HeaderedContentControl>
        <HeaderedContentControl Style="{StaticResource SampleSectionStyle}" Tag="https://www.noesisengine.com/xamltoy/5c71b442808b40b0b9c4ac7ad3b59e61" TabIndex="300">
            <HeaderedContentControl.Header>
                <StackPanel>
                    <TextBlock Style="{StaticResource SampleSectionTitle}" Text="Move to point"/>
                    <TextBlock Style="{StaticResource SampleSectionDesc}" Margin="0,5,0,0">
                        <Run FontWeight="Bold">IsMoveToPointEnabled</Run>
                        <Run>property indicates whether the Thumb of a Slider moves immediately to the location of the mouse click.</Run>
                    </TextBlock>
                </StackPanel>
            </HeaderedContentControl.Header>
            <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="190"/>
                    <ColumnDefinition Width="60"/>
                </Grid.ColumnDefinitions>
                <Slider Grid.Column="0" x:Name="Slider8" IsMoveToPointEnabled="True" LargeChange="2"/>
                <TextBlock Grid.Column="1" VerticalAlignment="Center" TextAlignment="Right" Text="{Binding Value, ElementName=Slider8, StringFormat=F2}"/>
            </Grid>
        </HeaderedContentControl>
    </StackPanel>
</HeaderedContentControl>