<Page
    x:Class="SimpleColorScroll.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SimpleColorScroll"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    
    <Page.Resources>
        <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" />
        </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>
        
        <!-- Czerwony -->
        <TextBlock Text="Czerwony"
                   Grid.Column="0"
                   Grid.Row="0"
                   Foreground="Red" />
        
        <Slider x:ConnectionId='1' Name="redSlider"
                Grid.Column="0"
                Grid.Row="1"
                Foreground="Red"
                                                    />
        
        <TextBlock Name="redValue"
                   Grid.Column="0"
                   Grid.Row="2"
                   Foreground="Red" />

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

        <Slider x:ConnectionId='2' Name="greenSlider"
                Grid.Column="1"
                Grid.Row="1"
                Foreground="Green"
                                                    />

        <TextBlock Name="greenValue"
                   Grid.Column="1"
                   Grid.Row="2"
                   Foreground="Green" />

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

        <Slider x:ConnectionId='3' Name="blueSlider"
                Grid.Column="2"
                Grid.Row="1"
                Foreground="Blue"
                                                    />

        <TextBlock Name="blueValue"
                   Grid.Column="2"
                   Grid.Row="2"
                   Foreground="Blue" />

        <!-- Wynik -->
        <Rectangle Grid.Column="3"
                   Grid.Row="0"
                   Grid.RowSpan="3">
            <Rectangle.Fill>
                <SolidColorBrush x:Name="brushResult"
                                 Color="Black" />
            </Rectangle.Fill>
        </Rectangle>
    </Grid>
</Page>

