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.  Flip ViewerThe 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.

Share

About Jesse Liberty

Jesse Liberty is an independent consultant and programmer with three decades of experience writing and delivering software projects. He is the author of 2 dozen books and multiple Pluralsight courses, and has been a Senior Technical Evangelist for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS. He is a Xamarin Certified Mobile Developer and a Xamarin MVP, Microsoft MVP and Telerik MVP.
This entry was posted in Essentials, Observations, Patterns & Skills, Windows 8 and tagged . Bookmark the permalink.

4 Responses to Win 8–Some Things Are Just Too Easy

  1. Alek gembinski says:

    Problem with the flip viewer: If you set your items collection then set the selected item or index, you always momentarily see item[0] blink on before going to the correct index. Even checking the index/item before turning on the opacity will not work:
    FlipView.Opacity = 0;
    if (FlipView.SelectedItem == VM.Album.SelectedItem)
    {
    if (FlipView.SelectedIndex == VM.Album.Items.IndexOf(VM.Album.SelectedItem))
    {
    FlipView.Opacity = 1;
    }
    }
    we always see the item at position [0] flicker on before showing the correct item 🙁

    thoughts?

  2. Pingback: Adding Auto-suggestion to Metro Style App Search Contract | Cyan By Fuchsia

  3. Farhan says:

    Flipview is great control for Win8 Metro apps

  4. Pingback: Windows 8 Developer Links – 2012-07-16Dan Rigby | Dan Rigby

Leave a Reply

Your email address will not be published.