Q & A

Q1. When is this free training available?
A1. The entire weekend of Nov 12th 2011 through Nov 14th 2011.

Q2. Do I have to be a Pluralsight subscriber to get this awesome training?
A2. This training will be freely available to everyone. You do not have to be a subscriber.

Q3. What does the course cover?
A3. Well let’s take a look:

• Getting started with Prism
• Bootstrapper and Shell
• Regions
• Modules
• Views
• Communication
• State-Based Navigation
• View-Based Navigation

More course information.

Q4. Who is the author of this kick ass Prism course?
Q4. That would be me.

Q5. Is it really free?
Q5. You’re kidding right? Didn’t I already cover this part? Yes, it is free.

New and Improved

If you are a subscriber and have already watched the course, I would like to bring to your attention that there have been two new modules added.  These modules will cover everything you need to know in order to start using the navigation services provided by Prism.  This includes state-based navigation and view-based navigation.

Mark your calendar for Nov 12th and be sure to cram as much Prism knowledge into your brain as you can before the weekend ends.  Don’t worry, if you run out of time you can always ask me questions directly.  You can contact me either through Twitter (@brianlagunas) or through the Extended WPF Toolkit project site.  I hope you enjoy the training.

http://channel9.msdn.com/shows/geekSpeak/geekSpeak-Recording-Local-Messaging-and-Silverlight-with-Brian-Lagunas/

And yes, I did give Elegant Code some love on the show.

• Get the Bing Maps Silverlight Control
• Get a Bing Maps API Key
• Play with the Bing Maps interactive SDK Application
• Read the Bing Maps blog
• Check out the Bing Maps forum

You can also get the source code to my presentation here:  Download the source.

Note: You will need to download the Bing Maps Silverlight control and re-reference the DLLs before the source will compile.  Also, you have to have a Bing Maps API key in order to use any of the geocoding service examples.

<UserControl.Resources>

    <Style x:Key="myButtonStyle" TargetType="Button">

        <Setter Property="Background" Value="Blue" />

        <Setter Property="Foreground" Value="Green" />

        <Setter Property="FontSize" Value="24" />

    </Style>

</UserControl.Resources>

Then, you have to set the Style property on the Button control you want to apply the style to:

<Button Content="Button 1" Style="{StaticResource myButtonStyle}" />

Now, what if I want to apply that same style to every button in my application?  Well I would have to go and find every single button in my application and set the Style property accordingly.

<Button Content="Button 1" Style="{StaticResource myButtonStyle}" />

<Button Content="Button 2" Style="{StaticResource myButtonStyle}" />

<Button Content="Button 3" Style="{StaticResource myButtonStyle}" />

How many buttons are in your application?  What a pain in the you know what.  Well not anymore.  New in Silverlight 4 will be the ability to set your styles implicitly.  What does this mean?  It means that you can now declare your style, give it a TargetType, and exclude the x:Key; then it will apply that style to any instance of the TargetType control type.

<UserControl.Resources>

    <Style TargetType="Button">

        <Setter Property="Background" Value="Blue" />

        <Setter Property="Foreground" Value="Green" />

        <Setter Property="FontSize" Value="24" />

    </Style>

</UserControl.Resources>

<Grid x:Name="LayoutRoot">

    <StackPanel>

        <Button Content="Button 1" />

        <Button Content="Button 2" />

        <Button Content="Button 3" />

    </StackPanel>

</Grid>

Notice that I don’t need to set the Style property on my button controls individually anymore.

Well what if I have a style that I want to implicitly use, but I have this one special button that I want to give a different style?  Well in that case, just create a new Style and give it a x:Key, then set the Style property on your control.

<Style x:Key="myOtherButtonStyle" TargetType="Button">

   <Setter Property="Background" Value="Orange" />

   <Setter Property="Foreground" Value="Red" />

   <Setter Property="FontSize" Value="12" />

</Style>

<Button Content="Button 1" />

<Button Content="Button 2" Style="{StaticResource myOtherButtonStyle}" />

<Button Content="Button 3" />

Now, your special button will use your new style, and all others will remain themed.

Sneak Peek: Silverlight Application Themes

Tim Heuer has recently given us a preview of three new theme packs coming to Silverlight.

“GrayScale”

“Windows Theme”

“Metro”

Thanks Tim!

Well, this is much easier than you may think and I will show you how to accomplish this with just a few simple helper methods, and you can use any grid of your choice.  For this example, I will be using the DataGrid that comes with the Silverlight Toolkit. Make sure you download and install it, because I am not including the System.Windows.Controls.Data assembly required for the DataGrid.

It will be located at c:\Program Files\Microsoft SDKs\Silverlight\v3.0\Libraries\Client\System.Windows.Controls.Data.dll

In my scenario I am building a staffing application and I have a “StaffMember” object that has a collection of “Period” objects as a child property.  My objects look something like this:

public class StaffMember

{

    public string Name { get; set; }

    public string Department { get; set; }

    public ObservableCollection<Period> Periods { get; set; }

}

public class Period

{

    public string Title { get; set; }

    public int Hours { get; set; }

}

Pretty simple!  now, lets create our DataGrid that will show our data for editing.

<UserControl x:Class="SilverlightApplication1.MainPage"

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

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

             xmlns:grid="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"

             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 

             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 

             mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">

    <Grid x:Name="LayoutRoot">

        <grid:DataGrid x:Name="dataGrid"/>

    </Grid>

</UserControl>

Okay, now I don’t know how many Periods my StaffMember will have until I get the data back from the database at run time.  For demonstration purposes, I just created a method on my StaffMember class that would create my objects by iterating through a loop.

public static List<StaffMember> GetData()

{

    List<StaffMember> dataList = new List<StaffMember>();

    for (int i = 0; i < 3; i++)

    {

        StaffMember member = new StaffMember { Name = String.Format("Name#{0}", i), Department = String.Format("Department#{0}", i) };

        ObservableCollection<Period> periods = new ObservableCollection<Period>();

        for (int j = 0; j < 5; j++)

            periods.Add(new Period() { Title = String.Format("Period#{0}-{1}", i, j), Hours = j });

        member.Periods = periods;

        dataList.Add(member);

    }

    return dataList;

}

Now, we need to set the datasource on the DataGrid.  Since we are creating the columns at runtime make sure you set AutoGenerateColumns to false;

List<StaffMember> dataList = StaffMember.GetData();

dataGrid.AutoGenerateColumns = false;

dataGrid.ItemsSource = dataList;

dataGrid.Columns.Clear();

Next, lets take care of creating the easy columns first.  I created a method that its’ sole purpose is to give me new DataGridTextColumns.

private static DataGridTextColumn CreateTextColumn(string fieldName, string title)

{

    DataGridTextColumn column = new DataGridTextColumn();

    column.Header = title;

    column.Binding = new System.Windows.Data.Binding(fieldName);

    return column;

}

Using this method we can create our first two columns.

dataGrid.Columns.Add(CreateTextColumn("Name", "Staff Name"));

dataGrid.Columns.Add(CreateTextColumn("Department", "Company Department"));

Your DataGrid should now look something like this.

Now we need to create our columns based off the Periods collection.  To do this we will utilize a DataGridTemplateColumn.  The first thing we need to do is create a method that will dynamically create a DataTemplate that the DataGridTemplateColumn will use as the CellTemplate.

private string CreateColumnTemplate(int index, string propertyName)

{

    StringBuilder CellTemp = new StringBuilder();

    CellTemp.Append("<DataTemplate ");

    CellTemp.Append("xmlns='http://schemas.microsoft.com/winfx/");

    CellTemp.Append("2006/xaml/presentation' ");

    CellTemp.Append("xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'>");

    CellTemp.Append(String.Format("<TextBlock Text='{{Binding Periods[{0}].{1}}}'/>", index, propertyName));

    CellTemp.Append("</DataTemplate>");

    return CellTemp.ToString();

}

What I am doing here is using a StringBuilder to create a DataTemplate, represented by XAML.  Pay special attention to the TextBlock’s binding.  I am using String.Format to create my binding string base off the index the of the object in the collection and the name of the property on the child object I want to bind to.  Now, lets create our template that will be used for editing.

private string CreateColumnEditTemplate(int index, string propertyName)

{

    StringBuilder CellTemp = new StringBuilder();

    CellTemp.Append("<DataTemplate ");

    CellTemp.Append("xmlns='http://schemas.microsoft.com/winfx/");

    CellTemp.Append("2006/xaml/presentation' ");

    CellTemp.Append("xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'>");

    CellTemp.Append(String.Format("<TextBox Text='{{Binding Periods[{0}].{1}, Mode=TwoWay}}'/>", index, propertyName));

    CellTemp.Append("</DataTemplate>");

    return CellTemp.ToString();

}

This method is very similar to the previous one we wrote, but notice the subtle difference; I am using a TextBox instead of a TextBlock, and the Mode is set to TwoWay.  This will allow us to edit the values in the DataGrid.  Now we need a method that will actually create the TemplateColumns.

private DataGridTemplateColumn CreateTemplateColumn(int i, string propName)

{

    DataGridTemplateColumn column = new DataGridTemplateColumn();

    column.Header = String.Format("Period#{0}.{1}", i, propName);

    column.CellTemplate = (DataTemplate)XamlReader.Load(CreateColumnTemplate(i, propName)); //display template

    column.CellEditingTemplate = (DataTemplate)XamlReader.Load(CreateColumnEditTemplate(i, propName)); //edit template

    return column;

}

Notice that we are setting the CellTemplate and CellEditTemplate by using the XamlReader to load our StringBuilder result and cast it as a legitimate DataTemplate the column can use.  Now that we have the method that will create our TemplateColumns, lets go ahead and build our dynamic columns to the n-level.  We do this by looping though the number of columns that need to be created and using our CreateTemplateColumn method to add the new columns to the DataGrid.

int periodCount = dataList[0].Periods.Count;

for (int i = 0; i < periodCount; i++)

{

   dataGrid.Columns.Add(CreateTemplateColumn(i, "Hours"));

}

Now of course, in the real world you would not want to use the first index of the child collection to figure out how many columns to build.  I would recommend some kind of definition object that will define what columns and how many columns to build.

That is it.  You have now successfully satisfied your customer’s addiction to Excel.  Well, at least a little bit.

Download Source

So, I started thinking to myself, that the real purpose behind Text-To-Speech isn’t just the cool factor, but it is accessibility for impaired users.  I have been doing web development for nearly a decade, and I have always been conscious about web users with impairments that may make viewing or navigating my websites more difficult.  Text-To-Speech isn’t very helpful if it will only work in a fully trusted out of browser Silverlight 4 application on a Windows machine. So instead, lets create a Text-To-Speech solution that will work inside the browser, on any browser, on any machine.  And heck, I want this to be in Silverlight 3.

Lets get started by creating a new Silverlight 3 application, and be sure to include a web project as well.

Right click the web project and add a reference to the System.Speech.dll.

Next, lets right click the web project and click Properties –> Web and set the specific port number to your liking, I set mine to 1914. This will come in handy when we create our WCF service.

Now we need to create the WCF service that will take our text and send it back as a WAV stream, so go ahead and right click the web project and select “Add New Item”.  From this list add a new WCF service and name is SpeechService.  Now this is important; when you have created your WCF service an endpoint is created for you in the Web.config file.  You need to change the binding of the endpoint to basicHttpBinding.  Silverlight only works using basicHttpBinding, and will not create the ServiceReferences.ClientConfig file properly if you do not do this.

Now, lets add an OperationCOntract to your WCF services interface called Speak that returns a byte[], and takes a string parameter.

[ServiceContract]

public interface ISpeechService

{

    [OperationContract]

    byte[] Speak(string textToSay);

}

The implementation of this method will look like the following:

public byte[] Speak(string textToSay)

{

    SpeechSynthesizer ss = new SpeechSynthesizer();

    MemoryStream ms = new MemoryStream();

    ss.SetOutputToWaveStream(ms);

    ss.Speak(textToSay);

    return ms.ToArray();

}

The next thing we need to do is create our UI in Silverlight.  Here is what mine looks like.

<Grid x:Name="LayoutRoot">

<StackPanel>

    <TextBox x:Name="_txtTextToSay" />

    <Button Content="Speak To Me" Click="Button_Click" />

    <MediaElement x:Name="_audioPlayer"/>

</StackPanel>

</Grid>

Create an event handler for your button.  Next add a service reference to your SpeechService in your web project.

The next part is somewhat complicated and time consuming.  You have to write your own WAVV decoding class that takes the byte array that is return from the service and converts it to a System.Windows.Media.MediaStreamSource. Luckily for you, I already did this for you with the help of some resources on MSDN.  In the button’s event handler add this code:

private void Button_Click(object sender, RoutedEventArgs e)

{

    SpeechServiceClient client = new SpeechServiceClient("BasicHttpBinding_ISpeechService");

    client.SpeakCompleted += (o, ea) =>

        {

            WavMediaStreamSource audioStream = new WavMediaStreamSource(new MemoryStream(ea.Result));

            _audioPlayer.SetSource(audioStream);

        };

    client.SpeakAsync(_txtTextToSay.Text);

}

Basically what this does is uses the WavMediaStreamSource class I created that inherits from MediaStreamSource, takes the byte[] returned from the SpeechService and converts it back to a stream, then is passes it off to my WAV decoding classes, which is used as the source for the MediaElement responsible for playing the audio.

All that is next is to build your solution and start making your Silverlight applications more accessible.

Download the Source

I thought creating a custom pre-loader was common knowledge, but I guess I was wrong. So, what is a custom pre-loader really? Well, it is a small and lightweight Silverlight application that runs while your main Silverlight application is being downloaded to the client. Creating your own is really easy and only involves a few basic steps.

The first thing we need to do is add a Silverlight JavaScript  page to the Web project of your Silverlight application. So just right click your Web project and click add new item, then select Silverlight JScript Page.

You can name it whatever you want. I named my SplashScreen.xaml. When you click “Add” you will notice two files were created for you; a XAML file and a JavaScript file.

The XAML file is where you will create your pre-loader UI. So lets create a simple UI.

<Canvas        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        x:Name="parentCanvas"        Width="850"        Height="600"        Background="OldLace"        >  <Canvas Canvas.Top="228.834" Canvas.Left="246.329" Width="357" Height="31.379">    <Rectangle Width="27.545" Height="1" x:Name="uxProgress" Canvas.Top="29.545" Canvas.Left="1.4">      <Rectangle.RenderTransform>        <TransformGroup>          <ScaleTransform x:Name="uxProgressBar" ScaleX="1" ScaleY="0"/>          <SkewTransform AngleX="0" AngleY="0"/>          <RotateTransform Angle="270"/>          <TranslateTransform X="0" Y="0"/>        </TransformGroup>      </Rectangle.RenderTransform>      <Rectangle.Fill>        <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">          <GradientStop Color="#FFFFFFFF" Offset="1"/>          <GradientStop Color="#FFFFFFFF" Offset="0"/>          <GradientStop Color="#FF2975D0" Offset="0.28"/>          <GradientStop Color="#FF2975D0" Offset="0.72"/>        </LinearGradientBrush>      </Rectangle.Fill>    </Rectangle>

    <TextBlock x:Name="uxStatus" Height="25" Canvas.Left="125" Text="Loading..." TextWrapping="Wrap" Canvas.Top="4.16"/>

    <Path Width="356.85" Height="1" Fill="#FF3A3A3A" Stretch="Fill" Stroke="#FF000000" Canvas.Top="0" Data="M0,170.5 L356.84209,170.5" Opacity="0.35"/>    <Path Width="1.662" Height="29.03" Fill="#FF3A3A3A" Stretch="Fill" Stroke="#FF000000" Canvas.Top="0.48" Canvas.Left="0.2" Data="M360,168 L360,0" Opacity="0.35" />

    <Path Width="357.84" Height="1" Fill="#FF3A3A3A" Stretch="Fill" Stroke="#FF000000" Canvas.Top="29" Data="M0,170.5 L356.84209,170.5" Opacity="0.35"/>    <Path Width="358.85" Height="1" Fill="#FFA2A2A2" Stretch="Fill" Stroke="#FF000000" Canvas.Top="30" Data="M0,170.5 L356.84209,170.5" Opacity="0.25"/>    <Path Width="1.662" Height="30" Fill="#FF3A3A3A" Stretch="Fill" Stroke="#FF000000" Canvas.Left="356.01" Data="M360,168 L360,0" Opacity="0.35" Canvas.Top="-0.498"/>    <Path Width="1" Height="31" Fill="#FFA2A2A2" Stretch="Fill" Stroke="#FF000000" Canvas.Left="357.333" Data="M360,168 L360,0" Opacity="0.245" Canvas.Top="-0.498" />  </Canvas></Canvas>

I actually copied this XAML from MSDN because I was to lazy to write my own.

The JavaScript file is where you will interact with you pre-loader.  To do this there are three properties that are exposed by the Silverlight plug-in:

1. splashscreensource: The URI of a XAML page that displays while the primary package (source) is being downloaded.
2. onsourcedownloadprogresschanged: References a JavaScript event handler that will be invoked continuously while the source is being downloaded.
3. onsourcedownloadcomplete: References a JavaScript event handler that will be invoked once, when the source download is complete.

Enter Params:

You will need to add two Object Params to your page hosting the Silverlight application.

<param name="splashscreensource" value="SplashScreen.xaml"/><param name="onSourceDownloadProgressChanged" value="onSourceDownloadProgressChanged" />

The first one tells the host where to find the custom XAML file you created. The second one tells it which JavaScript function to execute when the sourceDownloadProgressChanged event fires.

So go ahead and open up your JavaScript file and delete all the code that is in there and replace it with this:

function onSourceDownloadProgressChanged(sender, eventArgs) {    sender.findName("uxStatus").Text = "Loading: " + Math.round((eventArgs.progress * 1000)) / 10 + "%";    sender.findName("uxProgressBar").ScaleY = eventArgs.progress * 356;}

The next step is very important. Make sure you add your JavaScript file into the head tag of your hosting page.

<script type="text/javascript" src="splashscreen.js"></script>

Now in order to test this thing, you need to add something very big to your main Silverlight application, set its Build Action to Content, and set Copy to Output Directory to Copy if newer.  I added a video file that was about 100MB in size. Now run your application.

And there is our custom pre-loader.

For more information on creating custom pre-loaders visit http://msdn.microsoft.com/en-us/library/cc838130(VS.95).aspx

Download the Source

Recap:

The Silverlight and WPF platforms are very similar, but they do not have binary compatibility; this means that an assembly compiled for one platform cannot execute on the other platform (Although, the story is a little different in Silverlight 4). You may want to target some or all of your application on WPF and Silverlight for a number of reasons.

Due to the fact that Silverlight and WPF are so closely related, the bulk of your application code can be shared between the two platforms. This encourages heavy use of pattern based development to isolate the logic from the presentation and maximize the separation between UI code and non-UI code.

Elements you can share:

• Presenters
• Controllers
• Models
• Services
• Unit tests
• Simple views, if the XAML used is supported by both Silverlight and WPF.

Elements that are harder to share:

• Complex views (XAML)
• Controls
• Styling
• Animation

Like always, if anyone has any questions feel free ask.

Once you get beyond the basic requirements, the “basic video player” becomes very involved.  A few questions that will need attention are:

• “How do you handler markers?”
• “How is streaming video handled?”
• “What do you do an an error?”
• “What’s the strategy for buffering?”
• “Can the video player support Smooth Streaming content?” (this is a whole different conversation)
• “How does the video player handle Closed captioning?”

And on and on the list goes.  At some point (hopefully in the analysis phase) you should ask is it better to build or buy.  If you decide to build, give me a call , but before you do I would encourage you to take a look at the following open-source (free) Silverlight video player options.  If nothing else, these players are great place to start.

I’ll start off with the three best options, then highlight other projects I am less familiar with.

Silverlight Media Framework (SMF)

http://smf.codeplex.com/

This is so much more than a video player, it’s an entire framework.  Developed by Vertigo in coordination with Microsoft, SMF has been used on the largest, most watched, Silverlight video players to date.  Wimbledon, NFL’s Sunday Night Football, PDC live keynote, and the NBC’s Vancouver Olympics video players, to name a few, all use SMF.  To say it’s robust would be an understatement.

Other than the standard video player controls, here are additional highlights of SMF:

• Smooth Streaming support – includes the Microsoft.Web.Media.SmoothStreaming.dll
• Great base classes like MergeableCollection, SimpleEventArgs and ObservableObject
• A light weight data project
• Logging
• Blendability – the player is easily skinned
• InStream markers
• Bitrate – the ability to show bitrate

For a more detailed list of features, and the code, check out SMF’s site.

Silverlight Video Player

http://slvideoplayer.codeplex.com/

If you have ever watched a video on Channel 9 (if you haven’t check out Silverlight TV) the player being used is this video player.  It was developed by Tim Heuer (Microsoft) and Joel Nuebeck (Silverlight MVP).  Although SVP does not the feature set the SMF player has, this is still a solid and proven video player.  It’s is probably the best option for a standard, light weight, feature rich video player.

Silverlight HyperVideo player (HVP)

http://slhvp.com/

A new video player to the scene is the Silverlight Hyper-Video Player (HVP).  This offering is from Jesse Liberty (Microsoft) and the Community.  Targeting Silverlight 4, HVP takes advantage of the MEF framework and is rooted in best development practices.  Although the project is young, there is a lot of traction and Jesse is doing an amazing job of documenting each step.  Keep on eye on HVP as this maybe the most scalable offering.

Others

The above three video players I have personally used, dug through the code, and/or evaluated.  The following projects I am not as familiar with, but could be possible options for your scenario:

Sharepoint video player – http://svp.codeplex.com/

Silverlight Media Player http://silverlight30.codeplex.com/

xLite player - http://xliteplayer.codeplex.com/

Recently I had a need to create a Checked Command for a ToggleButton.  There are many sources on how to create a Command, the best one probably being Erik Mork’s video, but there wasn’t a place to grab the a Command from.  The intention of this post is to share the Checked and UnChecked Prism Commands for you to use it in your project.  (Moving forward, it might make sense to create a repository of these Commands.)

Finally, before diving in, if you just want the code and to see an example, follow these links:

• Code
• Example

Commands

Creating the Commands is straight forward.  Derive from CommandBehaviorBase and specify the type.  Then, in the constructor, register the event.  Below are both the Checked and UnChecked commands.

Extensions for Xaml

After creating the Commands you need to create Static methods to reference in Xaml.  The Static methods are named Checked and UnChecked.  They include a definition for:

• SelectedCommandBehaviorProperty
• CommandProperty
• SetCommand
• GetCommand
• OnSetCommandCallback
• GetOrCreateBehavior

In an effort to be brief I have chosen to truncate the two static methods.  To take a closer look at the code, click on the image or download the code.

Checked.cs

UnChecked.cs
 

Hooking everything up

After the Commands are created, bind them to the ToggleButton in Xaml.  In this sample application there are three main files:

• MainPage.xaml – the presentation. This contains the binding to the Commands.
• MainPage.xaml.cs – the primary function of the code-behind is to new up the MainPageModel and set the DataContext.
• MainPageModel.cs – this is the model for the MainPage. It defines the commands the Xaml binds to as well as a property for the TextBox to bind to.

Below are images of the classes mentioned above:

MainPage.xaml

Note in this Xaml, line 20 binds to the CheckedState property in the MainPageModel.  The commands are bound on line 22 and 23.  Take notice of the namespace command.  Instead of referencing Microsoft.Practices.Composite.Presentation.Commands it references ProjectName.CustomCommands.

MainPage.xaml.cs

This is the code-behind for the above UserControl.  On the Loaded, a new instance of MainPageModel is initialized and then set as the DataContext to the UserControl.  The heavy lifting is done in the MainPageModel.

MainPageModel.cs

As noted above, the MainPageModel does the heavy lifting.  The following describe what happens in this file:

• Two DelegateCommands are defined for Checked and UnChecked. (line 36 and 41)
• A Property called CheckedState is defined and fires the PropertyChanged event when updated. (lines 13 – 22)
• Two methods are defined to handle the actions on the Commands. (lines 47 – 59)

The final product

Code | Example