Displaying camera output to full screen in windows phone

Sometimes we might need to display the camera output as full screen on our windows phone but due to the difference between aspect ratio of the camera output and the phone screen, this poses as a slight challenge.

The first problem is that the mapped camera output is rotated vertically. The second problem is the aspect ratio.


The following code shows how to solve this: Xaml CSharp

The code-behind is a watered down version of setting up a camera. (There are checks to see if camera is supported, etc.)


  1.  Ensure the Canvas you are mapping the camera's video stream to is Verticalled Stretched.
  2. Set the CompositeTransform's CenterX and CenterY properties to .5 so when we set the rotation in code, it is done from the center.
  3. In the codebehind, the first thing we do when the camera is initialized is to move processing to the UI thread, hence the this.Dispatcher.BeginInvoke delegate.  this keyword ensures that the code is executed on the thread the CameraView PhoneApplication Page is running under. Without this, if we attempt to modify anything on the UI, we will get a cross thread exception.
  4. We then set the rotation of the canvas to the orientation of the camera.
  5. The final operation is to set the aspect ratio by using the first available resolution supported by the camera to calculate the width of the canvas.