Mango ‘Augmented Reality’ 101: showing a video background

Some things on Windows Phone 7.5 “Mango” are so easy that it’s almost embarrassing. Like showing a running video of what the camera is seeing on the background. So simple, in fact, that no-one ventures to describe it. And consequently, you might spend some fruitless time looking for it. I am therefore very thankful to Matthijs Hoekstra for sending me a piece of sample code that I condensed even more.

First, you need to make a new Windows Phone application for framework 7.1. In the MainPage.xaml, delete everything between the phone:PhoneApplicationPage, i.e. the complete grid “LayoutRoot”

Then, set SupportedOrientations and Orientation to "Portrait" and  shell:SystemTray.IsVisible to “False”

Then you add the following XAML code:

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

And then you make sure the following code is in the MainPage.xaml.cs:

public MainPage()
{
  InitializeComponent();
  Loaded += MainPage_Loaded;
}

void MainPage_Loaded(object sender, RoutedEventArgs e)
{
  var cam = new PhotoCamera();
  videoBrush.SetSource(cam);
}

Deploy the app, and you will see the camera view on your screen. See what I mean by “embarrassingly simple”? Now do something funny with it ;-)