CompassVO/CompassVO/MainPage.xaml

<phone:PhoneApplicationPage
    x:Class="CompassVO.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:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Preview="clr-namespace:Phone7.Fx.Preview;assembly=Phone7.Fx.Preview"
    xmlns:Views="clr-namespace:CompassVO.Views"
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    xmlns:GalaSoft_MvvmLight_Command="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Platform"
    mc:Ignorable="d"
    d:DesignWidth="480"
    d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait"
    Orientation="Portrait"
    shell:SystemTray.IsVisible="True"
    Unloaded="PhoneApplicationPage_Unloaded"
    DataContext="{Binding Main, Source={StaticResource Locator}}"
    BackKeyPress="PhoneApplicationPage_BackKeyPress">

  <i:Interaction.Triggers>
    <i:EventTrigger EventName="Loaded">
      <GalaSoft_MvvmLight_Command:EventToCommand Command="{Binding Main.MainPageLoaded, Mode=OneWay, Source={StaticResource Locator}}" />
    </i:EventTrigger>
  </i:Interaction.Triggers>

  <!--LayoutRoot is the root grid where all page content is placed-->
  <Grid x:Name="LayoutRoot"
          Background="White">

    <!--ContentPanel - place additional content here-->
    <Grid x:Name="ContentPanel"
              Grid.Row="0"
              Margin="0"
              DoubleTap="ContentPanel_DoubleTap"
              ManipulationStarted="ContentPanel_ManipulationStarted"
              ManipulationDelta="ContentPanel_ManipulationDelta"
              ManipulationCompleted="ContentPanel_ManipulationCompleted">

      <toolkit:GestureService.GestureListener>
        <toolkit:GestureListener x:Name="gl"
                                         DragStarted="gl_DragStarted"
                                         DragDelta="gl_DragDelta"
                                         PinchStarted="gl_PinchStarted"
                                         PinchDelta="gl_PinchDelta" />
      </toolkit:GestureService.GestureListener>

      <Grid Visibility="{Binding IsLoading, Converter={StaticResource BooleanToVisibilityConverter}}">
        <TextBlock Foreground="Black"
                           HorizontalAlignment="Center"
                           VerticalAlignment="Center"
                           FontSize="24">
                    Loading ...
        </TextBlock>
      </Grid>

      <Canvas x:Name="viewfinderCanvas"
                    Margin="0"
                    Width="1066"
                    Height="800"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    Visibility="{Binding IsCameraActive, Converter={StaticResource BooleanToVisibilityConverter}}">

        <!--Camera viewfinder -->
        <Canvas.Background>
          <VideoBrush x:Name="viewfinderBrush"
                                Stretch="UniformToFill">
          </VideoBrush>
        </Canvas.Background>
        <Canvas.RenderTransform>
          <RotateTransform Angle="90"
                                     CenterX="533"
                                     CenterY="400"></RotateTransform>
        </Canvas.RenderTransform>
      </Canvas>

      <Grid>
        <Canvas x:Name="viewPhoto"
                        Margin="0"
                        Width="1"
                        Height="1"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        Visibility="{Binding HasPhoto, Converter={StaticResource BooleanToVisibilityConverter}}">

          <!--Camera Photo -->
          <Image x:Name="backPhoto"
                           CacheMode="BitmapCache">
            <Image.RenderTransform>
              <TransformGroup>
                <TranslateTransform X="{Binding PhotoOffsetX}"
                                                    Y="{Binding PhotoOffsetY}" />
                <RotateTransform Angle="{Binding PhotoAngle}"
                                                 CenterX="0"
                                                 CenterY="0" />
                <ScaleTransform ScaleX="{Binding PhotoScale}"
                                                ScaleY="{Binding PhotoScale}"
                                                CenterX="0"
                                                CenterY="0" />
              </TransformGroup>
            </Image.RenderTransform>
          </Image>
        </Canvas>
      </Grid>

      <Grid x:Name="compassContainer"
                  Opacity="{Binding CompasUIOpacity}">
      </Grid>

      <Grid HorizontalAlignment="Stretch"
                  VerticalAlignment="Stretch"
                  Margin="0"
                  Background="Transparent" />

      <!--all status messages-->
      <Grid HorizontalAlignment="Stretch"
                  VerticalAlignment="Stretch">
        <!--camera init-->
        <Border CornerRadius="6"
                        BorderThickness="2"
                        BorderBrush="DarkGray"
                        Background="White"
                        VerticalAlignment="Center"
                        HorizontalAlignment="Center"
                        Visibility="{Binding IsInitCamera, Converter={StaticResource BooleanToVisibilityConverter}}">
          <Grid Margin="24">
            <TextBlock Foreground="Black"
                                   HorizontalAlignment="Center"
                                   VerticalAlignment="Center"
                                   Margin="0"
                                   FontSize="22">Starting camera ...</TextBlock>
          </Grid>
        </Border>
        <!--saving photo-->
        <Border CornerRadius="6"
                        BorderThickness="2"
                        BorderBrush="DarkGray"
                        Background="White"
                        VerticalAlignment="Center"
                        HorizontalAlignment="Center"
                        Visibility="{Binding IsSavingPhoto, Converter={StaticResource BooleanToVisibilityConverter}}">
          <Grid Margin="24">
            <TextBlock Foreground="Black"
                                   HorizontalAlignment="Center"
                                   VerticalAlignment="Center"
                                   Margin="0"
                                   FontSize="22">Saving photo ...</TextBlock>
          </Grid>
        </Border>
        <!--image editing-->
        <Image Source="/Images/pinch_zoom_72.png"
                       Stretch="None"
                       VerticalAlignment="Top"
                       HorizontalAlignment="Left"
                       Margin="12"
                       Visibility="{Binding HasPhotoAndEditImage, Converter={StaticResource BooleanToVisibilityConverter}}"></Image>
      </Grid>
    </Grid>

    <!--Calibration UI-->
    <Grid x:Name="winCalibration"
        Visibility="{Binding NeedsCalibration,Converter={StaticResource BooleanToVisibilityConverter}}">
      <Border Background="Black">
        <Views:compass_calibration x:Name="pnlCalibration"
                                           Width="380"
                                           Height="600" />
      </Border>
    </Grid>

    <!--app bar-->
    <Preview:BindableApplicationBar x:Name="AppBar"
                                        BarOpacity="0.8"
                                        IsMenuEnabled="True">
    </Preview:BindableApplicationBar>
  </Grid>

</phone:PhoneApplicationPage>