So why would we want to disable a ComboBoxItem in the first place?  If you can disable individual items in a ComboBox, then you can still present the user with all of the available data, without making them all an actionable option.  In our example we are going to create a product list ComboBox.  In this scenario we want the user to see all of the products that we carry, but they should only be able to select the items that we currently have in stock.

To start off our project, we will create a new Silverlight 5 Application.  Plain and simple with no bells and whistles.

The first thing we need to do is to create our data object.  For this demo we will only have two properties, Name and IsAvailable.  Our class will also have a static method that will return our test data.

public class Product
{
    public string Name { get; set; }
    public bool IsAvailable { get; set; }

    public static IEnumerable<Product> GetProducts()
    {
        return new List<Product>()
                    {
                        new Product() { Name="Saw" ,
                            IsAvailable = true},
                        new Product() { Name="Hammer" ,
                            IsAvailable = true},
                        new Product() { Name="Clamp" ,
                            IsAvailable = false},
                        new Product() { Name="Level" ,
                            IsAvailable = true},
                    };
    }
}

Now we can create our testing UI.  It will be a simple Grid containing our CombBox and a few TextBlocks.

<Grid Width="Auto" Height="Auto" HorizontalAlignment="Center"
      VerticalAlignment="Center">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="Auto"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <TextBlock Text="Combo Box : "/>
    <TextBlock Text="Selected Item : " Grid.Row="1"/>

    <ComboBox
            x:Name="cbTest" Grid.Column="1"
            DisplayMemberPath="Name" />

    <TextBlock Grid.Row="1" Grid.Column="1"
        Text="{Binding SelectedItem.Name, ElementName=cbTest}"/>
</Grid>

If you look at our ComboBox, we will be displaying the Product Name property.  The last TextBlock maps its Text property to the Name property of the SelectedItem of our ComboBox.  Fairly straight forward, right?

Just for completion sake, I added some Style resources to the UserControl.Resources in order to make the project a bit more readable.

<Style TargetType="TextBlock">
    <Setter Property="FontSize" Value="22"/>
    <Setter Property="Margin" Value="0,10,20,0"/>
</Style>
<Style TargetType="ComboBox">
    <Setter Property="FontSize" Value="22"/>
    <Setter Property="Height" Value="30"/>
    <Setter Property="Width" Value="150"/>
</Style>

If you run the project, you should see something like this :

The last thing we need to add is come data.  In order to do that, let’s add the following line to our MainPage code behind:

cbTest.ItemsSource = Product.GetProducts();

Running our project again, you should now have data.  Selecting an item should update the Selected Item text.

Now the we have our project set up, how can we disable individual items?  The default Item container for a CombBox is the CombBoxItem.  That means that for every item that you create, regardless if you are using the DisplayMemberPath or a custom ItemTemplate, is set inside a ComboBoxItem.  It just so happens that the ComboBoxItem object has an IsEnabled property that we can use to enable/disable the items.

Prior to Silverlight 5, there were several ways of attacking this problem, however Silverlight 5 offers a much simpler approach.  On day 6 of my 12 Days of Silverlight series I talked about the new Silverlight 5 feature of Binding in Style setters.  So how about we show this new feature in action?

We can use the new binding feature to make using the IsEnabled property a snap.  Let’s add the following Style settings to our User.Resources.

<Style TargetType="ComboBoxItem">
    <Setter Property="IsEnabled" Value="{Binding IsAvailable}"/>
</Style>

Now the IsEnabled property of the ComboBoxItem will be triggered off of our IsAvailable Product property.  Yep, it’s that easy.  Let’s rerun our application and see what we have.  If you expand the ComboBox, you will notice that the Clamp item is greyed out and you cannot select it.  And you thought you wouldn’t use binding in Style setters.  Tisk tisk…

This post was really about two things.  The first was to solve the direct problem of disabling items in your ComboBox.  The second was to give a real life example of using the binding in Style setters.

You can download the code for the project : SL5ComboBoxItemEnabled.zip

Basic Border Adorner

As we have done in the rest of the series, we will start with the code from the first post in this series, Client-Side Collections.  You can download that project here : PVB01_ClientSideCreation.zip.

We are going to start the first example with the basics.  Once you set your own item adorner, you will lose the very basic adorner that comes out of the box, the highlight border.  If you need to refresh your memory, run the project above and you will see that every time you mouse over or select an item it is highlighted with a light blue border around it.

If you dig into the PivotViewer XAML you will find that there is actually a bug here.  That light blue border is actually the selected border.  The mouse over border is a different color.  The item adorner defines a couple visual states in the group “ItemStates”.  The selected border is driven off of the “IsSelected” state.  However, the “IsSelected” state also fires on a simple mouse over, even if the items itself is not selected.  Since the selected border sits on top of the mouse over border, you will always see the selected one.  What does this mean for us?  It simply means we are not going to use the “IsSelected” visual state to drive our adorner.

Now that we have that out of the way, let’s create our item adorner.  If you read the last post , you might recall that the PivotViewer has a ItemAdornerStyle where we implemented the PivotViewerBasicItemAdorner.  Our first item adorner is going to look very similar, except we are going to remove the basic item adorner.  In fact, to show a point, it is going to look rather blank.

<Style x:Key="basicAdorner" TargetType="pivot:PivotViewerItemAdorner">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate>
                <Grid Background="Transparent">
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

To assign our adorner to the PivotViewer, we can set the ItemAdornerStyle property to our new style.

<pivot:PivotViewer x:Name="pViewer"
ItemAdornerStyle="{StaticResource basicAdorner}">
   ...
</pivot:PivotViewer>

If you run the project you will see that it’s not very exciting.  In fact, you will notice that the highlight border is missing completely.  However, that’s good.  The gives us a nice blank canvas to start from.  In order to add our highlight border back, we are going to add two Border objects to our Grid.  The first one will be visible when we you mouse over an item.  The second will show when the item is selected.  By adding the selected Border second, it will hide the mouse over one when an item is selected and the mouse is over it.

<Style x:Key="basicAdorner" TargetType="pivot:PivotViewerItemAdorner">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate>
                <Grid Background="Transparent">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                   <DoubleAnimationUsingKeyFrames
                   Storyboard.TargetProperty="(UIElement.Opacity)"
                       Storyboard.TargetName="ButtonBorder">
                                 <EasingDoubleKeyFrame KeyTime="0"
                                        Value="1"/>
                                 </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled"/>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="ItemStates">
                            <VisualState x:Name="Default"/>
                            <VisualState x:Name="IsSelected"/>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                  <conv:CustomAdorner DataContext="{Binding .}"/>
                    <Border x:Name="ButtonBorder"
                                        Margin="-1"
                                        BorderThickness="4"
                                        BorderBrush="#AAfffc08"
                                        Opacity="1"/>
                    <Border x:Name="FocusedItemBorder"
                             Visibility="{Binding IsItemSelected,
                  RelativeSource={RelativeSource TemplatedParent},
                             Converter={StaticResource convBool}}"
                                        Margin="-1"
                                        BorderThickness="4"
                                        BorderBrush="Purple"
                                    Opacity="1"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Now we have some meat to work with here.  Let’s take a closer look at what is going on.  First you will notice that we added a couple of VisualStateGroups.  For this example we are going to leave the IsSelected blank due to that bug I discussed earlier.  In the MouseOver state we are setting our ButtonBorder Border objects Opacity to 1.

So how do we show the FocusedItemBorder?  The PivotViewerItemAdorner class (whose style we are currently setting) has a IsItemSelected property.  By binding the Visibility of our Border to it, we can toggle based off of that value.  In order to convert the IsItemSelected property from a bool to a Visibility, I had to create a ValueConverter that looks like this.

*Note: This is a handy little ValueConverter and you should keep this type of converter handy for your projects.

public class BoolToVisibility : IValueConverter
{

    public object Convert(object value,
        Type targetType, object parameter,
        System.Globalization.CultureInfo culture)
    {
        if(value is bool)
        {
            if((bool)value)
            {
                return Visibility.Visible;
            }
        }

        return Visibility.Collapsed;
    }

    public object ConvertBack(object value,
        Type targetType, object parameter,
        System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Don’t forget to add the ValueConverter to our XAML so we can reference it in our adorner.

<conv:BoolToVisibility x:Key="convBool"/>

If you rerun your application, you should now have two different borders that show on your trading cards.  A yellow border on the mouse over and a purple one when you select the item.  If you were wanting nothing more to get the default borders to work correctly, you are now done.  Hopefully you want to stick around and see how to take this a bit further though.

Adding Custom XAML

The above example is a great starting point, but what if we want to add a bit more interactivity in our adorners?  Turns out, it is rather easy (with a few minor catches) to do this.  We are going to wrap the rest of our adorner in a UserControl, CustomAdorner.xaml.   Our UI is going to consist of a single button for the demo’s sake.  Just to separate it from the default item adorner, we will center this button on the bottom of the card.  Here is what our new UserControl looks like:

<Grid x:Name="LayoutRoot" Background="Transparent"  >
    <StackPanel x:Name="spContainer" Orientation="Horizontal"
       HorizontalAlignment="Center" VerticalAlignment="Bottom">
        <Button Content="Time for Change" Width="200"
               Height="50" Click="Button_Click"/>
    </StackPanel>
</Grid>

The Button has a Click event handler.  Jumping to our code behind, we will show a simple MessageBox to prove we are getting what we expect.

private void Button_Click(object sender, RoutedEventArgs e)
{
    if(DataContext is DemoItem)
    {
        MessageBox.Show("DemoItem : "
              + (DataContext as DemoItem).ShortName);
    }
}

With our UserControl completed, let’s add it to our item adorner. 

<Grid Background="Transparent">
    <VisualStateManager.VisualStateGroups>
...
    </VisualStateManager.VisualStateGroups>
    <conv:CustomAdorner DataContext="{Binding .}"
        Visibility="{Binding IsItemSelected,
        RelativeSource={RelativeSource TemplatedParent},
        Converter={StaticResource convBool}}"/>
    <Border x:Name="ButtonBorder"
                Margin="-1"
                BorderThickness="4"
                BorderBrush="#AAfffc08"
                Opacity="1"/>
    <Border x:Name="FocusedItemBorder"
            Visibility="{Binding IsItemSelected,
            RelativeSource={RelativeSource TemplatedParent},
            Converter={StaticResource convBool}}"
                Margin="-1"
                BorderThickness="4"
                BorderBrush="Purple"
            Opacity="1"/>
</Grid>

If you rerun the project, you will see that our button is now shown on the trading cards whenever you mouse over a trading card.  If you click the button, you will get a MessageBox with the name of the DemoItem displayed.  Instant success right?  Well, sort of.

You might notice that this isn’t exactly what we are looking for.  If you zoom into an item, the button is positioned nice and neat in the bottom center of card.  However, when zoomed in it looks something like above. 

Why is this happening?  It is important to remember that the trading cards are XAML that have been rendered to an image.  When you define a ItemTemplate, it is always important to design for the largest size that you want to display.  This will insure that your cards always look clean.

This same philosophy is carried over to the item adorners.  The Grid in our UserControl is adjusting to the current display width and height of the trading card.  However, we defined our Button to a static width and height.  Therefore, as you zoom out, the Button begins to take up too much space.  The opposite is true if you design it too small.  Zooming into the object will make the Button look out of place by being too small.

So how do we address this?  Your first thought might be to change the size of the Button as the Grid changes its size.  While this will work, what happens when you have more than one element?  What if the item isn’t on the bottom, but is some set offset from the top?  Scaling can quickly become an issue. 

Fortunately, Silverlight has already provided an answer for us. Silverlight 5 contains a control called the ViewBox, which use to be a part of the Toolkit.  The ViewBox will automatically scale the UI within it to the appropriate size while maintaining accurate spacing, etc. This means that we can scale our Grid and everything within it will scale accordingly.

In order to implement our ViewBox scenario, we first must decide a base size for our adorner.  This is the size that all of the child elements will be designed to.  For our example, let’s choose 500×500.  We are going to wrap our StackPanel inside a new Grid that is set to the 500×500.  That Grid will then be wrapped in a ViewBox.

<Grid x:Name="LayoutRoot" Background="Transparent" >
    <Viewbox>
        <Grid x:Name="Container" Background="Transparent"
              HorizontalAlignment="Center"
              VerticalAlignment="Center"
              Height="500" Width="500"
              RenderTransformOrigin="0.5,0.5">
            <StackPanel x:Name="spContainer"
                        Orientation="Horizontal"
                        HorizontalAlignment="Center"
                        VerticalAlignment="Bottom">
                    <Button Content="Time for Change"
                            Width="200"
                            Height="50" Click="Button_Click"
                            HorizontalAlignment="Center"
                       VerticalAlignment="Center"/>
            </StackPanel>
        </Grid>
    </Viewbox>
</Grid>

If you rerun your application, you will now see that the button scales according to the size of the trading card.

If you wanted the button to only show up when the item is selected, then we can borrow the Visibility binding for our selected Border.

<conv:CustomAdorner DataContext="{Binding .}"
                    Visibility="{Binding IsItemSelected,
    RelativeSource={RelativeSource TemplatedParent},
    Converter={StaticResource convBool}}"/>

And there you have it.  The sky is now the limit on what you can do.  Well, that is until you run into a wall somewhere that I haven’t found.  Regardless, this does open up a great deal of possibilities on what you can add to your trading cards.

You can download the source to this post here : PVB05_CustomAdorner.zip

As I said at the beginning of this post, this wraps up our basics series.  What’s next?  Well I have a stack of random posts that need to be written to address various topics.  I thought I would then come back and maybe do a series on trading card designs. Until then…

Happy Pivoting…

In the original PivotViewer, there was a concept of custom actions.  Defining custom actions allowed you to add a button on top of the selected trading card.  In fact, you could add several items to the card.  This gave you the ability to provide limited interactivity with the trading card to the user.  The new Silverlight does away with custom actions and replaces them with item adorners. (note: if you implemented custom actions in the previous version, this is another breaking code change)

Simply put, an item adorner is XAML that is placed over a trading card.  If you define an item adorner it is displayed over a trading card when either a mouse over event happens or the item is selected.  This opens a wide range of possibilities for your trading cards.  Now you can add additional information or interactive controls without the need to leave the PivotViewer.  PivotViewer comes with a default adorner, PivotViewerDefaultItemAdorner (yep, gotta love those short names).  This adorner mimics the functionality of the custom actions in the previous version.  In this post we will take a look at this new control.

Implementing the Default Item Adorner

In order to get us up and running quicker, we are going to start with the project created in the 1st post of the series, Client-Side Collections.  You can download the code here: PVB01_ClientSideCreation.zip

Adding the default item adorner is not the most trivial thing in the world, however it’s not overly complicated.  PivotViewer exposes  an ItemAdornerStyle property where you can set a style to define your item adorner.  Let’s look at what this style will look like using the PivotViewerDefaultItemAdorner.

<Style x:Key="basicAdorner"
          TargetType="pivot:PivotViewerItemAdorner">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate>
                <pivot:PivotViewerDefaultItemAdorner
                    IsItemSelected="{Binding IsItemSelected,
                RelativeSource={RelativeSource TemplatedParent}}"
              CommandsRequested="basicAdorner_CommandsRequested"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

This code creates a style of a PivotViewerItemAdorner.  In the template of that control, we are adding a PivotViewerDefaultItemAdorner.  The IsItemSelected property binds that property to the base PivotViewerItemAdorner.  This let’s us know when the item is simply a mouse-over event or the item has been selected.  The CommandsRequested property allows us to create custom commands and display/interact with them on the current trading card.

Here is an example of what the CommandsRequested event handler will look like.

private void basicAdorner_CommandsRequested(object sender,
    PivotViewerCommandsRequestedEventArgs e)
{
     e.Commands.Add(new AddCommand());
}

The PivotViewerCommandRequestedEventArgs has 3 important properties.  The first, as shown above, is a collection of IPivotViewerUICommand objects that defines what commands (aka buttons) to add to the control.  Next is an Item property that gives you access to the data object being referred to.  Finally, an IsItemSelected property tells us if the object has been selected or not.  We will look at that more in a little while.

The IPivotViewerUICommand interface allows you to define what it being displayed to the user and what do to if the user selects it.  Here is what a base implementation of the interface will look like.

public class Class1 : IPivotViewerUICommand
{

    public string DisplayName
    {
        get { throw new NotImplementedException(); }
    }

    public Uri Icon
    {
        get { throw new NotImplementedException(); }
    }

    public object ToolTip
    {
        get { throw new NotImplementedException(); }
    }

    public bool CanExecute(object parameter)
    {
        throw new NotImplementedException();
    }

    public event EventHandler CanExecuteChanged;

    public void Execute(object parameter)
    {
        throw new NotImplementedException();
    }
}

As you can see there isn’t a whole lot going on here.  The DisplayName, ToolTip, and Icon properties are used for the display.  If CanExecute returns true, then the Execute method is called when the user selects it.  If you go back to our event handler above, you will see that I added an AddCommand to the item.  The AddCommand class will display a MessageBox if the user selects the command.

public class AddCommand : IPivotViewerUICommand
{

    public string DisplayName
    {
        get { return "Add Item"; }
    }

    public Uri Icon
    {
        get { return null; }
    }

    public object ToolTip
    {
        get { return "Add Item to cart."; }
    }

    public bool CanExecute(object parameter)
    {
        return true;
    }

    public event EventHandler CanExecuteChanged;

    public void Execute(object parameter)
    {
        var itm = parameter as DemoItem;
        MessageBox.Show( itm.ShortName + " was added");
    }
}

The only thing left to do is to let our PivotViewer know of the new ItemAdornerStyle that we wish to use.  You can set this in code of XAML.  Here we will simply set it in our XAML.

<pivot:PivotViewer x:Name="pViewer"
    ItemAdornerStyle="{StaticResource basicAdorner}">
...
</pivot:PivotViewer>

If you run the project, you will now see a new command on each trading card when you select it.  Clicking the Add Item button will show a MessageBox letting you know that your item has been added to our mythical shopping cart, bug list, or what ever we decide to build.

You may also notice that the command will show up whether the item is selected or if you simply mouse over it.  This gets us back to the IsItemSelected property of the PivotViewerCommandRequestedEventArgs. We can take advantage of this property in our event handler and only add the AddCommand if the item is actually selected.

private void basicAdorner_CommandsRequested(object sender,
    PivotViewerCommandsRequestedEventArgs e)
{
    if (e.IsItemSelected)
    {
        e.Commands.Add(new AddCommand());
    }
}

If you re-run your application, you will notice that we are no longer showing the command on the mouse over.

Creating an Interactive Adorner

The above example shows you how to use the PivotViewerDefaultItemAdorner to mimic the custom actions of the first release.  However, this isn’t the first release, so let’s advance things just a bit to get a better feel for how this can work.

For this example, we are going to create a new command.  This new ColorCommand will allow us to change the color of the current object.  Like the AddCommand, this command is rather straight forward.  However, in the Execute method, we will assign the item’s color to the CommandColor property defined in the command.  It wasn’t addressed in the example above, but the parameter argument that is passed into the Execute method is the data object that we are currently interacting with.  Here is what the new ColorCommand looks like.

public class ColorCommand : IPivotViewerUICommand
{

    public string CommandColor { get; set; }

    public string DisplayName
    {
        get { return CommandColor; }
    }

    public Uri Icon
    {
        get { return null; }
    }

    public object ToolTip
    {
        get { return "Change color to " + CommandColor; }
    }

    public bool CanExecute(object parameter)
    {
        return true;
    }

    public event EventHandler CanExecuteChanged;

    public void Execute(object parameter)
    {
        var itm = parameter as DemoItem;

        itm.Color = CommandColor;
    }
}

Now we need to modify our event handler to add the new command.  We are going to add several command in this example.  The commands we add will be based on the current item’s color.  For example, if the current item is red, then we will add a blue, green, and purple command.  By adding logic into the command creation, we are able to provide a better experience to the user.  For instance, what good does a red button have on a red object?

private void basicAdorner_CommandsRequested(object sender,
    PivotViewerCommandsRequestedEventArgs e)
{

    if (e.IsItemSelected)
    {
        var itm = e.Item as DemoItem;

        if(itm.Color != "Red")
            e.Commands.Add(new ColorCommand()
                               {
                                   CommandColor = "Red"
                               });
        if (itm.Color != "Blue")
            e.Commands.Add(new ColorCommand()
                               {
                                   CommandColor = "Blue"
                               });
        if (itm.Color != "Green")
            e.Commands.Add(new ColorCommand()
                               {
                                   CommandColor = "Green"
                               });
        if (itm.Color != "Purple")
            e.Commands.Add(new ColorCommand()
                               {
                                   CommandColor = "Purple"
                               });
    }
}

Running our application now, you will notice that any selected item will have 3 commands.  Selecting the command will update the object and dynamically change the color of the trading card.  Hopefully you can see how this could be very beneficial to you in more advanced situations.

In the next post in this series, we are going to look at creating our own item adorners.  I have received a lot of questions on this subject and thought we would explore it some.  You can download the source code for this project here: PVB04_BasicItemAdorners.zip

Until then… Happy Pivoting…

Setting the Stage

Before I get into the review itself, let me set the stage a bit first.  I have been giving technical presentations for the last two years.  I don’t really get the opportunity to present as often as I would like, but I give about a dozen presentations a year.  I have had the opportunity to speak at some great conferences, like VS Live, and am looking forward to future opportunities.  Not being a naturally gifted speaker, I still remember my first presentation and what a train wreck it was (it was bad…).

However things have gotten better over the last two years and my presentations continue to improve. I have learned a ton of things over the this time, mostly what not to do, and have received a lot of tips from some very accomplished speakers.  When Scott released the new TekPub video I decided to give a look.  I watched it a few weeks ago and tried to put some of the things I learned into practice last night.  So how did it go?  Well…

I don’t really want to give out too much of the video, but I started off with a bang.  Scott talks about his need to make sure he knows the exact setup of the room, hardware, connectivity, etc.  That point got beat into my head last night with a sledge hammer.

I had given a presentation at this user group a few months back and the projector had a HDMI port.  So I thought nothing off it last night and showed up with my fancy new ultrabook to present my Windows 8 talk on.  I even had a backup machine in case I needed it.  However, it was the Build tablet and guess what, only HDMI.  So imagine how happy I was when a room change put us in a room with no HDMI port.   After running through several attempts to get a work around, we were finally successful.  Now you geeks out there will probably like this.  We had to create an Ad-Hoc network on another laptop (one with a VGA port) and remote desktop into my box.  It killed my one demo that needed internet access, but it got me up and running.  Boys and girls, anyone care to guess what the lesson we learned here was?

After getting off to a very shaky start, the presentation went well enough.  Ok, no one fell asleep so I figure that has to be a win, right?  On the way home I was reviewing the talk and decided it would be a good idea to write this review.

Finally, the Video Review…

Hopefully that gives you a better idea of where I am coming from on this review.  I started off as most technical presenters do and am still working my way to becoming a better speaker.  So that brought me to Scott’s video. 

To sum it up, the video itself is excellent and has probably been the most I have learned about giving presentations in a single shot.  In the video Rob Conery presents Scott with a topic and asks him to prepare and give a 15 minute presentation on it.  That is where the value of this video comes in.  Scott has written several posts over the years on tips to becoming a better speaker and there are several other great resources out there as well.  However, being able to watch an accomplish speaker prep for a talk has a ton of value that you can not get from a list of tips.  It gives you a chance to see how he dissects the topic, preps the demos, and how it all comes together in the final presentation.  Of course the process is scaled back so that it will all fit in a reasonable length video, but you still are able to get a sense of the his process.

So I put some of the things I learned in the video to the test.  First off, preparing for my talk was much easier and I felt much more comfortable with what I had going into my presentation (that is before the HDMI fiasco).  As for the talk itself, I honestly didn’t see a lot of changes though.  Which, at first, was a bit disappointing.  However, when I was reviewing the talk on my way home I started making several connections.  Instead of simply thinking that the talk could have gone better, I began to map specific things that I did or did not do to some of the things I saw in the video.  It gave me a better understanding of what needed to be changed and an example of how I could change it.  To me, that is a win.  It is always easier to improve something when you have an idea of what to improve and how to improve it.

Would I recommend this video? Without a doubt I would.  I believe you can purchase the video by itself for $18.  I went for the annual subscription to TekPub instead.  I honestly think Scott’s video alone would be worth the price of the annual subscription but now I get access to all of TekPub’s other great material as well. 

Scott has some more information about the video and links to his other posts on speaking at SpeakingHacks.com.  Scott and Rob also have a podcast that is quite interesting called This Developer’s Life.  Of course they both have very active twitter accounts (@shanselman and @robconery).

For any of the speakers out there, especially the ones just starting or thinking about starting, I wish you all the best.  While speaking is something that I forced myself to start doing, I have really began to enjoy it and hope others do as well.

On the twelfth day of Silverlight the team delivered to me… PivotViewer.

Anyone who knows me, knows I have a special interest in the PivotViewer.  Simply poking around this blog should show you that.  I’ve given talks across the country on the subject, I’ve blogged about it, and I’ve even tried to write a book on the subject (although I couldn’t find a publisher to pick it up).  Why the interest?  Because I think it is an amazing example of data visualization. 

History of PivotViewer

PivotViewer got it’s start in the Live Labs team.  It original appeared as a WPF application called Pivot.  Although no longer supported, you can still download the original application on Microsoft’s Research page.

The first version of PivotViewer was release in 2010 and worked with Silverlight 4.  While containing most of the features you have in the latest version, it’s data was largely static in nature.  It utilized a XML format, CXML, and mapped data items to members of a DeepZoom collection (which was also written by the Live Labs team).  While useful in certain use cases, it’s limited API and static image nature kept the control from being used in many scenarios.

Even with these limitations, the PivotViewer was well received and in time the team moved to the Silverlight team and PivotViewer became an official Silverlight control.  With a major revamp the new PivotViewer came packed with a lot of new goodies.  While still supporting CXML, you can now create client side collections and generate your visuals dynamically with XAML data templates.  The API has been expanded and you now have a lot more control over appearance and behavior.

While still not perfect, it has come a long way and can now be used in a lot of scenarios that it previously couldn’t.

Anatomy of PivotViewer

The first two things you need is data and visualizations (hey, maybe that’s where data visualizations came from <grin>).  The new PivotViewer gives you several ways to accomplish this.  Once you populate PivotViewer with both of these, your screen will load and you will see 3 distinct areas.

The main area is the collection container.  It is the heart of the control.  You are able to zoom in and out, pan and scroll with the mouse, etc.  The collection container has two different views: grid view and histogram view.  The grid view lays out your items in a nice grid based on the selected sorting property.  The histogram view will group the items (based on the sorting property) and show them in more of a bar chart.  This gives the user a powerful visualization of comparing counts based on a selected property.  A nice bonus is if you double click a histogram column, it will drill down into that column to give you a finer resolution of the data within.

Above the collection container you have the control bar.  It contains items such as a zoom bar, the sorting property selector, and the ability to switch between grid and histogram view.

To the left you will find the filter panel.  The nicest thing about the filter panel is that it is generated for you.  Each property you define in your data objects is displayed here.  It automatically generates data ranges, value selections, etc.  Adjusting the filter conditions will instantly adjust the items included in the collection container.  Not bad functionality for free.

If you select an item you will see an additional panel displayed on the right, the detail pane.  This contains the specifics about the selected item.  While having a built in view, the new PivotViewer also allows you to create a custom detail pane and I show you a walk through here : Creating a Custom DetailPaneStyle.

By far the best addition to PivotViewer in SL5 is the dynamic nature of it.  If you make any changes to the data items within the application, the changes are instantly reflected in the information and visualization of the object within the PivotViewer.  This creates a lot of use cases where PivotViewer would be a great fit.

Developing with PivotViewer

So I’m going to take the easy way out here and we are not going to run thru a PivotViewer example in this post.  The reason is I have another series on doing just that.  If you want to get your feet wet with the new PivotViewer take a look at my PivotViewer Basics series.

I do want to make a quick shout out here.  Chris Arnold has two great products out there that include PivotViewer: PhotoPivot and Percollate. If you want to see some of the exciting ways you can use PivotViewer in your applications, I highly recommend checking both of those out.

The End of a Series…

As I said at the beginning of this post, this has been a great series to write.  I think the Silverlight 5 release goes a long ways in the right direction.  There are a lot of additional features that this series did not touch on and I would encourage you to go explore them.  You can find out all about the new release on Silverlight.net.

I will wrap up this series by stealing a phrase from a good friend of mine (who will probably exclude this post from his site because of it <grin>).

.. stay in the ‘light ..

On the eleventh day of Silverlight the team delivered to me… 3D.

Yep, that’s right, we now have a 3D stack in Silverlight.  For any of you Xbox developers out there, it should look fairly familiar.  The 3D stack in Silverlight is based off of the XNA framework.  Call it a XNA lite if you will.  While we are not going to build the next blockbuster game, I do think it will be fun to take a look at what 3D looks like inside of Silverlight.

Creating a 3D Applications

If you fire up Visual Studio, you will see two new Silverlight solution types available to you : Silverlight 3D Application and Silverlight 3D Library.

Our example is going to focus on the 3D Application.  If you create the new solution you will see that it creates 4 projects for you.  Two of them should be familiar to you, a SL project and a Web project.  For our 3D application, we have two additional projects (one for the SL side and one for the web).  These projects are there to hold your resources for your application.  In fact, if you try and add a new item to either project you will notice that you are limited to the following items:

So now that we have a project created, let’s F5 it and see what we get.  Isn’t that a nice little error?  You probably are looking at a notification that you need to enable GPU acceleration.

Now the fun thing is that when you look at the created web pages, you should see that GPU acceleration is already turned on.  So what’s going on?  Well it turns out that elevated trust is required to run 3D applications.  So turning on elevated trust, whether you are in-browser or out, will get you going.  However, you will still need GPU acceleration so don’t turn that off. 

Giving the old F5 another try, we see that we have our first 3D application.  It even comes complete with a spinning cube.

Going down the rabbit hole of developing 3D applications is beyond the scope of this post, but I did want you to at least get something up and running.  Make sure you let me know what cool things you come up with.

Eleven down and one to go.  Anyone care to guess what the last post is going be?  See you soon.

So where were we?  That’s right, the 10th day.  I’ve received a lot of great feedback from folks and I wanted to thank everyone for all of the comments.

On the tenth day of Silverlight the team delivered to me… better O/S integration.

I touched on this subject back on day 1’s : Native Windows.  For me, the addition of native window support in Silverlight 5 was a big win.  However, the team did not stop there.  There are several more areas that the team focused on and I thought this would be a great post to talk about them.

Power Awareness

The first time I heard someone from the team present this feature, I have to admit, I didn’t really see the point.  However, that very night it became clear to me that this is a nice little feature to have.  Traditionally, Silverlight did not play a part in power management.  So if you had an application, say a video player, running but there was no real interaction taking place the computer might go into sleep mode.  Which, ironically, happened to me that evening when I was streaming some videos from the previous MIX conference.  Silverlight 5 now takes care of that for you.  If you happen to have a video playing, Silverlight won’t let your machine take a little nap.  That means you don’t have to worry about occasionally moving the mouse around to keep things awake.  The best thing about this feature is that it does not require any code to take advantage of it.

P/Invoke

So raise your hands if you have used the Silverlight 4 COM interop.  Ok, now keep your hands up if you had fun doing it.  Where did all of the hands go?  COM interop was a very important addition to Silverlight 4.  It really opened the door to allow you to create applications that stepped outside of the sandbox and interacted with the system.  However, it did have one little flaw, COM. It’s like IE 6, just when you thought you had seen the last of it… I digress..

P/Invoke takes that interop access one step further.  Now you have more direct access to the Win32 API and you can pretty much do anything you need to on the system.  Of course, this is only available in elevated trust mode.  There are a lot of examples out on the web that go into this in more detail.  I would suggest strolling over to Pete Brown’s blog and take a look at his Enumerating Printers using P/Invoke  post to really get a feel for P/Invoke in action.

Unrestricted File System Access

Silverlight 5 opens up access to the file system, again in elevated trust mode, to your applications.  You are no longer constrained to certain paths for accessing files.

In thinking about this feature, I have to tell a little story.  Being a Silverlight MVP has been a lot of fun and one of the great things about it is the interaction you get to have with the product team.  This feature is one of the first times that I witnessed the team really listening to us non-blue badges (not that it was the first time, but simply the first time that I was able to be a part of it).  Someone from the team asked the group about the file system access and purposed to open up the access to more locations but not the entire system.  A few people responded with some use cases where full access might be better, and just like that, we have full access to the file system.  It has been really interesting to be involved in that process.

64-Bit Support

All I can say is “finally”.  Silverlight 5 now offers a 64-bit client.  My understanding is that this was no small task.  However, I am truly grateful that it is now available.  There is no longer a need to attempt to explain to folks why their 64-bit IE wouldn’t load your Silverlight applications. Whew…  Thank you Silverlight team…

Full Trust for In-Browser Mode

Full trust is no longer just for your out-of-browser applications.  You can now implement it in-browser.  This give you a leg up when having to install your applications is not the ideal solution.

Save Dialog Default Name

One last little nugget is you can now specify a default file name in the save file dialog.  Doing this is rather straight forward.  The SaveFileDialog has a new property, DefaultFileName.  I bet you can’t guess how to use this feature….

This gives you a little more control, or at a minimum suggestive power, on what a file is named when saving.

So lot’s of goodies in Silverlight 5 when talking about the O/S integration.  Make sure you take a look at them and take advantage of them in your next application.  Two more days left and we will bring this series to a close.  Don’t worry, you won’t have to wait a few weeks for the last two posts.

This past year was an amazing one for me.  I met a ton of brilliant people in the community, was able to be a part of events like the Open Source Fest at MIX, and even had a chance to speak on the Microsoft campus at VS Live.  There has been some major advancements in technology this year and it’s proving to be an exciting time to be a developer.  So all in all, it’s been a lot of fun.

So on to the new year….

Technology to Watch

This year is going to be a very interesting year.  Let’s start off with the big one.  Windows 8 should be out sometime this summer and with it Microsoft should launch itself into the tablet space.  There is going to be a lot of opportunities and I plan on taking advantage of them (care to join me?).  In fact, if all goes well, I will have an entry in the upcoming App Contest (https://buildwindowscontest.com/).  I also have a couple of additional apps planned for later in the year.

WP7 continues to advance as a player in the mobile industry.  Knowing some of the folks working on the WP7 platform, I’m expecting more great things to come over the next year (and no, I have no idea what those are).

It seems that the biggest news in our industry is the rise of HTML5.  I have to admit, I really haven’t dug too much into it yet.  However, it will be my language to learn in 2012.  There are several great projects out there that bring some of the knowledge of the XAML frameworks (like MVVM) to javascript and I am looking forward to learning more about them. 

Azure continues to evolve as well.  I have recently really started to push on Azure a bit and have liked most of what I have seen.  You will start to see some blog posts from me on my Azure experiences.  I have a new product under development that is centered around Azure and it’s been fun watching it evolve.

Now what about Silverlight?  I guess a Silverlight MVP can’t really talk about the next year without discussing it.  Especially this year.  I think the Silverlight 5 release is a very solid product and it is going to have it’s uses for some time to come.  As far as Silverlight 6, I think I’m going to have to agree with Shawn Wildermuth on this one.  He stated on The Table Show (http://thetabletshow.com/default.aspx?showNum=11) that he really couldn’t tell you what new features he would want in a new major release (outside of some edge cases).  I really couldn’t come up with much myself.  With 10 years of support, I think it will work for me.

What to Expect from me…

I’ve put a great deal of thought into what this year will look like for me.  I’ve got a few exciting things in the works that I can’t wait to tell folks about.  But overall you are going to see a lot more diversity around here.

First and foremost, the PivotViewer posts aren’t going anywhere. The latest version has really advanced the control and I have a ton of articles to write on the subject.  I have a new version of PivotViewer Lessons (http://pivotviewerlessons.codeplex.com) in the works, with plans for a second project to follow.

Of course Silverlight will continue to be a common topic around here.  There are still a lot of things to explore in the latest release.  However, you are going to see a lot of XAML posts in different areas as well (Metro and Wp7 for sure).

As I said earlier, HTML5 is going to consume a lot of my learning time this year.  You can expect to see some of what I learn posted here as well.

So you guessed it, 2012 is going to involve a lot of writing on my part.  I’m looking forward to it and hope a few of you will stick around to provide some feedback.

With 2012, you will hopefully see me speaking a bit more.  I had a chance to speak at several interesting places last year and hope to be able to hit a few more this year.  Like the blog, the topics will vary a bit, but you can expect some new Metro talks.

All in all, it should be a busy year with lots of exciting things going on.  But just like most software projects, we will see where scope creep and project delays take us.

Final Thoughts…

Well midnight is fast approaching Texas, so I will wrap this up.  I wanted to thank everyone for all of the great feedback and for simply taking the time to stop by my blog every once and a while.  A special thanks to the hand full of friends I made this year and for all of their support and advice they have given me.  I’ve had a lot to learn this year and your expertise has really helped me along the way.

I hope everyone has a great 2012!  I wish you and your family happiness and good fortune.  I also want to challenge everyone to continue to grow within the community.  Whether you are currently an active participant or have yet to start a blog, this next year will be a great one to get involved in a bit more.  I look forward to seeing everyone around the water cooler…

On the ninth day of Silverlight, the team delivered to me… implicit data templates.

Prior to Silverlight 4, all styles and data templates were explicit.  This meant that every time you referenced one you had to do so by the key name.  Silverlight 4 introduced implicit styles where you could use the new property TargetType to set the default style of a control.  This was a monumental leap in component reusability and style management.

Silverlight 5 introduced the next piece by providing implicit data templates.  The best way to really discuss implicit data templates and their benefits is to walk thru it.

Using Data Templates

Let’s get started with taking a brief look at data templates themselves.  After starting a new Silverlight project, we will create a templated ListBox.  First we need to create a data object to work with.  For this first example let’s create a simple Vehicle class:

public class Vehicle
{
    public string Make { get; set; }
    public string Model { get; set; }
    public Color Color { get; set; }
}

Now will we create a simple ListBox to display some data.

<Grid x:Name="LayoutRoot" Background="White">
    <ListBox x:Name="myList"
                Width="325"
                Height="400"
                VerticalAlignment="Center"
                HorizontalAlignment="Center"
                BorderThickness="1"/>
</Grid>

The last step is to create some data in our code behind and set the ListBox’s ItemsSource property to it.

public MainPage()
{
    InitializeComponent();

    myList.ItemsSource = new List<Vehicle>()
    {
        new Vehicle() {Make = "Dodge",
                       Model = "Charger",
                       Color = Colors.Black},
        new Vehicle() {Make = "Ford",
                       Model = "Mustang",
                       Color = Colors.Red},
        new Vehicle() {Make = "Chevy",
                       Model = "Corvette",
                       Color = Colors.Yellow},
        new Vehicle() {Make = "Ford",
                       Model = "Pinto",
                       Color = Colors.Blue}
    };
}

Now if you run the example, you will get a list of items that have the full name of our Vehicle class. 

Not exactly a  world class list box is it?  So now let’s see a data template in action.  We will create a DataTemplate on our page and assign the ListBox’s ItemTemplate property to it.

<UserControl.Resources>
    <local:SolidColorBrushConverter x:Key="colConv"/>
    <DataTemplate x:Key="vehicleTemplate">
        <Grid Width="300">
            <Grid.Background>
                <LinearGradientBrush StartPoint="0,0"
                                        EndPoint="0,1">
                    <GradientStop Color="White" Offset="0"/>
                    <GradientStop Color="LightGray" Offset="1"/>
                </LinearGradientBrush>
            </Grid.Background>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="225"/>
                <ColumnDefinition Width="75"/>
            </Grid.ColumnDefinitions>
            <StackPanel Margin="10, 5, 0, 5">
                <TextBlock
                    FontSize="18"
                    Text="{Binding Make}"/>
                <TextBlock
                    FontSize="14"
                    Margin="0,5,0,0"
                    Text="{Binding Model}"/>
            </StackPanel>
            <Rectangle Grid.Column="1"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Height="50"
                Width="50"
                Fill="{Binding Color,
                        Converter=
                        {StaticResource colConv}}"/>
        </Grid>
    </DataTemplate>
</UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White">
<ListBox x:Name="myList"
            Width="325"
            Height="400"
            VerticalAlignment="Center"
            HorizontalAlignment="Center"
            ItemTemplate="{StaticResource vehicleTemplate}"
            BorderThickness="1"/>
</Grid>

You might notice I had to add a value converter in there.  The converter takes a Color and returns a SolidColorBrush.  Here is that value converter.

public class SolidColorBrushConverter : IValueConverter
{

    public object Convert(object value,
        Type targetType,
        object parameter,
        System.Globalization.CultureInfo culture)
    {
        if(value is Color)
        {
            return new SolidColorBrush((Color)value);
        }

        return null;
    }

    public object ConvertBack(object value,
        Type targetType,
        object parameter,
        System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Now running our application will yield a bit more information than last time. 

Implicate Data Templates

In the previous example we specifically set the ItemTemplate in the ListBox to our data template.  However, with implicit data templates, we no longer need to do that.  The DataTemplate class has a new property, much like the Style’s TargetType, DataType.  By setting the DataType to our Vehicle class, we our telling Silverlight to use this data template unless otherwise told.  We no longer need to set the ItemTemplate on our ListBox.  The modified XAML should look like this:

<UserControl.Resources>
    <local:SolidColorBrushConverter x:Key="colConv"/>
    <DataTemplate DataType="local:Vehicle">
        <Grid Width="300">
            <Grid.Background>
                <LinearGradientBrush StartPoint="0,0"
                                        EndPoint="0,1">
                    <GradientStop Color="White" Offset="0"/>
                    <GradientStop Color="LightGray" Offset="1"/>
                </LinearGradientBrush>
            </Grid.Background>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="225"/>
                <ColumnDefinition Width="75"/>
            </Grid.ColumnDefinitions>
            <StackPanel Margin="10, 5, 0, 5">
                <TextBlock
                    FontSize="18"
                    Text="{Binding Make}"/>
                <TextBlock
                    FontSize="14"
                    Margin="0,5,0,0"
                    Text="{Binding Model}"/>
            </StackPanel>
            <Rectangle Grid.Column="1"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Height="50"
                Width="50"
                Fill="{Binding Color,
                        Converter=
                        {StaticResource colConv}}"/>
        </Grid>
    </DataTemplate>
</UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White">
<ListBox x:Name="myList"
            Width="325"
            Height="400"
            VerticalAlignment="Center"
            HorizontalAlignment="Center"
            BorderThickness="1"/>
</Grid>

Running the application you will notice that is looks identical to the last run.  Just for completion, you can change the ListBox to a ComboBox and will see that the same template is being used. 

Pretty slick stuff, huh?  Now it is possible to start building components that are reusable and not reliant on specific names for data templates and can be a bit more flexible.  However, as cool as that is, let’s crank it up a notch.  What if we added 3 new classes that all inherit from the Vehicle class (Car, Motorcycle, Truck)?  Let’s add these new classes, each with a unique new property :

public class Car : Vehicle
{
    public int PassengerCount { get; set; }
}

public class Motorcycle : Vehicle
{
    public string Type { get; set; }
}

public class Truck : Vehicle
{
    public int TrailerLength { get; set; }
}

Next we will update our code that is creating our collection set to use our new objects.  You might notice we kept the original Vehicle list since all of our objects inherit for the Vehicle class.

myList.ItemsSource = new List<Vehicle>()
{
    new Car() {Make = "Dodge",
                    Model = "Charger",
                    Color = Colors.Black,
                    PassengerCount = 5},
    new Car() {Make = "Ford",
                    Model = "Mustang",
                    Color = Colors.Red,
                    PassengerCount = 4},
    new Motorcycle() {Make = "Harley Davidson",
                    Model = "Sporster",
                    Color = Colors.Yellow,
                    Type = "Cruiser"},
    new Truck() {Make = "Peterbilt",
                    Model = "387",
                    Color = Colors.Blue,
                    TrailerLength = 20}
};

Now if we run our application, you will notice that nothing has changed.  That is because we are still using our Vehicle template.  However, with our new classes, maybe we would like to display different data based on the type of class.  For instance, maybe we can show the number of passengers a car can hold or the length of trailer a truck has.  In SL4 you could accomplish this by creating a custom content control and define the content based off of the class (a neat little trick I picked up from the PivotViewer team).  Now it is as simple as defining multiple data templates.  So let’s add a few more data templates to our UserControl’s resources.

<DataTemplate DataType="local:Car">
    <Grid Width="300">
        <Grid.Background>
            <LinearGradientBrush StartPoint="0,0"
                                EndPoint="0,1">
                <GradientStop Color="White" Offset="0"/>
                <GradientStop Color="LightGray" Offset="1"/>
            </LinearGradientBrush>
        </Grid.Background>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="150"/>
            <ColumnDefinition Width="75"/>
            <ColumnDefinition Width="75"/>
        </Grid.ColumnDefinitions>
        <StackPanel Margin="10, 5, 0, 5">
            <TextBlock
            FontSize="18"
            Text="{Binding Make}"/>
            <TextBlock
            FontSize="14"
            Margin="0,5,0,0"
            Text="{Binding Model}"/>
        </StackPanel>
        <StackPanel HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    Grid.Column="1">
            <TextBlock HorizontalAlignment="Center"
                        FontSize="22"
                        FontWeight="Bold"
                        Text="{Binding PassengerCount}"/>
            <TextBlock FontSize="10"
                        Text="Passengers"/>
        </StackPanel>

        <Rectangle Grid.Column="2"
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Height="50"
        Width="50"
        Fill="{Binding Color,
                Converter=
                {StaticResource colConv}}"/>
    </Grid>
</DataTemplate>
<DataTemplate DataType="local:Motorcycle">
    <Grid Width="300">
        <Grid.Background>
            <LinearGradientBrush StartPoint="0,0"
                                EndPoint="0,1">
                <GradientStop Color="White" Offset="0"/>
                <GradientStop Color="LightGray" Offset="1"/>
            </LinearGradientBrush>
        </Grid.Background>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="225"/>
            <ColumnDefinition Width="75"/>
        </Grid.ColumnDefinitions>
        <StackPanel Margin="10, 5, 0, 5">
            <TextBlock
            FontSize="18"
            Text="{Binding Make}"/>
            <StackPanel Orientation="Horizontal" Margin="0,5,0,0">
                <TextBlock
            FontSize="14"
            Text="{Binding Model}"/>
                <TextBlock HorizontalAlignment="Center"
                    FontSize="14"
                    FontStyle="Italic"
                    Text="{Binding Type}"
                    Margin="60,0,0,0"/>
            </StackPanel>
        </StackPanel>
        <Rectangle Grid.Column="2"
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Height="50"
        Width="50"
        Fill="{Binding Color,
                Converter=
                {StaticResource colConv}}"/>
    </Grid>
</DataTemplate>

<DataTemplate DataType="local:Truck">
    <Grid Width="300">
        <Grid.Background>
            <LinearGradientBrush StartPoint="0,0"
                                EndPoint="0,1">
                <GradientStop Color="White" Offset="0"/>
                <GradientStop Color="LightGray" Offset="1"/>
            </LinearGradientBrush>
        </Grid.Background>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="150"/>
            <ColumnDefinition Width="75"/>
            <ColumnDefinition Width="75"/>
        </Grid.ColumnDefinitions>
        <StackPanel Margin="10, 5, 0, 5">
            <TextBlock
            FontSize="18"
            Text="{Binding Make}"/>
            <TextBlock
            FontSize="14"
            Margin="0,5,0,0"
            Text="{Binding Model}"/>
        </StackPanel>
        <StackPanel HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    Grid.Column="1">
            <TextBlock HorizontalAlignment="Center"
                        FontSize="22"
                        FontWeight="Bold"
                        Text="{Binding TrailerLength}"/>
            <TextBlock FontSize="10"
                        Text="Length"/>
        </StackPanel>

        <Rectangle Grid.Column="2"
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Height="50"
        Width="50"
        Fill="{Binding Color,
                Converter=
                {StaticResource colConv}}"/>
    </Grid>
</DataTemplate>

Running our application now gives us unique displays for each type of class. 

A thing to note is that this will still run if you keep the original Vehicle data template in there.  This is helpful when only some of the inherited classes need to have generic interfaces.  You can create an interface for the base class and use it as a fallback. 

From here, it is possible to take things a step further.  You can begin to create UI’s that are very dynamic and driven off of data templates.  For instance, you can have generic master/detail screens that the UI is defined by the binding  data type.  Pretty slick stuff if you ask me and I will dig into more of that at a later date.

The code for this example can be found here: DaysOfSilverlight_ImplicitDataTemplates.zip

Down to the final three.  As we are rolling into a big holiday weekend, I hope everyone has wonderful time celebrating with friends and family.  See you back soon…

On the eighth day of Silverlight, the team delivered to me… vector printing.

Printing, printing, printing.  Prior to SL4, I couldn’t even begin to tell you how many times I had clients “absolutely have to have" printing support.  Over the last year and a half I written more demos about printing than I have implementations.  Seems that everyone decided PDF exports worked just fine.  Go figure.

However, vector printing is a great new feature for folks needing printing support.  It offers several improvements over the SL4 bitmap printing and is worth discussing.

Let’s take a closer look at some of those benefits.  The first thing to mention is that, from an API standpoint, printing is still backwards compatible with SL4.  So it has the same PrintDocument class and it’s events are still the same.  However, the Print() method now defaults to vector printing when available.  You don’t have to make any changes to get the benefits of vector printing.

It is worth noting that the vector printing added to SL5 only supports PostScript vector printing.  So if your printer, or more accurately your print driver, does not support PostScript Silverlight will print using the original bitmap printing.  This is a subtle thing that is being over looked quite frequently.

Another time when that Silverlight will revert to bitmap printing is if you have any elements on your screen that Silverlight cannot convert to PostScript.  Just a few things to keep in mind.  However, if Silverlight does revert back to bitmap printing, it does so silently and without error.

The printing API has been extended slightly to give the developer a little more control.  The first is a new method PrintBitmap().  I bet you can’t guess what this does.  Yep, it starts the SL4 version of bitmap printing.

The next change is a new Print() method.  The original Print(string documentName) method is still there, however, SL5 adds a new signature that gives you a little more flexibility.  The new method is:

Print(string name, PrinterFallbackSettings settings, bool useDefaultPrinter)

The first parameter is the document name and is treated the same as the other method.  The next parameter exposes a new class PrinterFallbackSettings.

The PrinterFallbackSettings class only contains two properties.  The first, ForceVector, is simply a bool value that determines whether Silverlight is forced to print in the vector format or not. 

The second property, OpacityThreshold, is a bit more complicated.  By default, if the XAML that you send to the print API contains any elements with the opacity set lower than 1.0, Silverlight will use bitmap printing.  The OpacityThreshold allows you to adjust that value.  The value you set, which should be between 0.0 and 1.0, tells Silverlight what is the cut-off opacity value.  For instance, if you set the value to 0.5 any element that has an opacity set lower than 0.5 you bump you to printing in bitmap mode.  One thing to remember is that if you lower the threshold any element whose opacity is still in range will print with the opacity set to 1.0.  So if your element has a 0.5 opacity in our above example it will print, but the results just might not be what you are expecting.

The last property is a bool the lets you skip the Printer dialog box and go straight to the default printer.  This only works when you have elevated trust enabled in your application. Otherwise an exception will bet thrown. Believe it or not, this little bool is a big deal for this release. There were several COM hacks written to allow this in SL4, especially for point-of-sale systems. 

Wrapping up this post, you will probably notice there isn’t any code on this post.  Since the API hasn’t changed all that much, there really wasn’t much to demo here. 

The biggest complaint I here about printing in Silverlight is the minimalist API.  It leaves a lot of work for you to do on your own.  The plus side of this is that you can make it do exactly want you want.  The down side is you have to write the code to make it do exactly what you want.  There have been some great report writer projects kicked off on CodePlex and that is a great place to start when building out an API that is better suited to your needs.

Only four most posts in my 12 Days of Silverlight series.  And if you are wondering, yes, the next post will have code.