I’ve uploaded the power point slides and demo projects from my presentations at devLink 2009 to my Sky Drive.

Introduction to Regular Expressions

Each of the examples in the slides have also been included as Regulator files. You can get Regulator here and see some of the Regular Expression resources I mentioned at http://del.icio.us/mattcasto/regex.

Creating Applications using the Model-View-ViewModel Pattern

The demonstration projects are organized into four folders – one for each step of the demonstration. If you came to my talk and just want to see the finished project, you should go straight to the fourth step. I only got through the first three steps, so you might want to compare that with Step 4.

I hope everyone came away from my talks informed. If you have any feedback to give, please feel free to do so at Speaker Rate.

Thanks to John Kellar and crew who organized and volunteered for this truly one of a kind community driven event. This year was even better than last and I feel honored to be able to contribute.

Also, kudos to Alan Stevens for facilitating the best open spaces I’ve been to. For some reason devLink seems to be the right environment for great discussions, and that’s the biggest reason I’ll keep coming back for more.

Pixel shaders, also known as shader effects, are a cool new feature the became available with Silverlight 3. The two most common effects – drop shadow and blur – are included with Silverlight. Its easy to add these effects to any UIElement.

Lets build upon the simple form that was introduced in Jeff’s post Day #10: Styling Silverlight Controls. We can add a drop shadow effect to the email address textbox by changing the Page.xaml to look like this.

<TextBox x:Name="Email" Text="" Grid.Row="4" Style="{StaticResource TextBox}">

    <TextBox.Effect>

        <DropShadowEffect ShadowDepth="2" BlurRadius="3" Direction="300" />

    </TextBox.Effect>

</TextBox>

Running the application will show the drop shadow effect has been applied to the textbox.

You can adjust the ShadowDepth, BlurRadius and Direction dependency properties to change the way the effect is rendered. For instance, if we change all of these values to be 10 we end up with this.

Let's also change the Page.xaml.cs code behind to set a Blur effect on the submit button while the Mailer service is being called.

void Clicky_Click(object sender, RoutedEventArgs e)

{

    if (Email.Text == ""){

        Email.Focus();

    }

    else

    {

        MailerReference.MailerSoapClient mailerClient = new MailerReference.MailerSoapClient();

        mailerClient.SendMailCompleted += new EventHandler<SilverlightStyling.MailerReference.SendMailCompletedEventArgs>(mailerClient_SendMailCompleted);

        string name = FirstName.Text.ToString() + " " + LastName.Text.ToString();

        string body = FirstName.Text.ToString() + "\n" + LastName.Text.ToString() + "\n" + Address.Text.ToString() + "\n" + CityStateZip.Text.ToString();

        mailerClient.SendMailAsync("jeff@jeffblankenburg.com", Email.Text.ToString(), name, body);

        Clicky.Effect = new System.Windows.Media.Effects.BlurEffect { Radius = 3 };

    }

}

void mailerClient_SendMailCompleted(object sender, SilverlightStyling.MailerReference.SendMailCompletedEventArgs e)

{

    Clicky.Content = "Sent!";

    Clicky.IsEnabled = false;

    Clicky.Effect = null;

}

Run the application now and click Submit after filling in an email address and you’ll see the button get blurry until the service call has completed.

Pixel shaders modify the pixels before they’re rendered to display. This takes place at runtime and doesn’t use hardware acceleration at this point, so don’t expect these effects to be the most performant.

Adding Your Own Shader

You can create your own pixel shaders using High-Level Shading Language (HLSL) compiled with the DirectX SDK. Or you can download the Shazzam application to create, test and debug your pixel shader. Shazzam was created for WPF but all of these effects should work in Silverlight as well. Note that you’ll need the DirectX SDK installed first.

I pulled the Invert Color sample from Shazzam’s Shader Loader samples into the project by selecting Tools->View Compiled Shaders, copying the file (InvertColor.ps) and pasting it into the SilverlightStyling project. Also, I made sure the build action for the file is set to Resource. I then created a class to load the InvertColor.ps file.

using System;

using System.Windows.Media.Effects;

namespace SilverlightStyling

{

    public class InvertColor : ShaderEffect

    {

        public InvertColor()

        {

            var uri = new Uri(@"/SilverlightStyling;component/InvertColor.ps", UriKind.Relative);

            PixelShader = new PixelShader { UriSource = uri };

        }

    }

}

Then I applied the shader to the entire form by adding the effect to the LayoutRoot grid element.

<UserControl x:Class="SilverlightStyling.Page"

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

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

    xmlns:SilverlightStyling="clr-namespace:SilverlightStyling" 

    Width="400" Height="300">

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

        <Grid.Effect>

            <SilverlightStyling:InvertColor />

        </Grid.Effect>

Now our entire form has a beautiful effect.

There are a lot more pixel shaders available from the Windows Presentation Foundation Pixel Shader Effects Library CodePlex project which was updated recently to work with Silverlight 3.

The modified project file can be downloaded here.

The demo projects and slides from my presentation at the Central Ohio Day of .NET are now posted to my Sky Drive.

Creating Applications using the Model-View-ViewModel Pattern

The demonstration projects are organized into four folders – one for each step of the demonstration. If you came to my talk and just want to see the finished project, you should go straight to the fourth step.

Each step folder has the WPF and Silverlight versions in their own folders as well.

I hope everyone enjoyed the talk. If you have any feedback to give, please feel free to do so at Speaker Rate.

Thanks to everyone who organized and volunteered for this great community driven event. It was a blast again this year!

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

No More Blank Slate

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

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

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

How It Works

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

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

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

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

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

   5: ...

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

   7:                   HorizontalContentAlignment="Stretch"

   8:                   VerticalContentAlignment="Stretch"

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

  10:                   Background="White"/>

  11: ...

  12: </UserControl>

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

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

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

   2: {

   3:     Button navigationButton = sender as Button;

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

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

   6: }

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

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

Custom Navigation

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

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

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

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

</nav:UriMapper>

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

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

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

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

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

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

           Title="Example Page"

           xmlns:slo="clr-namespace:SilverlightOverview"

           Loaded="Page_Loaded">

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

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

    </Grid>

</navigation:Page>

   1: public partial class ExamplePage

   2: {

   3:     public ExamplePage()

   4:     {

   5:         InitializeComponent();

   6:     }

   7:  

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

   9:     {

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

  11:         {

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

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

  14:         }

  15:     }

  16: }

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

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

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

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

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

Summary

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

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

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

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

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

Silverlight Overview

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

Feature By Feature

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

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

In the spirit of Code Share Week, I’ve decided to share a base class we’ve been using for our test classes on my current project.

Specification

We’ve been using a Specification base class for our NUnit test classes, which is kind of following the BDD style of unit testing.

   1: [TestFixture]

   2: public class Specification

   3: {

   4:     [SetUp]

   5:     public void Initialize()

   6:     {

   7:         Mocks = new MockRepository();

   8:         Before_each();

   9:         ReplayAll();

  10:         Because();

  11:     }

  12:  

  13:     [TearDown]

  14:     public void Cleanup()

  15:     {

  16:         After_each();

  17:     }

  18:  

  19:     protected virtual void Before_each() { }

  20:     protected virtual void After_each() { }

  21:     protected virtual void Because() { }

  22:  

  23:     public MockRepository Mocks { get; private set; }

  24:  

  25:     protected T Mock<T>() where T : class

  26:     {

  27:         return MockRepository.GenerateMock<T>();

  28:     }

  29:  

  30:     protected T Stub<T>() where T : class

  31:     {

  32:         return MockRepository.GenerateStub<T>();

  33:     }

  34:  

  35:     protected T Stub<T>(params object[] args) where T : class

  36:     {

  37:         return MockRepository.GenerateStub<T>(args);

  38:     }

  39:  

  40:     protected T Partial<T>() where T : class

  41:     {

  42:         return Mocks.PartialMock<T>();

  43:     }

  44:  

  45:     protected T Partial<T>(params object[] args) where T : class

  46:     {

  47:         return Mocks.PartialMock<T>(args);

  48:     }

  49:  

  50:     protected void Raise(object mock, string eventName, object sender, EventArgs args)

  51:     {

  52:         new EventRaiser((IMockedObject)mock, eventName).Raise(sender, args);

  53:     }

  54:  

  55:     protected virtual void ReplayAll()

  56:     {

  57:         Mocks.ReplayAll();

  58:     }

  59:  

  60:     protected void spec_not_implemented()

  61:     {

  62:         MethodBase caller = new StackTrace().GetFrame(1).GetMethod();

  63:  

  64:         spec_not_implemented(caller.DeclaringType.Name + "." + caller.Name);

  65:     }

  66:  

  67:     protected void spec_not_implemented(string specName)

  68:     {

  69:         Console.WriteLine("Specification not implemented : " + specName);

  70:     }

  71:  

  72: }

A typical Specification

Here’s a typical specification written to test user account creation.

   1: public class When_creating_a_new_user_account : Specification

   2: {

   3:     private IThirdPartyUserService _thirdPartyUserService;

   4:     private IUserDetailController _userDetailController;

   5:     private CreateUserCommand _newUserCommand;

   6:     private UserService _userService;

   7:  

   8:     protected override void Before_each()

   9:     {

  10:         _thirdPartyUserService = Stub<IThirdPartyUserService>();

  11:         _userDetailController = Stub<IUserDetailController>();

  12:         var lookupService = Stub<ILookupService>();

  13:         var logService = Stub<ILogService>();

  14:         var encryptionService = Stub<IEncryptionService>();

  15:         _newUserCommand = new CreateUserCommand();

  16:         _thirdPartyUserService.Stub(tpus => tpus.CreateUser(_newUserCommand)).Return("fakeAuthTicket");

  17:         encryptionService.Stub(es => es.Encrypt(_newUserCommand.Password)).Return(_newUserCommand.Password);

  18:         _userService = new UserService(_thirdPartyUserService, _userDetailController, 

  19:                                         logService, lookupService, encryptionService);

  20:     }

  21:  

  22:     protected override void Because()

  23:     {

  24:         _userService.CreateUser(_newUserCommand);

  25:     }

  26:  

  27:     [Test]

  28:     public void Should_call_the_ThirdParty_user_service()

  29:     {

  30:         _thirdPartyUserService.AssertWasCalled(tpus => tpus.CreateUser(_newUserCommand));

  31:     }

  32:  

  33:     [Test]

  34:     public void Should_call_the_UserDetailController_to_persist_data()

  35:     {

  36:         _userDetailController.AssertWasCalled(udc => udc.Insert(_newUserCommand.Login,

  37:             _newUserCommand.Password, _newUserCommand.Email));

  38:     }

  39: }

Specification using RhinoAutoMocker

One problem we ran into was that the UserService class kept having dependencies added as more functionality was added to the class. We’re using StructureMap as an IoC container, so there’s no impact to code when you add a dependency to a constructor, but it was requiring us to refactor our tests since we’re not using StructureMap to create instances inside of our tests.

StructureMap comes with a separate assembly containing the RhinoAutoMocker which my colleague Jon Kruger suggested would solve our constant refactoring problem. You can use the auto mocker functionality to automatically mock all dependencies of a class. This also cleans up your code because you don’t have to create fields for dependencies that you plan on using in multiple test methods.

   1: public class When_creating_a_new_user_account : Specification

   2: {

   3:     private RhinoAutoMocker<UserService> _mocker;

   4:     private IThirdPartyUserService _thirdPartyUserService;

   5:     private IUserDetailController _userDetailController;

   6:     private CreateUserCommand _newUserCommand;

   7:  

   8:     protected override void Before_each()

   9:     {

  10:         _mocker = new RhinoAutoMocker<UserService>();

  11:         _newUserCommand = new CreateUserCommand();

  12:         _thirdPartyUserService = _mocker.Get<IThirdPartyUserService>();

  13:         _thirdPartyUserService.Stub(tpus => tpus.CreateUser(_newUserCommand))

  14:                                     .Return("fakeAuthTicket");

  15:         _userDetailController = _mocker.Get<IUserDetailController>();

  16:         _mocker.Get<IEncryptionService>().Stub(es => es.Encrypt(_newUserCommand.Password))

  17:                                     .Return(_newUserCommand.Password);

  18:     }

  19:  

  20:     protected override void Because()

  21:     {

  22:         _mocker.ClassUnderTest.CreateUser(_newUserCommand);

  23:     }

  24:  

  25:     [Test]

  26:     public void Should_call_the_ThirdParty_user_service()

  27:     {

  28:         _thirdPartyUserService.AssertWasCalled(tpus => tpus.CreateUser(_newUserCommand));

  29:     }

  30:  

  31:     [Test]

  32:     public void Should_call_the_UserDetailController_to_persist_data()

  33:     {

  34:         _userDetailController.AssertWasCalled(udc => udc.Insert(_newUserCommand.Login,

  35:             _newUserCommand.Password, _newUserCommand.Email));

  36:     }

  37: }

AutoMockingSpecification

I took this a step further and created a base class that is used when you’re only testing one class. It doesn’t add all that much functionality, but it does make your specs look much cleaner.

   1: public class AutoMockingSpecification<T> : Specification

   2:     where T : class 

   3: {

   4:     private bool _replayTheClassUnderTest = false;

   5:  

   6:     public RhinoAutoMocker<T> Mocker { get; set; }

   7:  

   8:     protected override void Before_each()

   9:     {

  10:         base.Before_each();

  11:         Mocker = new RhinoAutoMocker<T>();

  12:     }

  13:  

  14:     protected override void ReplayAll()

  15:     {

  16:         base.ReplayAll();

  17:         if (_replayTheClassUnderTest)

  18:             Mocker.ClassUnderTest.Replay();

  19:     }

  20:  

  21:     public virtual void PartialMockTheClassUnderTest()

  22:     {

  23:         Mocker.PartialMockTheClassUnderTest();

  24:         _replayTheClassUnderTest = true;

  25:     }

  26: }

Specification Using AutoMockingSpecification

Here’s our sample UserService specification refactored to use the AutoMockingSpecification base class.

   1: public class When_creating_a_new_user_account : AutoMockingSpecification<UserService>

   2: {

   3:     private CreateUserCommand _newUserCommand;

   4:  

   5:     protected override void Before_each()

   6:     {

   7:         base.Before_each();

   8:         _newUserCommand = new CreateUserCommand();

   9:         Mocker.Get<IThirdPartyUserService>().Stub(tpus => tpus.CreateUser(_newUserCommand))

  10:                                             .Return("fakeAuthTicket");

  11:         Mocker.Get<IEncryptionService>().Stub(es => es.Encrypt(_newUserCommand.Password))

  12:                                         .Return(_newUserCommand.Password);

  13:     }

  14:  

  15:     protected override void Because()

  16:     {

  17:         Mocker.ClassUnderTest.CreateUser(_newUserCommand);

  18:     }

  19:  

  20:     [Test]

  21:     public void Should_call_the_ThirdParty_user_service()

  22:     {

  23:         Mocker.Get<IThirdPartyUserService>().AssertWasCalled(tpus => tpus.CreateUser(_newUserCommand));

  24:     }

  25:  

  26:     [Test]

  27:     public void Should_call_the_UserDetailController_to_persist_data()

  28:     {

  29:         Mocker.Get<IUserDetailController>().AssertWasCalled(

  30:             udc => udc.Insert(_newUserCommand.Login, _newUserCommand.Password, _newUserCommand.Email));

  31:     }

  32: }

I’m pleased with the result, and it seems to be pretty popular with the other developers on our project.

Agenda:

 8:30 AM: Registration

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

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

 11:45 AM: Lunch break

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

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

 3:30 PM: Server Communication (Sam Nasr)

 4:45 PM: Giveaways and closing

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

Hope to see you there!

Agenda:

 8:00 AM: Registration

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

 10:30 AM: XAML Basics (Sarah Dutkiewicz)

 Noon: Lunch break

 1:00 PM: The Tools (Jeff Blankenburg)

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

 4:00 PM: Server Communication (John Stockton)

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

Hope to see you there!