Windows 8 AppDevelopment #0 – How it’s done in Windows Phone 7 today
September 5, 2011 1 Comment
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.
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.
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.