ViewFinder Orientation With Windows Phone 7 Mango PhotoCamera

Question

I am using the PhotoCamera control with the Windows Phone 7 Mango Beta 2 development tools.

The "ViewFinder" for the camera control is a rectangle object filled with a VideoBrush, as in the example here:

http://msdn.microsoft.com/en-us/library/hh202956%28v=VS.92%29.aspx

My problem is that when I run the app on my phone, the ViewFinder image is always showing up rotated 90 degrees counter-clockwise. This is the case no matter how the phone is positioned.

Does anyone know how I can orient the ViewFinder correctly?

Answer 1

Yes, the orientation is something you'll need to manage with a Relative Transform:

<!--Camera viewfinder >-->
<Rectangle Grid.Row="1"
            x:Name="preview">
  <Rectangle.Fill>
    <VideoBrush x:Name="previewBrush">
      <VideoBrush.RelativeTransform>
        <CompositeTransform x:Name="previewTransform"
                            CenterX=".5"
                            CenterY=".5" />
      </VideoBrush.RelativeTransform>
    </VideoBrush>
  </Rectangle.Fill>
</Rectangle>

Then you can use the PhotoCamera class to determine how you want to rotate it:

double cameraRotation = theCamera.Orientation;

// Use the orientation to determine how to transform 
// the camera preview
previewTransform.Rotation = theCamera.Orientation + 90.0; // Landscape? 

HTH

Answer 2

Adding more clarification to the answer: One thing the documentation describes that isn't mentioned here is that the relative transform is adjusted in the OnOrientationChanged event. Another difference is that the relative transform isn't specified in the XAML.

In the docs (How to: Create a Base Camera Application for Windows Phone), the rectangle is filled with the videobrush as follows:

<!--Camera viewfinder >-->
<Rectangle Width="640" Height="480" 
           HorizontalAlignment="Left" 
           x:Name="viewfinderContainer">

    <Rectangle.Fill>
        <VideoBrush x:Name="viewfinderBrush" />
    </Rectangle.Fill>
</Rectangle>

Then, in the code-behind, the OnOrientationChanged event rotates the rectangle based on orientation:

    // Ensure that the viewfinder is upright in LandscapeRight.
    protected override void OnOrientationChanged(OrientationChangedEventArgs e)
    {
        if (e.Orientation == PageOrientation.LandscapeRight)
        {
            viewfinderBrush.RelativeTransform =
                new CompositeTransform() { CenterX = 0.5, CenterY = 0.5, Rotation = 180 };
        }
        else
        {
            viewfinderBrush.RelativeTransform =
                new CompositeTransform() { CenterX = 0.5, CenterY = 0.5, Rotation = 0 };
        }

        base.OnOrientationChanged(e);
    }

The code in this topic (which corresponds to the sample) is configured to only use landscape orientation, maybe this is why you're only getting landscape images(?) At the beginning, the following attributes are added to the phone:PhoneApplicationPage element in MainPage.xaml:

SupportedOrientations="Landscape" Orientation="LandscapeLeft"

If you are still getting images orientated incorrectly, sync your images to your PC and see if they're oriented correctly while viewing them there (on your PC). It could be a bug with the Beta that is causing the image to not appear correctly on the device.

Hope that helps. Cheers

Answer 3

You do not need to do that much code, assuming you are in portrait mode, just call:

viewfinderBrush.RelativeTransform 
    = new CompositeTransform() { CenterX = 0.5, CenterY = 0.5, Rotation = 90 };

But of course, whatever orientation you use for the viewfinder, the resulting image IS still in landscape! Does anybody have an idea how to best fix this?