<Page
    x:Class="DialSketch.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:DialSketch"
    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="local:Dial">
            <Setter Property="Minimum" Value="-1800" />
            <Setter Property="Maximum" Value="1800" />
            <Setter Property="RenderTransformOrigin" Value="0.5 0.5" />
            <Setter Property="Width" Value="144" />
            <Setter Property="Height" Value="144" />
            <Setter Property="Margin" Value="24" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Grid>
                            <Ellipse Fill="DarkRed" />
                            <Ellipse Stroke="Black"
                                     StrokeThickness="12"
                                     StrokeDashArray="0.1 1"
                                     Margin="3" />
                            <Ellipse Fill="Black"
                                     Width="6"
                                     Height="6" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        
        <Border Grid.Row="0"
                Grid.Column="0"
                Grid.ColumnSpan='3'
                BorderBrush="{StaticResource ApplicationForegroundThemeBrush}"
                BorderThickness="3 0 0 3"
                Background="#C0C0C0"
                Padding="24">
            
            <Grid Name="drawingGrid">
                <Polyline Name="polyline"
                          Stroke="#404040"
                          StrokeThickness="3" />
            </Grid>
        </Border>
        
        <local:Dial x:Name="horzDial"
                    Grid.Row="1"
                    Grid.Column="0"
                    Maximum="1800"
                    ValueChanged="OnDialValueChanged">
            <local:Dial.RenderTransform>
                <RotateTransform />    
            </local:Dial.RenderTransform>
        </local:Dial>
        
        <Button Content="Wyczyść"
                Grid.Row="1"
                Grid.Column="1"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Click="OnClearButtonClick" />
        
        <local:Dial x:Name="vertDial"
                    Grid.Row="1"
                    Grid.Column="2"
                    Maximum="1800"
                    ValueChanged="OnDialValueChanged">
            <local:Dial.RenderTransform>
                <RotateTransform />
            </local:Dial.RenderTransform>
        </local:Dial>
    </Grid>
</Page>
