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 ;-)

New binding possibilities in Mango

Apart from all the goodness the new API’s in “Mango” bring us, there is that other great gift that it brings us: Silverlight 4. After spending so much time on Windows Phone 7 you would almost forget that there’s life after the ‘Silverlight 3+’ version that was the baseline up till now. This means for MVVMLight fans like me:

• You can now directly bind a command to a button’s “Command” property. In fact, you can bind a command to anything that derives from ButtonBase. This includes HyperlinkButton, RadioButton, and CheckBox (and possibly more). If you bind commands to these user interface elements, you can now say goodbye to your good old friends EventTrigger and EventToCommand
• If you want to use data from your model in a behavior, you can now bind directly bind data to dependency properties defined in the behavior itself, in stead of doing the attached dependency property dance, or resorting to the MVVMLight Messenger.

The first one saves a bucket load of XAML. Before Mango, you had to create something like this to fire a command by a button being clicked:

<Button Content="Start game">
  <Interactivity:Interaction.Triggers>
    <Interactivity:EventTrigger EventName="Click">
      <MvvmLight_Command:EventToCommand Command="{Binding StartNewGame, Mode=OneWay}"/>
    </Interactivity:EventTrigger>
  </Interactivity:Interaction.Triggers>
</Button>

Now you can write the same functionality like this:

<Button Content="Start game" Command="{Binding StartNewGame, Mode=OneWay}"/>

By no means this means the end of EventToCommand. First of all, it needs to be there for backward compatibility (unless you particularly like rewriting working XAML) .Second, there are plenty of cases for user interface elements that generate particular events that you might want to route to a model via a command. For example, I routinely signal my model a page has completed loading by attaching a command to it’s “Loaded” event. That still requires the EventTrigger-EventToCommand route.

For behaviors, the gain is a little bit less visible. But remember my little Windows Phone Drag/Flick behavior? That sports a dependency property BrakeSpeed that I could now bind to my ViewModel on all instances, thereby controlling all behaviors’ brake speed with one property. The same goes for my SetInitialOpacityBehavior, where I explicitly state that you cannot bind to its OpacityAfterLoading property:  “in Windows Phone 7 you cannot data bind it because it’s currently based on Silverlight 3 which only allow you to bind to classes that do descend from DependencyObject – which a behavior obviously does not ;-)”. Well, now you can, and this gives you a powerful and easy way to control behaviors from your ViewModel, and let behaviors push data back to it.

All in all, the ‘Silverlight4+’ in Windows Phone 7 “Mango”  gives us all the opportunities to make MVVMLight based applications even more easy and clean than they already were.