Tag Archives: windows 8 applications

Using Standard Templates for ListView and GridView

Thumbnail for 559

When creating XAML applications using ListView and GridView controls for Windows 8, you probably want your applications to look like “standard” applications. You can reverse-engineer existing applications, but Microsoft makes it a little easier than that. In the documentation, if you search a bit, you’ll find two pages that list some sample, standard DataTemplate examples you can use for your own applications.

For the ListView control, look here: http://bit.ly/R8WUHy

For the GridView control, look here: http://bit.ly/Tc5JQG

You’ll find two problems with these templates. First, they include hard-coded text, and it’s up to you to replace the hard-coded text with binding expressions that work with your own data source. In addition, some of the templates don’t work well with “real” data, and you may need to modify them slightly to work with your bound data. In general, however, these templates can save you a lot of time. Review them all to see what Microsoft has provided. If there’s not an exact match for your application, you can at least use one of these as a starting place.

Thumbnail for 559Ken Getz is a Visual Studio expert with over 25 years of experience as a successful developer and consultant. He is a nationally recognized author and speaker, as well as a featured instructor for LearnNowOnline.

Windows 8 Progress Controls

windows 8 controls

XAML provides two controls specifically meant to indicate active progress, as some activity is running, to the user. The ProgressBar and ProgressRing controls can both display an indeterminate length for the activity, and the ProgressBar can display a specific value for its progress.

ProgressBar and ProgressRing

The ProgressBar control indicates the progress of an operation using one of two styles: Indeterminate, which displays a repeating pattern, or determinate, displaying specific values. Set the IsIndeterminate property to set the appearance of the ProgressBar control. When the property is False, the bar displays a specific value. In this state, you specify Minimum and Maximum properties for the ProgressBar. To specify progress, set the Value property.

The ProgressRing control works much like the ProgressBar control, except that it can only display in the indeterminate state. Use the IsActive property to control the visual state of the progress.

The figure below shows a determinate progress bar, with its value set for the purposes of the demo from a Slider control. The markup for those two controls looks like the following:


The figure below shows indeterminate ProgressBar and ProgressRing controls (it’s hard to capture these in action).


Windows8 progress bar


The following markup generated these controls:


Thumbnail for 559This post is an excerpt from the online courseware for our Windows 8 Applications Using XAML: Apps and UI course written by expert Ken Getz.

Creating State Handling Markup with XAML


When you create an application, your goal (besides ensuring that the application does what it needs to do) is to make sure that it looks good, and works well across a variety of form factors, display sizes, and view states. Your app should look good and work well on an 11″ tablet, a laptop screen, or a 30″ desktop monitor. It should look good and work well whether the screen is in portrait or landscape mode, whether it’s zoomed or not.

View States

In order to transition between views using XAML, you must use the ViewStateManager to define VisualState elements. The template includes four visual states:

  • FullScreenLandscape: Applies when the app is in full screen landscape mode. The application is designed for this layout, so you’ll rarely require any specific changes for this state.
  • Filled: Applies when the user has another application in Snapped view. For the sample application, there are no changes required for this state, either, although some applications might need specific markup for this state.
  • FullScreenPortrait: Applies when the user has rotated the screen to portrait mode. You might find that you need to modify your application to make the best use of this layout (that is, a screen that is taller than it is wide).
  • Snapped: Applies when the user has opened the application in Snapped view, taking up the smaller portion of a landscape screen. The Basic Page template provides different Back button and title styles for this mode. For the sample application, you will need to alter the layout to fit this view state.

The VisualStateManager element in XAML was created to support animations, but that’s not the point here. In other words, the Windows 8 designers doubledup on existing functionality, and it feels somewhat clumsy and overly complex. (Compare this mechanism to the similar functionality in JavaScript applications and you’ll certainly agree.)

One important thing to note: Changing state using the VisualStateManager mechanism only allows you to change property values of existing elements. You cannot add or delete elements using this infrastructure. Every element you’ll need, in any view, must exist in the markup before you run the application.

TIP: You can certainly write your own code to effect view state changes. The VisualStateManager element and its children only applies to declarative view state changes—that is, to choices you make at design time that don’t require any programming code.

Modifying Properties When State Changes

In order to modify properties when the view state changes, first find the VisualState element that corresponds to the new view state. Add a StoryBoard element if one doesn’t already exist, and within the StoryBoard element, add an ObjectAnimationUsingKeyFrames element for each property you want to change because the application has changed to the new view state.

As attributes of the ObjectAnimationWithKeyFrames element, set the StoryBoard.TargetName and StoryBoard.TargetProperty attributes, indicating the name of the element and the name of the property you want to change.

Finally, within the ObjectAnimationWithKeyFrames element, create a DiscreteObjectKeyFrame element describing the time for the change (generally, 0 seconds) and the new value of the property, in the KeyTime and Value attributes. (As you can see, this is possibly the most complex and unintuitive means of indicating a property change possible.)

Below, you’ll find markup which sets the Style property of the backButton element to the SnappedBackButtonStyle, when the view state changes to Snapped.

TIP: What if you need to add or remove controls? You can’t, at least, not using this mechanism. Instead, set the Visibility property of the element. Create all the markup you’ll ever need at design time, and show and hide things based on the view state.

Thumbnail for 557This post is an excerpt from the online courseware for our Windows 8 Applications Using XAML: Apps and UI course written by expert Ken Getz.

XAML Hierarchy of Resources


In XAML, every element maintains its own resources collection, and also has access to the resources collection of its parent elements. As with many other areas of programming, each element uses resources from the most local source. In other words, if you refer to a resource within a given element, it will first look at its own resources, then at its parent’s resources, then its parent’s parent’s resources, and so on.

Where does the search end? At the topmost level, each application can place references to resources at the application level, in the App.xaml file. If you refer to a resource in an element and the XAML parser can’t find the resource in the element or any of its parents, it looks as a last resort in this file—if it can’t find a match there, it gives up and raises an error.

Take a look at the ResourceHierarchy page. In this example, shown below, the markup defines two separate resources: BackgroundBrush is defined at the Page level, and StackPanelBackgroundBrush is defined at the StackPanel level.

The markup for the page resources looks like the following:

The markup for the content of the page looks like the following:

If you investigate the markup carefully, you’ll see that each button uses a different resource to supply its Background property. The first button uses LocalBackgroundBrush (a solid Pink brush), defined by its parent container.

The second button uses BackgroundBrush (a linear gradient with several gradient stops) defined in the page. The XAML parser resolved the background for the second button by looking in the Button, then the StackPanel, and then the page resources, where it found a match.

ldn-expertkgetzThis post is an excerpt from the online courseware for our Windows 8 Applications Using XAML: Apps and UI course written by expert Ken Getz.

Placing XAML Controls Onto the Grid

windows 8 training

One of XAML’s most important features is its ability to create hierarchies of controls; that is, the ability to nest controls inside other controls.

If you need to arrange content in two dimensions, the Grid control is your best choice. As a matter of fact, when Visual Studio creates a new project, it always places a Grid element as the only child control of the host Window element in the new form.

In this article, we’ll investigate programmatically setting the location of controls within the grid.

Placing Controls Onto the Grid

In addition to manually specifying the sizes for rows and columns within the Grid control, you can also allow child controls to determine the necessary sizes. If you like, you can have the grid rows and columns determine the sizes of the controls within the grid. Follow these steps to try out both situations.

1. From the Toolbox window, drag a Button control into the grid, in the middle cell (see below). Set the Name property for the Button to DemoButton.

2. Note the resulting XAML markup, which should look like the following:

As you might guess, the Grid.Column and Grid.Row attributes indicate the container for the control, and the Margin attribute indicates how far the control is from the edges of that container.

TIP: The Button control doesn’t supply the Grid.Column and Grid.Row properties—the Grid control supplies those properties, extending the set of properties of every control within the Grid.

3. Enlarge the button, and move it so that it spans two rows, as shown below. Note that the margin offsets are now measured from grid cells in two different rows, and that the Button’s Grid.RowSpan property has been set to 2.

xaml training

4. Note that the XAML markup for the button now looks something like this:

The markup now includes the Grid.RowSpan attribute (or Grid.ColumnSpan, if your control spans multiple columns). Based on this markup, XAML can determine that your control’s upper-left corner is in cell 1, 1; and that the control spans two rows. The Margin attribute’s values indicate offsets from the edges of the corresponding region within the grid. Modify the XAML markup for the button, so that the button spans only a single row, and has no margin settings (that is, it fills its entire container), and includes the content Click Me!.

5. The Figure below shows the results after making this change:

As mentioned previously, you can also force grid row and column sizes to fit their contents. To see that behavior, continue following these steps:

6. Modify the grid column widths, so that they’re all equal.

7. Again modify the column definitions, specifying a width of Auto for the middle row and column. The Figure below shows the resulting layout:

ldn-expertkgetzThis post is an excerpt from the online courseware for our Windows 8 Applications Using XAML: Apps and UI course written by expert Ken Getz.

Windows 8: The App Lifecycle

Windows 8 Application

You may have noticed that none of the built-in Windows 8 applications provide any means of shutting down. As a matter of fact, you should never include a means of shutting down a Windows 8 application—instead, you should allow Windows 8 to manage the life cycle of your application for you.

Windows 8 can load and run multiple applications, just like prior versions of Windows. Windows 8, however, uses intelligent management of apps, loading and unloading the applications as needed to conserve memory and battery power. You can switch between loaded apps, and you’ll never notice that Windows 8 may have suspended or terminated the application for you. You don’t need to worry about slowing down the system, or about battery drain. You don’t have a need to manually “kill” apps (unless you’re currently developing the app, of course—then you must be able to shut it down in order to modify and rebuild it).

As part of its management of applications, Windows 8 automatically suspends (and terminates, if necessary) applications. As you switch away from an application, Windows will suspend it after a period of time, restoring it immediately if you switch back to the application. In addition, Windows may terminate an application (if, perhaps, it can’t suspend within the allotted 5-second time frame). Well-designed applications can be suspended, terminated, and restarted and appear as if they were running the whole time. That’s the challenge for developers—making sure their applications respond to requests to be suspended by saving their state, so that they can be restored without loss of data.

WARNING! Although Windows 8 notifies your applications as it’s about to suspend the application, it does not notify applications when they’re being terminated. If you intend to save the state of your application, your code should include code to do so in the application’s OnSuspending override—that’s the only chance you get to save the application’s state.

Examine the App Lifecycle

It’s important to understand the states in any application’s lifecycle. Note these facts about the lifecycle of a Windows 8 application:

  • Activation marks the beginning of the app’s lifecycle.
  • At any point, an app can be running, suspended, or not running. It could also be in a transition state, either suspending or resuming.
  • Applications can be suspended when you switch away from them, to another application. They can also be suspended when Windows enters a low power state.
  • Suspended applications reside in memory, which allows for a quick resume.
  • When an app is suspended, it might be resumed at any time. Perhaps the user switches back to the application; it looks as if the application was running the entire time, to the user.
  • When terminated, an application stops running and is removed from memory.

Figure 1 diagrams the states and transitions for an application running Windows 8.

This post is an excerpt from the online courseware for our Windows 8 Applications Using XAML: Apps and UI course written by expert Ken Getz.

Distributing Windows 8 Applications: Getting Started

Although a complete discussion of distributing Windows 8 applications is beyond the scope of this introductory content, it’s important to understand that for most applications, you’ll use the Microsoft Store as your distribution channel. Like the Apple App Store, the Microsoft Store is a curated experience—that is, applications must be “vetted” before they’re released to the public.

In order to create a Windows 8 application that can be distributed in the Microsoft Store, you need a developer license from Visual Studio. This developer license allows you to install and test your application locally, before Microsoft tests and certifies it for distribution in the Microsoft Store. You’ll find more information about working with the developer license here: http://msdn.microsoft.com/en-us/library/windows/apps/hh974578.aspx.

The first time you attempt to create a Windows 8 application in Visual Studio 2012, you’ll see the dialog box shown in Figure 1. At this point, click I Agree, and then click Yes in the User Account Control dialog box should it appear, supply credentials from an existing Microsoft Account (or create a new one), and you’ll see the dialog box shown in Figure 2.

create a windows 8 developer license

Figure 1. Create a Developer License

windows 8 developer license

Figure 2. Success!

Given the developer license, you’re ready to start creating your first Windows 8 application.