This is part 1 of my Silverlight 3 Feature By Feature series of blog posts.

No More Blank Slate

The first thing you may try after installing the Silverlight 3 Beta 1 Tools is creating a new Silverlight application. There is a new project template available called Silverlight Navigation Application. Using this project template creates a Silverlight project with a few things already set up for you. This is a departure from what we've had so far - a blank slate that is intimidating and doesn't really help new developers.

The new project contains the typical App.xaml but now with a bunch styles used in the main page. The MainPage.xaml is a generic, but nice looking, layout for an example Silverlight application. There are links to the Home and About views, which are both located in the Views folder of the project along with a view reserved for errors.

Running the application without any changes shows the full page Silverlight application. Click on the links will change the URL in your browser and update the browsing history. You can use these URLs to go to a specific view. For example, from the About view copy the URL, then open an alternative browser and paste in the URL. Viola! Deep linking!

How It Works

The trick to the navigation, as implemented in the project template, is the Frame control in MainPage.xaml.

   1: <UserControl x:Class="SilverlightNavigation.MainPage"

   2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   4:     xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation">

   5: ...

   6:     <navigation:Frame x:Name="Frame" Source="/Views/HomePage.xaml"

   7:                   HorizontalContentAlignment="Stretch"

   8:                   VerticalContentAlignment="Stretch"

   9:                   Padding="15,10,15,10"

  10:                   Background="White"/>

  11: ...

  12: </UserControl>

In particular, notice the navigation namespace. The project has a reference to the System.Windows.Controls.Navigation assembly which contains new controls and other things used for navigation.

The Frame is instructed to navigate in the Click event handler of the buttons.

   1: private void NavButton_Click(object sender, RoutedEventArgs e)

   2: {

   3:     Button navigationButton = sender as Button;

   4:     String goToPage = navigationButton.Tag.ToString();

   5:     this.Frame.Navigate(new Uri(goToPage, UriKind.Relative));

   6: }

I don’t exactly like the method of storing the destination page in the buttons’ Tag property, but that could easily be encapsulated by a custom NavigationButton control. Perhaps we’ll get one before RTW? I’ll definitely have to expand on this in a separate blog post.

HomePage.xaml and AboutPage.xaml are both Page objects instead of UserControl, which is typically the base control of new XAML files in a Silverlight 2 project. Its easy enough to add new navigable content to your application. Just add a new item to your project, and choose the Silverlight Page template in the Add New Item dialog.

Custom Navigation

What I wanted to do with my Silverlight Overview application was have a tree view control listing all of the examples, and each of these example pages showing up as a unique URL so I could link to a specific example. My original Silverlight Demo application had examples split into tab controls. Each tab was a separate XAML file. I could have modified these to be a Page instead of UserControl, but I wanted to break them down further and didn’t relish the thought of having 30+ Page files.

Using Reflector, I found that the Frame control’s Navigate method is using the NavigationService. Looking into this code wasn’t leading me anywhere so I decided to look at the Silverlight 3 documentation on MSDN. Interestingly, the only page that I found related to navigation, Navigation Overview, hasn’t been updated for Silverlight 3 and contains incorrect information. Finally I found Tim Heuer’s Navigation Framework screencast and blog post which shows how to use the UriMapper to accomplish what I’m looking for.

<nav:UriMapper x:Key="uriMapper">

    <nav:UriMapping Uri="Examples/{example}" MappedUri="/ExamplePage.xaml?example={example}" />

</nav:UriMapper>

Currently the UriMapper can only be defined in the App.xaml. Hopefully we’ll be able to move this to resource dictionary or even the same file as the Frame control.

Along with my changes to the App.xaml I added one Page to my project, ExamplePage.xaml.

<navigation:Page x:Class="SilverlightOverview.ExamplePage" 

           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 

           xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"

           Title="Example Page"

           xmlns:slo="clr-namespace:SilverlightOverview"

           Loaded="Page_Loaded">

    <Grid x:Name="LayoutRoot" Background="White">

        <slo:XamlViewer x:Name="viewer" />

    </Grid>

</navigation:Page>

   1: public partial class ExamplePage

   2: {

   3:     public ExamplePage()

   4:     {

   5:         InitializeComponent();

   6:     }

   7:  

   8:     private void Page_Loaded(object sender, RoutedEventArgs e)

   9:     {

  10:         if (this.NavigationContext.QueryString["example"] != null)

  11:         {

  12:             viewer.XamlFilename = string.Format("SilverlightOverview.Xaml.{0}.xaml",

  13:                                                 this.NavigationContext.QueryString["example"]);

  14:         }

  15:     }

  16: }

Running the project shows that my URLs to look like this.

You can even try it for yourself if you have the Silverlight 3 Beta 1 runtime installed.

I really wanted to avoid the “Examples/” part of the URL since I only have one view, but there is a limitation built in which throws exceptions if I don’t have at least a something in there.

At this point all I had to do was add a TreeView and Frame to a Grid in my MainPage.xaml, bind the tree to a static list of example data, and my application is running. I’d like to figure out a way to dynamically change the page’s title, but I ran out of time. At first glace it appears that the only place to do this is from within the Page control, but I bet there’s way to get the currently displayed page from the Frame.

You can view the Silverlight Overview application here. At the time of writing this blog post, the deep linking is the only Silverlight 3 feature that’s been added.

Summary

The Good:  The Navigation Framework is a really great addition to Silverlight!

The Bad:  I’d rather be able to manually add items to the browser history and display pages based on the URL, but this solution will be fine for now. I think there might be a way to do that, but I could not find any other documentation and I ran out of time to look through everything with Reflector.

The Beautiful:  I finally have something to point to when Flash developers ask what Silverlight has to offer that Flash/Flex does’t.

(note – I wanted to summarize with the good, the bad and the ugly, but there’s nothing truly ugly about Silverlight 3 so I went with the opposite)

I’m starting a series of blog posts where I’d go through each of Silverlight 3’s new features. To do this, I’m taking my Silverlight Demo application and updating it to include these new features.

Silverlight Overview

To start this off, I’ve converted my demo application to work with Silverlight 3 Beta 1 and posted it on CodePlex as Silverlight Overview. This application is a great interactive introduction and overview of XAML, controls and data binding in Silverlight. Currently the project only covers features through Silverlight 2, but I will be updating it as I cover each feature of Silverlight 3.

Feature By Feature

I’ll update this post with links as I add posts for each feature of Silverlight 3 to my series.

• Deep Linking
• Out of Browser (coming soon)
• Data Binding (coming soon)
• Perspective 3D (coming soon)
• Easing Animations (coming soon)
• Pixel Shader (coming soon)
• Resource Dictionaries (coming soon)
• Bitmap Enhancements (coming soon)
• more when I get there

Agenda:

 8:30 AM: Registration

 9:00 AM: An Introduction to Silverlight (Jeff Blankenburg)

 10:30 AM: An Introduction to XAML (Joe Wirtley)

 11:45 AM: Lunch break

 12:30 PM: An Introduction to the Tools (Josh Holmes)

 2:00 PM: An Introduction to Controls & Data Binding (Matt Casto)

 3:30 PM: Server Communication (Sam Nasr)

 4:45 PM: Giveaways and closing

To register for this event, please go to https://www.clicktoattend.com/invitation.aspx?code=136101

Hope to see you there!

Agenda:

 8:00 AM: Registration

 9:00 AM: Keynote/Intro to Silverlight 2 (Jeff Blankenburg)

 10:30 AM: XAML Basics (Sarah Dutkiewicz)

 Noon: Lunch break

 1:00 PM: The Tools (Jeff Blankenburg)

 2:30 PM: Controls & Data Binding (Matt Casto)

 4:00 PM: Server Communication (John Stockton)

To register for this event, please go to http://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032392883&Culture=en-US

Hope to see you there!

This is a very simple animation that can be used just about anywhere.

[[ If you're viewing this post through an RSS reader, you won't be able to see the Silverlight example ]]

Following is my Page.xaml for this example.  There was no code needed.

<UserControl x:Class="AnimationSample.Page"

    xmlns="http://schemas.microsoft.com/client/2007" 

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 

    Width="300" Height="150">

  <Grid x:Name="LayoutRoot" Background="White">

    <Grid.Triggers>

      <EventTrigger RoutedEvent="Grid.Loaded">

        <EventTrigger.Actions>

          <BeginStoryboard>

            <Storyboard x:Name="CrawlingBorder" RepeatBehavior="Forever">

              <DoubleAnimationUsingKeyFrames Storyboard.TargetName="rectangle" 

                Storyboard.TargetProperty="(Shape.StrokeDashOffset)" BeginTime="00:00:00">

                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />

                <SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="5" />

              </DoubleAnimationUsingKeyFrames>

            </Storyboard>

          </BeginStoryboard>

        </EventTrigger.Actions>

      </EventTrigger>

    </Grid.Triggers>

    <Rectangle Stroke="Green" StrokeThickness="6" StrokeDashArray="3,2" StrokeDashCap="Round" 

               Margin="20" StrokeDashOffset="0" StrokeLineJoin="Round" x:Name="rectangle">

    </Rectangle>

    <TextBlock FontFamily="Lucida Sans Unicode" FontSize="24" 

               Text="Crawling Border" FontWeight="Bold" 

               HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="#FFDE680A"/>

  </Grid>

</UserControl>

I gave a talk at the Central Ohio Day of .NET last Saturday about Silverlight 2.  The presentation was written in Silverlight 2 Beta 1 and included examples of functionality built into Silverlight versions 1 and 2, and the beginning steps in creating the presentation itself.

I have much more planned to be added to the presentation, so I created a CodePlex project called PresentLight.  I'm hoping that other people will like the idea of giving a presentation in the technology that they're speaking about, and maybe they'll use the framework or even add their own content!

I uploaded a slightly older version than the one I gave at CODoDN to silverlight.live.com, check it out by clicking on the following preview image.  The XAP is 14 MB so expect a decent wait for everything to load ... I need to reduce the size.  I'll update this post with a better example as soon as I have it available.

Much thanks goes out to Jeff Blankenburg for building the original slide deck that I based this presentation on.  Also, I got the idea from David Sleeckx's WPF presentation, which is an excellent way to get an overview of WPF.

Using the Presentation

You can navigate the slides through the menu on the left, or move forward one slide by clicking on the header area.  A few of the slides don't have much at first, but clicking in the slide area will show text which was talking points for that part of the presentation.  The interactive slides in the middle should be pretty self explanatory - you can modify the XAML in most of the examples to see changes in real time.

The screen shots at the end can be clicked on to view the full size.  I wanted to keep the entire presentation in Silverlight, so I was trying to use screen shots instead of jumping into Visual Studio.  These slides were taking over an hour each to prepare, because I was trying to give each one a different type of animation.  I think they ended up being a little disjointed though - its much more natural to see someone working with the environment than seeing screen shots of some code, then the solution explorer, then XAML.  I'm definitely going to have to give more thought to that area.

Plans for the Future

I plan to have the slides stored in data rather than hard coded in the page code behind.  I'm going to integrate more examples, such as Isolated Storage, Communications with web services and through sockets, and dynamic languages integrated directly into the slides, like I did with the XAML examples.

Also, I'm going to expand more on some of the user controls that I created as part of the application.  I already went into the scrolling textbox control in my last post, so there will be more of that on the way.

The TextBox control included with Silverlight 2 Beta 1 is a welcome addition.  There was no such control in previous versions of Silverlight, including the alpha.

Unfortunately, the TextBox control is very limited at this point.  It does not support scrollbars when it's content is larger than it's size.  You can "scroll" the next by moving the cursor, but that's just enough to make it functional.  Selecting text past what's visible doesn't automatically scroll to the cursor.  Also, there's no text wrapping, although setting the AcceptsReturn property to True will allow line breaks in the text.

I wanted to have a text box with a little more functionality for my projects, so I decided to see what I could do.  What follows is the simple ScrollingTextBox control that I created.  I didn't spend a ton of time on this because I fully expect this "missing" functionality to be included by Beta 2, or at least by the time Silverlight 2 is released.

To build this, I first created a Silverlight application project and added a Silverlight control called ScrollingTextBox.

<UserControl x:Class="PresentLight.ScrollingTextBox"
    xmlns="http://schemas.microsoft.com/client/2007" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Grid x:Name="LayoutRoot">
    <ScrollViewer x:Name="sv" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
      <TextBlock x:Name="hiddenTextBlock" Opacity="0" />
      <TextBox x:Name="tb" AcceptsReturn="True" TextChanged="tb_TextChanged" />
    </ScrollViewer>
  </Grid>
</UserControl>

The internal TextBlock control is only there to serve as a way to get the actual size of the text.  TextBlock controls will automatically resize to fit their contents, so if I keep it's text the same as the internal textbox control, it will resize accordingly.  The default value for Width and Height dependency properties in Silverlight is Auto, which causes this resize behavior.

Since the ScrollViewer control automatically set's it's scrollable region to fit it's contents, it will be resized to fit the internal textblock.  The internal textbox control will automatically resize to fit it's container, since I haven't set any width or height on it.

Then I added a dependency property for setting the control's Text, which takes care of setting the textbox's text value.  Finally, I handled the TextChanged event on the internal TextBox control to resize based on my internal TextBlock's size.

using System.Windows;
using System.Windows.Controls;

namespace PresentLight
{
    public partial class ScrollingTextBox : UserControl
    {
        public string Text
        {
            get { return (string)GetValue(TextProperty); }
            set
            {
                SetValue(TextProperty, value);
                tb.Text = value;
            }
        }

        public static readonly DependencyProperty TextProperty =
            DependencyProperty.Register("Text", typeof(string), 
                               typeof(ScrollingTextBox), null);


        public ScrollingTextBox()
        {
            InitializeComponent();
        }

        private void tb_TextChanged(object sender, TextChangedEventArgs e)
        {
            if (hiddenTextBlock != null)
            {
                hiddenTextBlock.Text = tb.Text;
                tb.Width = hiddenTextBlock.ActualWidth;
                tb.Height = hiddenTextBlock.ActualHeight;
            }
        }
    }
}

The result is a marginally better control.  There are a lot of possible improvements for me to make, such as possibly handing the selection changed event on the textbox to scroll the ScrollViewer to the cursor's position.  That will have to wait for a future post.

I haven't been posting much lately because I've been very busy preparing for my session at the Central Ohio Day of .NET.  I'm creating a presentation about Silverlight 2.0 Beta 1, but with a twist - the presentation is actually a Silverlight application!

Templates

For the last day or so I've been working on getting my application's main control to use templates to define the interface.  This gives me the option to create multiple "skins" for the application.

To accomplish this, I've been referencing two very excellent tutorials by Jesse Liberty and Shawn Burke.  But, as usual for me, I ran into a problem that sucked up a ton of time.

The Problem

I was trying to set up my template to include buttons for navigation between slides.  I started by building a simple XAML interface for the buttons, like so.

<StackPanel Orientation="Horizontal">
    <Button Height="75" Width="75" Margin="0,0,8,0">
        <TextBlock Text="First" HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Button>
    <Button Height="75" Width="75" Margin="0,0,8,0">
        <TextBlock Text="Prev" HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Button>
    <Button Height="75" Width="75" Margin="0,0,8,0">
        <TextBlock Text="Next" HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Button>
    <Button Height="75" Width="75">
        <TextBlock Text="Last" HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Button>
</StackPanel>

And that looks good enough for this example.

Then I took that same XAML and put it into a template stored in the application resources (in App.xaml).

<Application.Resources>
  <Style x:Key="TestTemplate" TargetType="pl:Presentation">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="pl:Presentation">
          <StackPanel Orientation="Horizontal">
            <Button Height="75" Width="75" Margin="0,0,8,0">
              <TextBlock Text="First" HorizontalAlignment="Center" VerticalAlignment="Center" />
            </Button>
            <Button Height="75" Width="75" Margin="0,0,8,0">
              <TextBlock Text="Prev" HorizontalAlignment="Center" VerticalAlignment="Center" />
            </Button>
            <Button Height="75" Width="75" Margin="0,0,8,0">
              <TextBlock Text="Next" HorizontalAlignment="Center" VerticalAlignment="Center" />
            </Button>
            <Button Height="75" Width="75">
              <TextBlock Text="Last" HorizontalAlignment="Center" VerticalAlignment="Center" />
            </Button>
          </StackPanel>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>
</Application.Resources>

And modified my Page.xaml to have my Presentation UserControl class (modeled after Shawn Burke's tutorial) with the template applied as a style.

<local:Presentation x:Name="PresentationControl" Style="{StaticResource TestTemplate}" />

But running this treated me to a browser window that's stuck loading.  My break point in OnApplyTemplate in my Presentation class never got hit.  Pausing Visual Studio didn't tell me anything, so I knew it wasn't stuck in a loop.  This had me stuck for several hours.

The Solution

What I eventually found was that certain things that are perfectly acceptable XAML in a user control won't work in a template.  Furthermore, if Silverlight encounters these elements in the template it just hangs.

The problem XAML was the buttons.  Instead of including your actual buttons in your template, you should instead create a separate template for the buttons, and reference that as your button style.

<Style x:Key="TestButton" TargetType="Button">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="Button">
        <Button Width="75" Height="75">
          <Button.Content>
            <ContentPresenter Content="{TemplateBinding Content}" 
                              HorizontalAlignment="Center" 
                              VerticalAlignment="Center" />
          </Button.Content>
        </Button>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

Then modify the previous template to use the new button template.

<Application.Resources>
  <Style x:Key="TestTemplate" TargetType="pl:Presentation">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="pl:Presentation">
          <StackPanel Orientation="Horizontal">
            <Button x:Name="FirstButtonElement" Content="First" 
                    Style="{StaticResource TestButton}" Margin="0,0,8,0" />
            <Button x:Name="PreviousButtonElement" Content="Prev" 
                    Style="{StaticResource TestButton}" Margin="0,0,8,0" />
            <Button x:Name="NextButtonElement" Content="Next" 
                    Style="{StaticResource TestButton}" Margin="0,0,8,0" />
            <Button x:Name="LastButtonElement" Content="Last" 
                    Style="{StaticResource TestButton}" />
          </StackPanel>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>
</Application.Resources>

Finally, this works.  It looks the same, but now I can take the template and make it look much nicer if I want.

Hopefully this tip will help others working on templating in Silverlight avoid the pitfalls I ran into.

I arrived at work this morning only to find that the Silverlight 2.0 Beta 1 plugin and some documentation was discovered and available for download.  A few hours later the SDK and documentation was available, then after the keynote at Mix that whole lot was officially released.  I couldn't wait to try it out when I got home.

Unfortunately, the install experience hasn't been good.  I've got the Silverlight 2.0 plugin and SDK installed, but I can't get the tools for Visual Studio 2008 installed.  Here's step by step what I've done so far.

1. Downloaded and installed the Silverlight 2 Beta 1 plugin (runtime) without a hitch.
2. Downloaded Silverlight 2 Beta 1 SDK, Silverlight 2 Beta 1 Tools for Visual Studio 2008, and Expression Blend 2.5 March Preview.
3. Uninstalled Silverlight 1.1 Alpha Tools for Visual Studio 2008 and Expression Blend 2 December Preview.
4. Installed Silverlight 2 Beta 1 SDK.
5. Tried to install Silverlight 2 Beta 1 Tools for Visual Studio but got the following error message:

An Error Has Occurred:
Silverlight Tools cannot be installed because one or more of the following conditions is true:

1. Visual Studio 2008 RTM is not installed.
2. The Web Authoring feature of Visual Studio is not installed.
3. A previous version of the Silverlight Runtime is installed.
4. A previous version of the Silverlight SDK is installed.
5. The Visual Studio Update KB949325 is installed.
6. A previous version of Silverlight Tools is installed.

To continue, please install or uninstall the appropriate products and run this installer again.

6. Verified what I had installed.  I've got Visual Studio Team System 2008 RTM, Microsoft Visual Studio Web Authoring Component, Silverlight runtime, Silverlight 2 SDK, Silverlight 1.0 SDK.  Oops, maybe that's the problem?  Also, I didn't uninstall Silverlight 1.1 Alpha runtime before installing Silverlight 2.0 runtime, but that shouldn't be a problem.
7. Uninstalled Silverlight runtime and both SDKs, then rebooted for good measure.
8. Installed Silverlight runtime, 2.0 SDK, ran silverlight_chainer.exe again and got the same error.
9. Did a web search and found http://blog.steeleprice.net/archive/2008/03/05/1362.aspx which mentions a registry key that needs to be removed, but I don't have that registry key on my system.

At this point I can't find any more information through web searches or in the Silverlight.Net forums.  I'm posting this problem in the forums with a link here for a complete description of the problem.

I was really hoping to get few things done in Silverlight 2.0 and posted online tonight, but I'm kind of stuck and frustrated at this point.

UPDATE

Chad Campbell responded to my Silverlight.net forum post with a solution.  The solution definitely isn't something that I'd say is obvious, but hey, do whatever works.  I'm just a little surprised that I'd have more trouble with the beta than the alpha.

A big thanks goes out to Chad for his quick reply.  I'm definitely going to have to buy his book now!

Oops!

Even though the tools are now installed, something is still wrong.  Here's what I get when I try to create a Silverlight project in Visual Studio 2008.

Resolution

It turns out that the Silverlight 2 Tools Beta 1 for Visual Studio 2008 installs the Silverlight 2 Beta 1 runtime and SDK as part of the package.  This causes a problem if you already installed the plugin or the SDK.  I uninstalled everything Silverlight related, then installed silverlight_chainer.exe, this time successfully.  I'm now ready to go.

Labels: silverlight, SilverlightDevCamp

Labels: silverlight, sprint

Labels: silverlight, sprint

Labels: silverlight

Labels: silverlight

This package contains sample source code for some common
UI controls for the Silverlight managed code framework.

You may customize these controls and use them in your
Silverlight applications.

In this package, you will find a functional solution
with C# code files representing control behavior and XAML
markup files representing the visual aspects of the control.
Also included in the solution is test code that demonstrates
usage of the controls, how events can be hooked up and
handled, etc.

The following sample controls are included:
* Button
* Slider
* ScrollBar
* ScrollViewer
* ListBox

Labels: silverlight, sprint

Labels: silverlight, sprint

The 1.1 refreshes from MIX to now have mainly just been updates to keep in sync with the Silverlight 1.0 code-base. Now that Silverlight 1.0 has shipped, the upcoming refreshes of 1.1 will be feature updates with more functionality. So you'll start to see more functionality appear soon.

Labels: silverlight

Labels: silverlight

Labels: silverlight, sprint

Labels: silverlight, sprint

Labels: silverlight, sprint

Labels: silverlight, sprint

• Visual Studio 2008 Beta 2 using Microsoft Secure Content Downloader
  
• Silverlight 1.0 RC.
• Visual Studio Silverlight Tools Alpha.
  
• Expression Blend 2 August Preview.

Labels: silverlight, sprint

Labels: silverlight, sprint