<Page
    x:Class="BareBonesSlider.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:BareBonesSlider"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.Resources>
        <ControlTemplate x:Key="sliderTemplate"
                         TargetType="Slider">
            <Grid>
                <Grid Name="HorizontalTemplate"
                      Background="Transparent"
                      Height="48">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    
                    <Rectangle Name="HorizontalTrackRect"
                               Grid.Column="0"
                               Grid.ColumnSpan="3"
                               Fill="Blue"
                               Margin="0 12" />
                    
                    <Thumb Name="HorizontalThumb"
                           Grid.Column="1"
                           DataContext="{TemplateBinding Value}"
                           Width="24" />
                    
                    <Rectangle Name="HorizontalDecreaseRect"
                               Grid.Column="0"
                               Fill="Red"
                               Margin="0 12" />
                </Grid>
                
                <Grid Name="VerticalTemplate"
                      Visibility="Collapsed"
                      Background="Transparent"
                      Width="48">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>

                    <Rectangle Name="VerticalTrackRect"
                               Grid.Row="0"
                               Grid.RowSpan="3"
                               Fill="Blue"
                               Margin="12 0" />

                    <Thumb Name="VerticalThumb"
                           Grid.Row="1"
                           DataContext="{TemplateBinding Value}"
                           Height="24" />

                    <Rectangle Name="VerticalDecreaseRect"
                               Grid.Row="2"
                               Fill="Red"
                               Margin="12 0" />
                </Grid>
            </Grid>
        </ControlTemplate>
    </Page.Resources>

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        
        <Slider Grid.Row="0"
                Template="{StaticResource sliderTemplate}"
                Margin="48" />

        <Slider Grid.Row="1"
                Template="{StaticResource sliderTemplate}"
                Orientation="Vertical"
                Margin="48" />

    </Grid>
</Page>
