<UserControl x:Class="CompassVO.Themes.compass_digital.compass_digital_UI"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
             mc:Ignorable="d"
             FontFamily="{StaticResource PhoneFontFamilyNormal}"
             FontSize="{StaticResource PhoneFontSizeNormal}"
             Foreground="{StaticResource PhoneForegroundBrush}"
             d:DesignHeight="800"
             d:DesignWidth="480"
             DataContext="{Binding Main, Source={StaticResource Locator}}">
  <UserControl.Resources>
    <Style x:Key="textDigital"
               TargetType="TextBlock">
      <Setter Property="Margin"
                    Value="0,12,0,0" />
      <Setter Property="HorizontalAlignment"
                    Value="Center" />
      <Setter Property="FontSize"
                    Value="68" />
      <Setter Property="FontFamily"
                    Value="{StaticResource Digital}" />
    </Style>
  </UserControl.Resources>
  <Grid x:Name="LayoutRoot"
          Background="Transparent">

    <Grid HorizontalAlignment="Center"
              VerticalAlignment="Top"
              Width="416"
              Height="416"
              Margin="0,200,0,0.3"
              Opacity="1">
      <Image Height="416"
                   x:Name="imgDial"
                   Stretch="None"
                   Width="416"
                   Source="images\compass_digital_dial.png"
                   Margin="0"
                   VerticalAlignment="Center"
                   HorizontalAlignment="Center"
                   CacheMode="BitmapCache">
        <Image.RenderTransform>
          <RotateTransform Angle="{Binding DialAngle, Mode=OneWay}"
                                     CenterX="208"
                                     CenterY="208" />
        </Image.RenderTransform>
      </Image>
      <Image Height="410"
                   x:Name="imgCompass"
                   Stretch="UniformToFill"
                   Width="410"
                   Source="images\compass_digital_needle.png"
                   Margin="0"
                   VerticalAlignment="Center"
                   HorizontalAlignment="Center"
                   CacheMode="BitmapCache">
        <Image.RenderTransform>
          <RotateTransform x:Name="needleRotation"
                                     Angle="0"
                                     CenterX="205"
                                     CenterY="205" />
        </Image.RenderTransform>
      </Image>
      <StackPanel Orientation="Vertical"
                        HorizontalAlignment="Center" VerticalAlignment="Center">
        <TextBlock Margin="0, 0, 0, 0"
                           Text="{Binding NeedleCardinalDirection, Mode=OneWay}"
                           Style="{StaticResource textDigital}"
                           Foreground="{Binding CurrentThemeForegroundColor}"
                           HorizontalAlignment="Center" />
        <StackPanel Orientation="Horizontal"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center">
          <TextBlock Text="{Binding NeedleAngle, Mode=OneWay, StringFormat='0'}"
                               Style="{StaticResource textDigital}"
                               Foreground="{Binding CurrentThemeForegroundColor}" />
          <TextBlock Style="{StaticResource textDigital}"
                               Margin="0, 0, 0, 0"
                               Foreground="{Binding CurrentThemeForegroundColor}">°</TextBlock>
        </StackPanel>
      </StackPanel>
    </Grid>

    <Grid Width="120"
              Height="92"
              Visibility="{Binding IsDialEditManipulation, Mode=OneWay, Converter={StaticResource BooleanToVisibilityConverter}}"
              VerticalAlignment="Top"
              HorizontalAlignment="Center"
              Margin="0, 90, 0, 0">
      <Border Background="#A5C463"
                    BorderBrush="#505050" BorderThickness="2" CornerRadius="4">
        <Grid Margin="0">
          <TextBlock HorizontalAlignment="Center"
                               VerticalAlignment="Center"
                               Foreground="#505050"
                               Style="{StaticResource textDigital}"
                               FontSize="48"
                               Text="{Binding DialAngleHeading, Mode=OneWay, StringFormat='0'}" />
        </Grid>
      </Border>
    </Grid>
  </Grid>
</UserControl>