Search

This is part 7 of the series “Silverlight in Action”:

1. Visuals staring at the mouse cursor.
2. Floating Visual Elements.
3. Flipping Panels.
4. Flying objects against you.
5. Smoke effect
6. Book Folding effect using Pixel Shader.
7. Navigation in 3D world of 2D objects 
8. Animated navigation between Pages

Here we’re sharing our experience from the amazing CompletIT web site.

Introduction

It’s always complicated, when you have to deal with 3D objects. No matter what environment and framework you choose, you’ll need to learn a lot of complicated structures and procedures in order to implement even a simple scenario.

One of my favourite features in WPF is the ability to have it automagically wire up a databound object (often a ViewModel) to a particular DataTemplate. A lot of people really miss this feature when using Silverlight as it's still missing from the latest version (Silverlight 4 at the time of writing).

Folk have blogged a number of bespoke solutions, including one by my colleague Rob Garfoot: Flexible Data Template Support in Silverlight.

Out of the box, the Windows Phone 7 tools give you a pretty good starting place for your application. The List template is based on the MVVM pattern, includes some sample code to help you better visualize your solution, and two pages to get you started: main page (list of items) and details page (details for an item). In this post we’ll explore the page navigation options available to the WP7 developer, starting with the OOB experience.

Toaday I got a comment from a blog reader named Fracisco…I think he wanted to know how to load new pages into a Silverlight website.  Just for him, and because I think many of you have the same problem, I made a video tutorial where I show you how to:

1. Create a Content Holder UserControl;

2. Make two pages called HomePage and AboutUs;

3. In App.xaml load ContentHolder instead of MainPage.xaml (the default action of a SL app) [...]

In this video tutorial I show you how to use Behaviors and the Visual State Manager to create a navigation bar that slides in when the user places their mouse at the top of the page and then slides away when they move their mouse away from the navigation.

Windows Phone 7 supports the built-in Silverlight Frame/Page navigation system, which is easy to use and maintain. Unfortunately, it’s not as slick-looking as the panorama navigation shown in all the phone demos.

Sooner or later there will be a few panorama implementations floating out there, but I still think that Frame/Page navigation has its place; firstly, not all applications suit the panorama concept (eg; master-details relationships), and secondly, it just feels like a cleaner separation of UI elements.

I was reading through the UI Design and Interaction Guide for Windows Phone 7 Series and found out that there is currently no panoramic application template or control provided as part of the standard application platform. Nothing stops us from creating our own though.

To allow people to continue browsing your site whilst opening links of interest, you might want to open new links in separate windows, or in most cases, separate tabs (new windows are so 2004).

In your codebehind, create a quick HtmlPopupWindowOptions object. This object is reusable if you don’t mind using the same settings for all your new windows. In this example, I’m using a twitter button to open a popup version of my twitter stream.

The examples in this blog post uses the Silverlight Business Application template shipped with WCF RIA Services. The Navigation feature in Silverlight uses by default the name of a View to show, so I decided to use the same in the web.sitemap file. The Business Application by default will have two hardcoded hyperlinks at the top of the screen, the Home and About. I decided to reuse the same Views and names.