Windows 8 AppDevelopment #0 – How it’s done in Windows Phone 7 today

Windows 8 lends a lot of user interface conventions and controls from the Windows Phone 7 Metro UI. In this post we’ll cover the AppBar, Panorama applications and pivot applications and how to code them today in Windows Phone 7. In future posts I’ll be going over other things like Theme Resources and Live Tiles.

Windows Phone 7 runs Silverlight-based applications where code is written in C# and the user interface in XAML so hopefully you have a basic knowledge of those. While the recommended approach for developing Windows 8 applications will be HTML5 with CSS3 and Javascript, Microsoft continues to say that you can “use what you know, do what you’ve always imagined”.

0: Basic Controls

This should be familiar to all Windows developers, but Windows Phone 7 (and Windows 8) exposes several default controls like Buttons, ListBoxes, TextBlocks, Checkboxes or Sliders. I won’t be going over how to use these controls – you should already know that, it’s exactly the same in WP7 as it is in .NET on Windows today – but I’ll show you an image showing how these controls look together with the XAML code.

1: AppBar 

The Application Bar, or AppBar for short is a horizontal bar that displays a series of commands represented by icons and additional commands represented with text. In a normal Windows Phone application, the AppBar code is already there but has been commented out. Uncomment, play with it and run to see how it looks.

Microsoft has secretly given you several (more precisely, a lot) of AppBar icons, you can find them on your C: drive in Program Files\Microsoft SDKs\Windows Phone\v7.*\Icons 

When using icons, make sure to set their Build Action to Content  otherwise you’d need to specify a different image URI, which is outside the scope of this article.

<pre>    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="appbar.check.rest.png" Text="Button 1"/>
            <shell:ApplicationBarIconButton IconUri="appbar.check.rest.png" Text="Button 2"/>
            <shell:ApplicationBarIconButton IconUri="appbar.check.rest.png" Text="Button 3"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
                <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
                <shell:ApplicationBarMenuItem Text="MenuItem 3"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar></pre>

2: Panorma Control

The panorama control gives you a panorama with different panels that the user can scroll through. This can be handy for applications like a weather app, where users can quickly scroll right or left to get to the information they want.

The Panorama control is surprisingly simple to create, there’s even a cool sample template available when you create a new project. This sample project contains a panorama control filled with content and a nice scrolling background. Removing all the unnecessary code reveals the main XAML for this panorama control:


<!--Panorama control-->
<controls:Panorama Name="pnm" Title="my application">
  <controls:Panorama.Background>
      <ImageBrush ImageSource="PanoramaBackground.png"/>
  </controls:Panorama.Background>

<controls:PanoramaItem Name="pnmFirst" Header="first item">
     <!-- CONTENT -->
  </controls:PanoramaItem>

  <controls:PanoramaItem Header="second item">
     <!-- CONTENT -->
  </controls:PanoramaItem>
</controls:Panorama>

The Title attribute of the panorama tag represents the  text that will be shown on screen. Only part of it is visible, the text will scroll as you move to panorama  to the left/right. Together with your background and content, this can give a nice (parallax) effect.  The PanoramaItem tag has a header attribute that will show up on screen. Inbetween this PanoramaItem you can place whatever controls you want.

It’s worth noting that when you swipe to a different panorama item, a small part of the other panorama item’s content is visible, active and clickable.  You can address the panorama and/or individual panorama items in code by giving it a Name attribute in XAML.

3: Pivot Control

The pivot control is a control that allows you to pivot trough different items by swiping to the right/left. The description sounds similar to a Panorama control but there are some differences. Unlike a panorama control, only the selected pivot’s “screen” is displayed. A pivot control is often handy when having lots of information, with the pivot as filters for that data. The best example I can give you is the mail application, which uses the pivot control to manage your email. A pivot control can also have a single AppBar.

Similar to the Panorama control, the pivot XAML code is again very easy. This code is also generated when you create the Pivot template application.

        <controls:Pivot Title="MY APPLICATION">
            <!--Pivot item one-->
            <controls:PivotItem Header="first">
            </controls:PivotItem>

            <!--Pivot item two-->
            <controls:PivotItem Header="second">
            </controls:PivotItem>
        </controls:Pivot>

It still remains unsure if Microsoft will fully support Metro App development for Windows 8 in WPF/Silverlight, but if they do (which is most likely) I’m sure these controls will be handled in the same way as Windows Phone 7 does today. Hopefully you liked this post and you’ll as excited about //BUILD as I am.

About these ads

About Nick
Guy, Gamer, Technology freak. I eat, sleep, game and dream... That's it basically!

One Response to Windows 8 AppDevelopment #0 – How it’s done in Windows Phone 7 today

  1. Iconomaniya says:

    Here are new Metro-style application bar icons for Windows Phone and
    Windows 8: http://www.iconsforwindows8.com;

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 576 other followers

%d bloggers like this: