Yesterday at//build, Jesse Kaplan and I
delivered the Using Windows Runtime from C# and Visual
Basic talk.
In the talk, I demonstrated how natural and familiar it is to use WinRT
from C# by building a simple Metro style app. This app takes a picture
with a webcam and implements the share charm contract in less than 15
lines of C# code.
Instead of making you try and read code off the recorded video stream
that should be published soon, I’ve written this walkthru to explain
exactly what I did in that demo. In addition, I’ve started from scratch
(i.e. File->New Project) so that you can follow along at home if you
wish.
First, you need to install the Windows Developer
Preview. I
recommend the x64 version with tools. Scott Hanselman has a great write
up
on using boot to VHD to run the preview. (though I do disagree w/ his
assessment of dual boot. I’ve been dual booting Win7 and Win8 on my
laptop for months and it’s never ended in tears or blood). Also, you’re
going to need a webcam in order to run the app yourself.
Once the Windows Developer Preview is up and running, run the Socialite
app and login with your Facebook credentials. We’re going to use
Socialite to share the picture we take with the webcam. Giving it your
credentials up front makes the demo run smoother!
Next, fire up VS11 (aka Microsoft Visual Studio 11 Express for Windows
Developer Preview). Create a new project and select the Visual C# ->
Windows Metro Style -> Application template.
Once the new project has been created, you should be looking at the
MainPage.xaml file. Update the Grid element to contain a button and an
image.
<Grid x:Name="LayoutRoot" Background="#FF0C0C0C">
<Button x:Name="ClickMe" Click="ClickMe_Click">Click Me</Button>
<Image x:Name="Photo" Width="800" Height="600"
HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
Next, hover over the Click=”ClickMe_Click” attribute of the button,
right click and select “Navigate to Event Handler”. VS11 will take you
to MainPage.xaml.cs and automatically generate a skeleton event handler
for you.
In my //build session, I demonstrated that VS11 can automatically
resolve WinRT namespaces the same way that it resolves managed
namespaces. But for the purposes of this blog post, it’s easier if you
just add the additional using statements we’re going to need at the top
of MainPage.xaml.cs now.
using Windows.Media.Capture;
using Windows.Storage;
using Windows.UI.Xaml.Media.Imaging;
using Windows.ApplicationModel.DataTransfer;
using Windows.Storage.Streams;
Now, we add the code for ClickMe_Click:
private async void ClickMe_Click(object sender, RoutedEventArgs e)
{
var ui = new CameraCaptureUI();
ui.PhotoSettings.CroppedAspectRatio = new Size(4, 3);
var file = await ui.CaptureFileAsync(CameraCaptureUIMode.Photo);
if (file != null)
{
var stream = await file.OpenAsync(FileAccessMode.Read);
var bitmap = new BitmapImage();
bitmap.SetSource(stream);
Photo.Source = bitmap;
}
}
A few things to note about this code:
- Even though it’s using native WinRT libraries, the C# feels natural
and familiar – as if you were calling into traditional managed
libraries. We’re newing up classes, we’re passing in constructor
parameters, we’re using primitive numbers and enums, we’re assigning
properties, etc. That is very much by design.
- We’re using a couple of async WinRT methods (CaptureFileAsync and
OpenAsync). C# 5.0′s new await keyword to make it extremely easy to
write linear looking code that doesn’t block on async operations.
- No P/Invoke or COM Interop attributes anywhere to be seen!
Finally, before we can run this code we need to declare our intent to
use the webcam. Double click on the Package.appxmanifest file, click on
the “Capabilites” tab, and then check the Webcam checkbox.
With the capability declared, now we can run the app. Hit F5 and VS11
will compile and deploy the Metro style app you just built. Click the
button, acknowledge that you want to let the program use the webcam,
take a pic, crop it, and there it is in your UI!
For the second part of the demo, I added share contract support. Here’s
how to do that.
First, we need to pull the stream variable into class instance scope so
that we can access it in the share contract event handler. We do that by
adding a private IRandomAccessStream variable named stream and removing
the var declarations from the line where we call OpenAsync. The updated
click event handler looks like this:
//here's the instance scope stream variable
IRandomAccessStream stream;
private async void ClickMe_Click(object sender, RoutedEventArgs e)
{
var ui = new CameraCaptureUI();
ui.PhotoSettings.CroppedAspectRatio = new Size(4, 3);
var file = await ui.CaptureFileAsync(CameraCaptureUIMode.Photo);
if (file != null)
{
//the only change from the code above was to remove
//the var declaration from the following line
stream = await file.OpenAsync(FileAccessMode.Read);
var bitmap = new BitmapImage();
bitmap.SetSource(stream);
Photo.Source = bitmap;
}
}
Next, we need to wire up the share event handler in the XAML page’s
constructor. That’s a single line of code and VS11 intellisense writes
most of it for you
public MainPage()
{
InitializeComponent();
DataTransferManager.GetForCurrentView().DataRequested +=
new TypedEventHandler<DataTransferManager, DataRequestedEventArgs>(MainPage_DataRequested);
}
If you’ve ever wired up an event handler in C# before with VS, you’ll
be familiar with the “Press TAB to insert” the correct event handler
type followed by “TAB to generate handler”. Even though hthis is a WinRT
event, VS11 helps you wire it up just the same as it does for managed
events.
Now we implement the share contract event handler. That’s just a simple
if statement – calling args.Request.Data.SetBitmap if the user has taken
a picture and calling args.Request.FailWithDisplayText with an error
message if they have not.
private void MainPage_DataRequested(DataTransferManager sender,
DataRequestedEventArgs args)
{
if (stream == null)
args.Request.FailWithDisplayText("No picture taken!");
else
args.Request.Data.SetBitmap(stream);
}
This part of the demo shows off static methods and event
handlers. Again, note how natural and familiar it feels to use WinRT
from C#.
And we’re done, so hit F5 to build, deploy and run the app again.
I didn’t remember to do this in the //build talk, but first try
selecting the share contract before taking a picture. Windows will
display the “No picture taken” text in share contract window since the
user taken a picture to share yet. That’s pretty boring so dismiss the
share contract and take a picture like you did before. Then select the
share contract, select Socalite, write a pithy message and press “Share
in Facebook”.
That’s the entire demo! Taking a picture with the webcam, uploading to
facebook, calling native WinRT APIs from C# in a natural and familiar
way and all in just under 15 lines of code!
With our talk and demos, Jesse and I wanted to communicate just how
important C# and VB are in the overall developer story for Windows 8.
This demo shows off the hard work our two teams have done in order to
make sure the managed developer’s experience with Windows 8 was the best
that it could be. As I said in the talk – if you’re a managed developer,
you already know how to build these Metro style apps.
I know I said it
before, but I
really can’t wait to see what you guys build with Windows 8!
