Jesse Liberty - Silverlight Geek

Web Cast and Digging Deeper

Today I had the pleasure of presenting a web cast on building an application with more than one page and passing data among those pages. I have 2 videos on this topic, so if you missed the web cast and are interested, you may find this first video on switching pages of interest, and the second video should be posted soon.

Multi-Page In A Nutshell

The premise is that there is a third page that has no content and when it is time to display one of your pages, you make the page you want to display (which is, after all, a UserControl) the content of that third page (I’ve chosen to name the third page PageSwitcher but of course you may call it anything you like. PageSwitcher has a method, Navigate that takes a UserControl and makes whatever you pass in, its content.  The implementation for the button on each page is to make the page you are switching to the new content.

Passing Values

Because we destroy the current page when we replace it (to conserve on client-side resources) if we wish to pass information (such as the book name, authors, whether the book is published and whether or not it is fiction) the easiest way is to make PageSwitcher the temporary repository; and the most efficient way to do that is to overload the navigate method to take an Object so that you may pass in anything at all, and then fish it out when your new page is loaded (very effective, very efficient and not at all type safe!).

To see this at work, assume the user has filled out the fields as shown in Page 1 and clicked switch. The event handler for the button might look a bit like this:

void SwitchButton_Click( object sender, RoutedEventArgs e )
{
   PageSwitcher ps = this.Parent as PageSwitcher;
   if ( ps != null )
   {
      Book b = new Book();
      b.BookName = BookName.Text;
      b.Authors = Authors.Text;
      b.isPublished = IsPublished.IsChecked == true;
      b.isFiction = Fiction.IsChecked == true;
      ps.Navigate( new Page2(),b );
   }

We know that our “parent” is the PageSwitcher as we are its content, and so the cast is safe (but being good o-o programmers we check (Доверяй, но проверяй)

We then spin up a Book instance (defined off camera and fill in the properties from the user-filled in fields and then call the overloaded Navigate method, providing a new instance of Page2 and our newly filled in book.

We trust PageSwitcher to (a) abandon Page.xaml and make Page2 its content and to hold onto whatever we’ve passed it until Page2 asks for it (think Secretkeeper in Harry Potter).

When Page2 is safely established, it asks PageSwitcher if there are any little presents waiting, like this:

void Page2_Loaded( object sender, RoutedEventArgs e )
{
   PageSwitcher ps = this.Parent as PageSwitcher;
   if ( ps != null )
   {
      if ( ps.SwitcherTag != null )
      {
         Book b = ps.SwitcherTag as Book; 
         
         string isPublished = string.Empty;
         if ( b.isPublished == false)
         {
            isPublished = " not ";
         }
         string isFiction = b.isFiction ? " is Fiction " : "is non-fiction";

         BodyText.Text = "Found " + b.BookName + " written by " +
            b.Authors + ". The book is " + isPublished + " published and " + isFiction;
      }
      SwitchButton.Click += new RoutedEventHandler( SwitchButton_Click );
   }

That is, if you are my parent (and you are) do you have anything tucked away in your SwitcherTag property. (“Whats it gots in its pocketses?”) If so, I happen to know that it is a really a book object, and it is my book object and gimme.

Now all of that is fine and good but we’ve been here before. One of the viewers asked if I could show how to pick among 4 pages, and by the way could my buttons look cooler. So, instead of working on my chapter, which I really have to do, I spent the past four hours creating a new version that has bouncy buttons with images that take you to four different pages.

It’s wicked easy to do if (and only if) you are willing to make 4 templates. If you want one template, well then my friend you have to figure out how to expose not only the content property that button has, but the image source property that button doesn’t have, and the short answer is you can’t unless you are willing to sub-class, and that means a custom control and that is a lesson for another day (quite soon actually – I have a WebCast coming on that on August 27

So, compromising and creating 4 templated buttons (yuck but what can I say?) I did make them bounce (they look a bit like they want to be on the Mac dock but don’t tell anyone) I do have an application that combines Skinning and multiple pages, and transferring data and in-state animation which I will turn into a video because, frankly, it is too late at night to continue that story here.

But here’s a picture (doesn’t bounce much and the first button is disabled)

Stay tuned for the video walkthrough and then for the real-deal: skinnable custom controls (after which we can re-do this with one template).

thanks again.

-j

PS: the two books shown are highly recommended, but have nothing to do with the topic at hand.

	Look Both Ways: Bisexual Politics by Jennifer Baumgardner Read more about this title...
	Pillar of Fire : America in the King Years 1963-65 (America in the King Years) by Taylor Branch Read more about this title...