<UserControl
    x:Class="Stopwatch.View.AnalogStopwatch"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Stopwatch.View"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400"
    xmlns:viewmodel="using:Stopwatch.ViewModel">

    <UserControl.Resources>
        <viewmodel:StopwatchViewModel x:Name="viewModel"/>
        <viewmodel:BooleanNotConverter x:Key="notConverter"/>
        <viewmodel:AngleConverter x:Key="angleConverter"/>
    </UserControl.Resources>

    <Grid x:Name="baseGrid" DataContext="{StaticResource ResourceKey=viewModel}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="400"/>
        </Grid.ColumnDefinitions>
        <Ellipse Width="300" Height="300" Stroke="Black" StrokeThickness="2">
            <Ellipse.Fill>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <LinearGradientBrush.RelativeTransform>
                        <CompositeTransform CenterY="0.5" CenterX="0.5" Rotation="45"/>
                    </LinearGradientBrush.RelativeTransform>
                    <GradientStop Color="#FFB03F3F"/>
                    <GradientStop Color="#FFE4CECE" Offset="1"/>
                </LinearGradientBrush>
            </Ellipse.Fill>
        </Ellipse>
        <Rectangle RenderTransformOrigin="0.5,0.5" Width="2" Height="150" Fill="Black">
            <Rectangle.RenderTransform>
                <TransformGroup>
                    <TranslateTransform Y="-60"/>
                    <RotateTransform Angle="{Binding Seconds, 
                    Converter={StaticResource ResourceKey=angleConverter},
                    ConverterParameter=Seconds}"/>
                </TransformGroup>
            </Rectangle.RenderTransform>
        </Rectangle>
        <Rectangle RenderTransformOrigin="0.5,0.5" Width="4" Height="100" Fill="Black">
            <Rectangle.RenderTransform>
                <TransformGroup>
                    <TranslateTransform Y="-50"/>
                    <RotateTransform Angle="{Binding Minutes, 
                    Converter={StaticResource ResourceKey=angleConverter},
                    ConverterParameter=Minutes}"/>
                </TransformGroup>
            </Rectangle.RenderTransform>
        </Rectangle>
        <Rectangle RenderTransformOrigin="0.5,0.5" Width="1" Height="150" Fill="Yellow">
            <Rectangle.RenderTransform>
                <TransformGroup>
                    <TranslateTransform Y="-60"/>
                    <RotateTransform Angle="{Binding LapSeconds, 
                    Converter={StaticResource ResourceKey=angleConverter}, 
                    ConverterParameter=Seconds}"/>
                </TransformGroup>
            </Rectangle.RenderTransform>
        </Rectangle>
        <Rectangle RenderTransformOrigin="0.5,0.5" Width="2" Height="100" Fill="Yellow">
            <Rectangle.RenderTransform>
                <TransformGroup>
                    <TranslateTransform Y="-50"/>
                    <RotateTransform Angle="{Binding LapMinutes, 
                    Converter={StaticResource ResourceKey=angleConverter},
                    ConverterParameter=Minutes}"/>
                </TransformGroup>
            </Rectangle.RenderTransform>
        </Rectangle>
        <Ellipse Width="10" Height="10" Fill="Black"/>

        <StackPanel Orientation="Horizontal" VerticalAlignment="Bottom">
            <Button Style="{StaticResource StopwatchButtonStyle}"
       IsEnabled="{Binding Running, Converter={StaticResource notConverter}}"
       AutomationProperties.Name="Start" Click="StartButton_Click">&#xE102;</Button>
            <Button Style="{StaticResource StopwatchButtonStyle}" AutomationProperties.Name="Stop" 
      IsEnabled="{Binding Running}" Click="StopButton_Click">&#xE103;</Button>
            <Button Style="{StaticResource StopwatchButtonStyle}" AutomationProperties.Name="Reset"
      Click="ResetButton_Click">&#xE10E;</Button>
            <Button Style="{StaticResource StopwatchButtonStyle}" AutomationProperties.Name="Lap"
      IsEnabled="{Binding Running}" Click="LapButton_Click">&#xE16D;</Button>
        </StackPanel>
    </Grid>
    
</UserControl>
