Win 8–Some Things Are Just Too Easy

Okay, like everyone else I know, I’m writing a book on Win 8.  Actually, two books.  The first, which will be very short, will be on XAML from absolute scratch for Win 8 (not the title!) and the second is Programming Windows 8 with XAML and C# by APress

The first book is forcing me to go back and look at  XAML through novice eyes, which is a great exercise in and of itself.

I tend to live and breath XAML – I was very involved with Silverlight, WPF and WinPhone evangelism at Microsoft, and am again at Telerik.  Beyond that, while I’m looking at the HTML5/JS version of Metro programming, I am spending most of my Win8 cycles with XMAL/C#. And so far, by the way, everyone I know who is doing both agrees that XAML/C# programming is hugely more productive.

All of this is by way of introduction to the observation that some things in XAML are blazingly easy, once you know how (ah, yes, once you know how!)

For example, you can build a killer photo browser with just a few lines of XAML (and possibly a few lines of C#).  Will this be your finished product, ready for the marketplace? Well, no, but it will get you 75% of the way.

<FlipView Name="xFlipView">
     <Image
         Source="images/Alnwick.jpg" />
     <Image
         Source="images/kings.jpg" />
     <Image
         Source="images/maine.jpg" />
     <Image
         Source="images/peace.jpg" />
 </FlipView>

This small block of code is sufficient to display these four images one by one allowing the user to move from one to the next with the flick of a finger or the click of a mouse. (You will, of course, want to replace the names of the jpeg files with the names of your own photos.)

If you have more than a handful of images, however, you will want to assign a collection to the flipview, which you can do through its ItemsSource property. To illustrate this, here is some dummy code that creates a collection of images and then hands them over to the FlipView.

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    var images = new List<Image>();

    var img = new Image();
    img.Source = new BitmapImage( new Uri( this.BaseUri, @"images/alnwick.jpg" ) );
    images.Add( img );

    images.Add( new Image() { Source = new BitmapImage( new Uri( this.BaseUri, @"images/kings.jpg" ) ) } );
    images.Add( new Image() { Source = new BitmapImage( new Uri( this.BaseUri, @"images/maine.jpg" ) ) } );
    images.Add( new Image() { Source = new BitmapImage( new Uri( this.BaseUri, @"images/peace.jpg" ) ) } );
    images.Add( new Image() { Source = new BitmapImage( new Uri( this.BaseUri, @"images/round.jpg" ) ) } );
    images.Add( new Image() { Source = new BitmapImage( new Uri( this.BaseUri, @"images/sheep.jpg" ) ) } );

    xFlipView.ItemsSource = images;

}

You can see that the only work the FlipView requires is the one line in which we assign the collection to the ItemsSource property. 

My point, of course, is that with just this little bit of work you get a truly beautiful presentation of your photos.  You can then go on to create item templates to control how the items are presented, and you can style and etc. your FlipView control, but with just the bit shown here you already have something quite good.

As I go through the various controls, I find that a lot of them give you quite a bit of functionality right out of the box, with minimal fuss.  I’ll report on some others in coming days.