<phone:PhoneApplicationPage x:Class="WindowsPhoneApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:local="clr-namespace:WindowsPhoneApp"
    SupportedOrientations="Portrait">
  <Grid>
    <Grid.Background>
      <!-- The metallic background -->
      <ImageBrush ImageSource="Images/background.png"/>
    </Grid.Background>

    <!-- The four lines in the middle that don't move -->
    <Line Y1="240" Y2="290" X1="240" X2="240" Stroke="#555" StrokeThickness="6"/>
    <Line Y1="510" Y2="560" X1="240" X2="240" Stroke="#555" StrokeThickness="6"/>
    <Line Y1="400" Y2="400" X1="80" X2="130" Stroke="#555" StrokeThickness="6"/>
    <Line Y1="400" Y2="400" X1="350" X2="400" Stroke="#555" StrokeThickness="6"/>

    <!-- The four lines that tilt based on the phone's angle -->
    <Canvas RenderTransformOrigin=".5,.5" Width="480" Height="800">
      <Canvas.RenderTransform>
        <RotateTransform x:Name="CenterTransform" Angle="45"/>
      </Canvas.RenderTransform>
      <Line Y1="240" Y2="290" X1="240" X2="240"
            Stroke="{StaticResource PhoneAccentBrush}" StrokeThickness="6"/>
      <Line Y1="510" Y2="560" X1="240" X2="240"
            Stroke="{StaticResource PhoneAccentBrush}" StrokeThickness="6"/>
      <Line Y1="400" Y2="400" X1="80" X2="130"
            Stroke="{StaticResource PhoneAccentBrush}" StrokeThickness="6"/>
      <Line Y1="400" Y2="400" X1="350" X2="400"
            Stroke="{StaticResource PhoneAccentBrush}" StrokeThickness="6"/>
    </Canvas>

    <!-- The display for the exact angle -->
    <TextBlock x:Name="AngleTextBlock" Foreground="#555"
               HorizontalAlignment="Center" VerticalAlignment="Center"
               FontSize="{StaticResource PhoneFontSizeExtraExtraLarge}"
               RenderTransformOrigin=".5,.5">
      <TextBlock.RenderTransform>
        <RotateTransform x:Name="AngleTextBlockTransform"/>
      </TextBlock.RenderTransform>
    </TextBlock>

    <!-- The circle in the center -->
    <Ellipse Width="220" Height="220" Stroke="#555" StrokeThickness="6"/>

    <!-- The four bubble level displays -->

    <local:BubbleWindow x:Name="TopWindow" Width="275" Height="75"
                        VerticalAlignment="Top"/>

    <local:BubbleWindow x:Name="BottomWindow" Width="275" Height="75"
                        VerticalAlignment="Bottom"/>

    <local:BubbleWindow x:Name="LeftWindow" Width="622" Height="75"
     HorizontalAlignment="Left" Margin="-274,0,0,0" RenderTransformOrigin=".5,.5">
      <local:BubbleWindow.RenderTransform>
        <CompositeTransform Rotation="-90"/>
      </local:BubbleWindow.RenderTransform>
    </local:BubbleWindow>

    <local:BubbleWindow x:Name="RightWindow" Width="622" Height="75"
    HorizontalAlignment="Right" Margin="0,0,-274,0" RenderTransformOrigin=".5,.5">
      <local:BubbleWindow.RenderTransform>
        <CompositeTransform Rotation="-90"/>
      </local:BubbleWindow.RenderTransform>
    </local:BubbleWindow>

    <!-- The calibrate pseudo-button that tilts based on the phone's angle -->
    <Border Margin="0,0,0,120" HorizontalAlignment="Center"
            VerticalAlignment="Bottom" local:Tilt.IsEnabled="True"
            MouseLeftButtonUp="Calibrate_MouseLeftButtonUp">
      <TextBlock Text="calibrate" Padding="36" Foreground="#555"
               FontSize="{StaticResource PhoneFontSizeExtraLarge}"
               RenderTransformOrigin=".5,.5">
      <TextBlock.RenderTransform>
        <RotateTransform x:Name="CalibrateTextBlockTransform"/>
      </TextBlock.RenderTransform>
      </TextBlock>
    </Border>
  </Grid>
</phone:PhoneApplicationPage>