courses I tutorials

Explore different tutorials to get hands on with Silverlight and Expression Blend across a wide array of topics in a short time.

Windows Phone Series

This series of tutorials delves into Silverlight’s container controls and layout controls specific to Windows Phone.

Layout Controls Overview
Working with the Panorama Control
Working with the Pivot Control
Taking Advantage of Fluid UI

Layout Tips and Tricks for Windows Phone

One of the more powerful features that Silverlight offers you is an array of container controls providing a simple way to accomplish the layout of your dynamic applications. These controls range from the very simple Canvas to the powerful Grid and include a few unique container controls made specifically for the Windows Phone.

In this tutorial, you will be given an overview on when and how to use each container control. Additionally, the concept of Fluid UI will be introduced, which provides an easy way to add dynamic animations. Find more information about the Fluid Layout feature in the Introduction to Fluid UI tutorial.

Follow along with this tutorial by downloading the WP7_Layout_Tips_Assets folder.

Layout Controls Overview

Each container control has its own layout functionality and use in different situations. In this lesson you will walk through the common container controls and a few features unique to the Windows Phone.

What's covered in this video:

Common Container Controls
Smooth Scrolling
More Controls found in the Toolkit

Working with the Panorama Control

The Panorama control is new to Silverlight and is a great example of the Windows design guidelines in action. The Panorama provides a way to browse or explore functionality within an application. By aggregating a slice of the different experiences within the application, the Panorama gives you a high-level overview of the detailed tasks available.

In this lesson, you will review the design guidelines and walkthrough a custom implementation of the Panorama control.

What's covered in this video:

Panorama Design Guidelines
Adding Panorama Items
Setting the Background Image

Working with the Pivot Control

The Pivot control is a quick way to access multiple views of data or your application. Opposite of the Panorama control, the Pivot is an “I need to get something done” control used for efficient, focused and habitual tasks.

In this lesson, you will review the design guidelines and walkthrough a custom implementation of the Pivot control.

What's covered in this video:

Pivot Design Guidelines
Adding Pivot Items
Changing the default Start Item

Taking Advantage of Fluid UI

Although Silverlight provides all of the hooks for you to be able to animate elements across the screen when layout changes, the code needed to do this can be complex. Thankfully, the concept of Fluid UI, or mechanisms that make this type of animation easier, have been made available for you to use. By using Fluid UI components, you can spend more time on the design of your application with the same dynamic results during layout change.

In this lesson, you will learn how to implement the three types of Fluid UI available: FluidLayout, FluidMove and the LayoutStates of a ListBoxItem.

What's covered in this video:

FluidLayout for Visual States
FluidMove Behavior
LayoutStates of the ListBoxItem

Conclusion

In this section, an overview of all of the container controls has been provided, along with design guidelines and implementations for each control. You were also given a look at Fluid UI, an easy and elegant way to animate elements during layout change.