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

    <Page.Resources>
        <local:RgbViewModel x:Key="rgbViewModel" />
        
        <local:DoubleToStringHexByteConverter x:Key="hexConverter" />

        <Style TargetType="TextBlock">
            <Setter Property="Text" Value="00" />
            <Setter Property="FontSize" Value="24" />
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="Margin" Value="0 12" />
        </Style>

        <Style TargetType="Slider">
            <Setter Property="Orientation" Value="Vertical" />
            <Setter Property="IsDirectionReversed" Value="True" />
            <Setter Property="Maximum" Value="255" />
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="ThumbToolTipValueConverter" Value="{StaticResource hexConverter}" />
        </Style>
    </Page.Resources>

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="3*" />
        </Grid.ColumnDefinitions>

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

        <!-- Red -->
        <TextBlock Text="Red"
                   Grid.Column="0"
                   Grid.Row="0"
                   Foreground="Red" />

        <Slider Grid.Column="0"
                Grid.Row="1"
                Value="{Binding Source={StaticResource rgbViewModel}, 
                                Path=Red, 
                                Mode=TwoWay}"
                Foreground="Red" />

        <TextBlock Text="{Binding Source={StaticResource rgbViewModel}, 
                                  Path=Red, 
                                  Converter={StaticResource hexConverter}}"
                   Grid.Column="0"
                   Grid.Row="2"
                   Foreground="Red" />

        <!-- Green -->
        <TextBlock Text="Green"
                   Grid.Column="1"
                   Grid.Row="0"
                   Foreground="Green" />

        <Slider Grid.Column="1"
                Grid.Row="1"
                Value="{Binding Source={StaticResource rgbViewModel}, 
                                Path=Green, 
                                Mode=TwoWay}"
                Foreground="Green" />

        <TextBlock Text="{Binding Source={StaticResource rgbViewModel}, 
                                  Path=Green, 
                                  Converter={StaticResource hexConverter}}"
                   Grid.Column="1"
                   Grid.Row="2"
                   Foreground="Green" />

        <!-- Blue -->
        <TextBlock Text="Blue"
                   Grid.Column="2"
                   Grid.Row="0"
                   Foreground="Blue" />

        <Slider Grid.Column="2"
                Grid.Row="1"
                Value="{Binding Source={StaticResource rgbViewModel}, 
                                Path=Blue, 
                                Mode=TwoWay}"
                Foreground="Blue" />

        <TextBlock Text="{Binding Source={StaticResource rgbViewModel}, 
                                  Path=Blue, 
                                  Converter={StaticResource hexConverter}}"
                   Grid.Column="2"
                   Grid.Row="2"
                   Foreground="Blue" />

        <!-- Result -->
        <Rectangle Grid.Column="3"
                   Grid.Row="0"
                   Grid.RowSpan="3">
            <Rectangle.Fill>
                <SolidColorBrush Color="{Binding Source={StaticResource rgbViewModel}, 
                                                 Path=Color}" />
            </Rectangle.Fill>
        </Rectangle>
    </Grid>
</Page>
