Lesson 5: More UI Design with XAML

Introduction

In the previous lesson, we examined basic controls for presenting textual information, whether read-only or gathering user input; utilizing images; and allowing the user to select from a collection of choices with controls such as RadioButtons or ToggleSwitches. This lesson will continue the look at XAML controls with a focus on organization of information via list containers. The list containers will become most useful when working with data. This lesson will introduce working with internal data collections, as well as using Language Integrated Query (LINQ) to manipulate the collection, while a future lesson will explore the use of external data sources. In this lesson you will also look at how to add an App Bar to a project and provide basic navigation between pages.

Instruction

Information presented to a user is often in a collection of like items and is best displayed as a list. There are several XAML list containers, including Stackpanels, ListBoxes, ComboBoxes, ListViews, Gridviews, and FlipViews. Many of these find their primary usefulness in data-driven projects. To demonstrate this, you will use internal data sources of arrays and collections in this lesson, and then will explore their use with external data sources in a future lesson.

ListViews and GridViews are used in the pages of the Grid App and Split App project templates. The multiple-page projects utilize interactions with these controls to navigate to other pages. You will briefly explore page navigation in this lesson as well.

App Bars provide contextualized button options for the user. You will examine the design guidelines for App Bars, look at how to add them to your project, and code their functionality.

Navigating Between Pages

In Lesson Three, you modified the starting page from MainPage to BasicDemo (a Basic template page). You achieved this by modifying a line of code in the App.xaml.cs or the App.xaml.vb document. Specifically, the code in C# was:

The statement in VB was:

Looking closer at the line of code reveals that the page was displayed using a Navigate method as part of the root.Frame container. The Frame object is the primary container for your app and supports navigation. BasicDemo, in the statements above, was the type of Page that you wanted to display. The Navigate method creates an instance of the Page as defined by its XAML and underlying language code. You saw that the Basic page object contained a default Back button. The Frame maintains a stack of the visited Page objects and has GoBack() and GoForward() methods to navigate linearly through the pages. The Frame object also provided Boolean properties of CanGoBack and CanGoForward to determine if the app can indeed navigate backwards or forwards through the display stack based on the current instance displayed. Thus, these properties could be used in a conditional structure to hide or show a back or forward button. In CV#, it might look like this:

The same structure written in Visual Basic would be:

The Frame object responds to Navigate, Navigating, and Navigated events. The active page responds to a OnNavigatingFrom event and the target page receives a OnNavigatingTo event call. The order of these events being triggered when navigating from PageA to PageB in the frame is the following:

This makes it easy to thwart navigation at various levels depending on specific conditions being met. For instance, if you wanted to allow navigation to a specific page, only during the hours of 9:00 am to 3:00 pm, the page's code could handle the OnNavigatingTo event in which the system clock would be read, and if it was less than 9:00 AM or greater than 3:00 PM, the operation could be cancelled.

To navigate between PageA to PageB, the code on PageA would be:

The arguments of this and Me in the above C# and VB statements can often be omitted. The GridView project discussed later utilizes the Navigate command to go between pages.

Examining XAML Controls (Part 2)

The Grid control from Lesson 4 is derived from the Panel control class. The StackPanel and Canvas controls also extend the Panel class and provide differing means of containing content. It might be easy to think of the StackPanel as being a list; however, while it resembles a list in its behavior, it does not maintain an Items class list.

You may have already used listboxes and comboboxes to develop Windows desktop applications. Listboxes and comboboxes also are available as Windows 8 XAML components, but there are disadvantages. Related challenges for Touch design include that the information is presented too closely for some users to make accurate selections. Listboxes largely were replaced by other List containers, most noticeably the ListView. The ListView contains built-in animations when adding, inserting, deleting, and selecting items that enhance the user experience over the older ListBox control. The ListView is preferred for touch devices because of the ability to make multiple selections without keyboard modifiers. Listviews present information in a vertically scrollable format. GridViews are similar to ListViews, but present information both vertically and horizontally and can be scrolled in both directions. FlipViews present one item at a time in a left-right scrollable view. The ListView, GridView, and FlipView are derivatives of the base ItemsControl. You might notice the ItemsControl in the ToolBox, but for the most part, the ItemsControl is just used to derive these more functional controls.

The StackPanel

The StackPanel is a container in which other objects may be placed. While it resembles a list display, it is really more of an organizational control. The StackPanel does not maintain an items list as the various ItemsControl-derived classes do. It is derived from the Panel class, as are Grids and Canvases. It may display its contents vertically (the default) or horizontally.

The FlipView

The FlipView is an ItemsControl that presents one item at a time and automatically provides the ability to scroll left or right (or up and down if configured) to see the previous or next item in the list.

The FlipView might be used to present the same images from the StackPanel demo. In this sense, it functions more as a Panel control. For mouse-controlled devices, scroll arrow buttons appear at the left and right.

The Canvas

The Canvas control is a fixed dimensional panel. It is often used as an interactive painting area, thus the name Canvas. The Canvas has its own coordinate system, and it is easiest to position objects in the Canvas using its coordinates. Using a Canvas lends itself well to a game where all the actions are not visible at one time.

ListBoxes and ComboBoxes

Windows 8 app ListBoxes and ComboBoxes function much like their desktop application counterparts. Both are derived from the ItemsControl class and thus display a collection of items. Item can be hardcoded in the XAML, added via user interaction using C# or VB coded instructions, bound to a database, or read from a text file.

The ListView Control

ListViews are preferred by most Windows Store developers to the ListBox control inherited from older versions of Windows. The spacing of items better supports touch devices. It also includes built-in animations when selecting, adding, or removing items.

GridView

Gridviews display data much like ListViews, but rather than one column of data, the GridView displays data in multiple columns. Data can be grouped together as well. The Start Screen utilizes a GridView to present all your installed apps. These can be grouped together and items also can be repositioned within the GridView if configured and programmed to allow for such behavior.

Using LINQ to Manipulate the Data

LINQ (Language Integrated Query) is a powerful and simple query language developed by Microsoft. It is similar to SQL (Structured Query Language) and is simple to use.

Using Language Integrated Query (LINQ)

LINQ is easy to use for a variety of data sources, including collections such as the ObservableCollection used in the previous project. For more information on LINQ, you can consult a C# or VB reference book, the Microsoft Developer Network (MSDN or the Internet.

Adding an App Bar

The App Bar provides users with additional commands (just like menu bars used to do in the past). They difference is that the App Bar commands are more streamlined. On a touch device, the user swipes up from the bottom with his or her finger or stylus. The App Bar(s) can be accessed using the following methods:

• With a mouse by right-clicking
• With the keyboard using the Windows key and the letter Z
• With the keyboard using the Shift key and the F10 function key

App Bars are tailored to the app and can be context-sensitive. They may be placed on the bottom and/or top of the app. This is in contrast to the Charms Bar, which is universal in all apps and settings and always contains the same five buttons. However, the content in the Charms bar may be modified for a specific app, such as placing settings information for the app in the Settings area of the Charms Bar.

Both the App Bar and Charms bar are designed to maintain a clean appearance to the app's environment and provide maximum real-estate where users can use the full screen for content. This is especially important for the user experience on lower-resolution devices.

App Bar Guidelines

App Bar buttons should not contain content that is critical to the mission of the app, such as performing a calculation. Such control should exist on the page itself. App Bars should follow Windows 8 conventions.

Practice

1. Re-create the Canvas drawing project (from "The Canvas" section in the Lesson 5 Guide) and then add an App bar for changing the brush color and brush size.
2. Create an app for a bakery that displays different types of cakes, cookies, and pies that they make. Incorporate an App Bar with buttons to display only the different cakes, only the different cookies, and only the various pies. Include a button to show all of the products. Your data collection should contain at least three of each type.

TIP: Use a custom class with an ObservableCollection to store the data, and use LINQ statements to sort the data. Add a second page that displays a map and contact information for the bakery.

Assignments

Complete the following:

• Quiz 5
• Assignment 5A (Building Directory)

Summary

Windows Store apps often consist of organized information. StackPanels provide a means of stacking controls vertically or horizontally and can be wrapped by a ScrollViewer control. Canvases are statically sized containers often used for drawing or for fixed-size games. While ListBoxes and ComboBoxes provide the same functionality as their desktop application cousins, most Windows Store developers prefer to use ListViews for horizontal organization and GridViews for displaying columns of list items. FlipView controls provide for the display of one data record or item at a time with the built-in capability of moving to the next or previous item in the collection. Collection data can be sorted and filtered using Language Integrated Query (LINQ) commands. These App Bars at the top and/or bottom of a Windows Store app provide access to commands while maintaining an uncluttered display.

Course Information

Additional Attributions