The Problem Solver : Silverlight

Nederlandse CodeCamp 2009

Maurice — Mon, 19 Oct 2009 10:26:00 GMT

Op 21 november 2009 organiseren de SDN, Stichting dotNed en VBcentral samen het derde Nederlandse Code Camp. Dit is een dag lang met code, code sharing, freaking en gezellig samenzijn. Een evenement door ontwikkelaars, voor ontwikkelaars. De regie ligt voor een belangrijk deel bij de deelnemers! Het aantal plaatsen voor deelnemers is wel beperkt tot maximaal 150. Wacht dus niet te lang met beslissen want voor je het weet is er geen plaats meer. Vergeet bij je aanmelding niet op te geven welke onderwerpen je interesse hebben. Bovendien nodigen we iedereen graag uit om zelf een sessie in te vullen.

Op de website, www.codecamp.nl, vind je meer informatie en kan je je aanmelden.

Combined DevelopMentor instructors blog feed.

Maurice — Wed, 19 Aug 2009 07:37:12 GMT

Michael Kennedy, one of the co instructors from DevelopMentor, has created a combined feed from all the blogs of the various DevelopMentor. An awesome group of people with a lot of knowledge to share. Highly recommended in you RSS reader.

http://feeds.feedburner.com/DevelopmentorInstructors

If you want to check out a list of the individual blog feeds look here.

Enjoy!

www.TheProblemSolver.nl
Wiki.WindowsWorkflowFoundation.eu

Getting started with the .NET RIA Services

Maurice — Tue, 30 Jun 2009 16:34:38 GMT

A recent article I wrote for the MSDN website just went live.

Read is here.

Paging with the Silverlight RIA services DomainDataSource

Maurice — Mon, 27 Apr 2009 08:57:46 GMT

Using the declarative DomainDataSource that is part of the upcoming Silverlight 3 RIA services makes it quite easy to work with data. All you need to do is add a DomainDataSource control to the the XAML, point it to the generated DomainContext class (in this case NorthwindContext) and tell it which method to use to load the data from the web service(in this case LoadCustomers). Next add a DataGrid to display the data and you are good to go.

     <UserControl xmlns:dataControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.DataForm"  x:Class="LOBUsingRIAServices.CustomerListPage"

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

                 xmlns:riaControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Ria.Controls"

                 xmlns:web="clr-namespace:LOBUsingRIAServices.Web"

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

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

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

            <riaControls:DomainDataSource x:Name="CustomerDataSource"

                                          LoadMethodName="LoadCustomers">

                <riaControls:DomainDataSource.DomainContext>

                    <web:NorthwindContext />

                </riaControls:DomainDataSource.DomainContext>

            </riaControls:DomainDataSource>

            <data:DataGrid ItemsSource="{Binding Data, ElementName=CustomerDataSource}" />

        </Grid>

    </UserControl>

Pretty simple and that is the way I like it

Adding paging.

Sometimes the lost of data to load can get somewhat large and you might not want to load all data. In that case all you need to do is add a PageSize and the DomainDataSource will only load enough data to display on a single page. You can do this by just setting the PageSize on the DomainDataSource but as we also need a control to allow the user to page trough the data it is easier to also add the DataPager control. Now you have the option of setting the PageSize on the DomainDataSource or the DataPager. I found that setting it on either would work just was well except for the initial load where the DataPager shows page 0 when the PageSize is set on the DomainDataSource while it is set to 1, the correct value, when set on the DataPager. I assume this is just a small bug in the current preview.

Another thing you can specify is the LoadSize. This determines how many rows are loaded with each request and if not set equals the PageSize. Setting this to double the PageSize will improve the responsiveness of the the client application so might be a good idea if the data isn’t too large.

    <UserControl xmlns:dataControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.DataForm"  x:Class="LOBUsingRIAServices.CustomerListPage"

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

                 xmlns:riaControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Ria.Controls"

                 xmlns:web="clr-namespace:LOBUsingRIAServices.Web"

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

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

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

            <riaControls:DomainDataSource x:Name="CustomerDataSource"

                                          LoadMethodName="LoadCustomers"

                                          LoadSize="40">

                <riaControls:DomainDataSource.DomainContext>

                    <web:NorthwindContext />

                </riaControls:DomainDataSource.DomainContext>

            </riaControls:DomainDataSource>

            <data:DataGrid ItemsSource="{Binding Data, ElementName=CustomerDataSource}" />

            <dataControls:DataPager Source="{Binding Data, ElementName=CustomerDataSource}" 

                                    PageSize="20" />

        </Grid>

    </UserControl>

The DataPager control is quite easy to use as well. Just drop it below the DataGrid and point it to the DomainDataSource to use and it just works. One problem I ran into was adding the DataPager above the DataGrid though. When I did that the DataPager didn’t show up on the UI so the user could not page through the data even though it still limited the data to the first page.

Using progressive loading

Another nice option is delayed loading. When using progressive loading all you need to do is specify the LoadSize on the DomainDataSource. The DomainDataSource will now load the specified number of rows, wait a bit and load the next set of rows. It will keep on doing this until all data is loaded. The nice thing here is that all the data is loaded but the UI still stays responsive for the user. De the default interval between load requests is 0.75 seconds but this can be fine tuned using the LoadDelay time span on the DomainDataSource.

    <UserControl xmlns:dataControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.DataForm"  x:Class="LOBUsingRIAServices.CustomerListPage"

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

                 xmlns:riaControls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Ria.Controls"

                 xmlns:web="clr-namespace:LOBUsingRIAServices.Web"

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

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

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

            <riaControls:DomainDataSource x:Name="CustomerDataSource"

                                          LoadMethodName="LoadCustomers"

                                          LoadSize="10"

                                          LoadDelay="0:0:0.25">

                <riaControls:DomainDataSource.DomainContext>

                    <web:NorthwindContext />

                </riaControls:DomainDataSource.DomainContext>

            </riaControls:DomainDataSource>

            <data:DataGrid ItemsSource="{Binding Data, ElementName=CustomerDataSource}" />

        </Grid>

    </UserControl>

And all of this was done without writing any code add everything was completely declarative. Of course it is just a matter of setting properties so doing so from code is easy enough.

Enjoy!

Using Model – View – ViewModel with Silverlight

Maurice — Tue, 07 Apr 2009 14:23:46 GMT

The View – Model – ViewModel design pattern, also known as MVVM, is getting more popular these days. I have found it extremely easy to use when developing very different applications and have used the design pattern recently in both ASP.NET, WPF and Silverlight applications. However easy as it might be is seems to confuse people as I have seen some terrible examples where people make a complete mess of things.

Josh Smith did an excellent screen cast for Pixel8 on using MVVM with WPF, you can find it here.

Even thought the UI technology used doesn't change the basic MVVM pattern there are some subtle differences, like not easily being able to use ICommand in Silverlight, so I decided to create a small Silverlight sample.

The basic structure goes like this:

The user interacts with a View, implemented as a Silverlight user control.
The View is data bound to a ViewModel. This is the most important step to remember. The ViewModel is just another class.
The ViewModel is a wrapper for a Model. Think of the Model as the data and the business rules.

The Model

The Model I am using is very simple and has two read-write properties, FirstName and LastName, and a single read-only property, FullName. The FullName property represents some business rule on how a name should be formatted. I know it is a bit of a lame business rule but it is just a sample . The Model also implements INotifyPropertyChanged so the UI can be updated whenever a value is updated. The complete model looks like this:

        1: using System.ComponentModel;

       2:  

       3: namespace SilverlightMVVMDemo.Model

       4: {

       5:     public class Customer : INotifyPropertyChanged

       6:     {

       7:         private string _firstName;

       8:         private string _lastName;

       9:  

        public string FirstName

        {

            get { return _firstName; }

            set

            {

                _firstName = value;

                OnPropertyChanged("FirstName");

                OnPropertyChanged("FullName");

            }

        }

        public string LastName

        {

            get { return _lastName; }

            set

            {

                _lastName = value;

                OnPropertyChanged("LastName");

                OnPropertyChanged("FullName");

            }

        }

  

  

        public string FullName

        {

            get { return FirstName + " " + LastName; }

        }

  

        public event PropertyChangedEventHandler PropertyChanged;

  

        protected void OnPropertyChanged(string propertyName)

        {

            if (PropertyChanged != null)

            {

                var args = new PropertyChangedEventArgs(propertyName);

                PropertyChanged(this, args);

            }

        }

    }

}

The View

The View is just a Silverlight user control that makes things visible for the user. All controls use data binding to get to their values. There is one interesting twist here. Just like I had a business rule about how to format a FullName I have a rule about the font weight to use to display the FullName. This is just UI so not a business rule and as a result it is not stored in the Model. We do not want to code this in the UI as that makes things hard to test. So that leaves one place, the ViewModel . And the View uses data binding to set the FontWeight property.

The complete View looks like this:

       1: <UserControl

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

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

       4:     xmlns:SilverlightMVVMDemo_ViewModel="clr-namespace:SilverlightMVVMDemo.ViewModel" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" x:Class="SilverlightMVVMDemo.View.CustomerView" 

       5:     Width="400" Height="300" mc:Ignorable="d">

       6:     <Grid x:Name="LayoutRoot" 

       7:           Background="White">

       8:         <Grid.RowDefinitions>

       9:             <RowDefinition Height="0.133*"/>

            <RowDefinition Height="0.133*"/>

            <RowDefinition Height="0.133*"/>

            <RowDefinition Height="0.18*"/>

            <RowDefinition Height="0.42*"/>

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="0.3*"/>

            <ColumnDefinition Width="0.7*"/>

        </Grid.ColumnDefinitions>

        <TextBlock Text="Firstname:" 

                   Margin="8"/>

        <TextBox Text="{Binding Path=FirstName, Mode=TwoWay}" 

                 Grid.Column="1" 

                 Margin="8,8,8,8"/>

        <TextBlock Text="Lastname:" 

                   Grid.Row="1" 

                   Margin="8"/>

        <TextBox Text="{Binding Path=LastName, Mode=TwoWay}" 

                 Grid.Row="1" 

                 Grid.Column="1" 

                 Margin="8,8,8,8"/>

        <TextBlock Text="Fullname:" 

                   Grid.Row="2" 

                   Margin="8"/>

        <TextBox Text="{Binding Path=FullName}" 

                 Grid.Row="2" 

                 Grid.Column="1" 

                 Margin="8,8,8,8"

                 FontWeight="{Binding Path=FullNameFontWeight}"

                 IsReadOnly="True"/>

        <Button Content="Save"

                Click="Button_Click"

                Grid.Row="3" 

                Grid.Column="1" />

    </Grid>

</UserControl>

The code behind is very simple and looks like this:

       1: using System.Windows.Controls;

       2: using SilverlightMVVMDemo.ViewModel;

       3:  

       4: namespace SilverlightMVVMDemo.View

       5: {

       6:     public partial class CustomerView : UserControl

       7:     {

       8:         public CustomerView()

       9:         {

      10:             InitializeComponent();

      11:             DataContext = new CustomerViewModel();

      12:         }

      13:  

      14:         private void Button_Click(object sender, System.Windows.RoutedEventArgs e)

      15:         {

      16:             var viewModel = (CustomerViewModel)DataContext;

      17:             viewModel.Save();

      18:         }

      19:     }

      20: }

In an ideal world there would be no code at all, or only that setting the DataContext but as Silverlight makes it a little harder to use commands there is a single line, okay two counting the cast, to pass the save command on to the ViewModel.

The ViewModel

The ViewModel class is the one that glues the View and the Model together, hence its name . basically the ViewModel wraps each Model object, so if you want to use a collection of customer models you create a collection of CustomerViewModel objects and databind against them. The ViewModel catches all PropertyChanged events from the Model and passes them on to the user interface. Whenever the FullName property changes the FullNameFontWeight might also change so in that case an extra PropertyChanged event is raised. Note that calculation of the FontWeight to use is part of the ViewModel as the UI depends on this but it is not a business rule per se.

Another example of a property like this would be the CSS class to use in an ASP.NET application. basically if a UI property changes, create a property get to do so and databind it.

The complete ViewModel class looks like this:

       1: using System.ComponentModel;

       2: using System.Windows;

       3: using SilverlightMVVMDemo.Model;

       4:  

       5: namespace SilverlightMVVMDemo.ViewModel

       6: {

       7:     public class CustomerViewModel : INotifyPropertyChanged

       8:     {

       9:         private Customer _model;

  

        public CustomerViewModel()

        {

            Model = new Customer() { FirstName = "Maurice", LastName = "de Beijer" };

        }

  

        public CustomerViewModel(Customer model)

        {

            Model = model;

        }

  

  

        public Customer Model

        {

            get { return _model; }

            private set

            {

                if (_model != null)

                    _model.PropertyChanged -= ModelPropertyChanged;

  

                _model = value;

  

                if (_model != null)

                    _model.PropertyChanged += ModelPropertyChanged;

            }

        }

  

        void ModelPropertyChanged(object sender, PropertyChangedEventArgs e)

        {

            OnPropertyChanged(e.PropertyName);

  

            if (e.PropertyName == "FullName")

                OnPropertyChanged("FullNameFontWeight");

        }

  

  

        public string FirstName

        {

            get { return Model.FirstName; }

            set { Model.FirstName = value; }

        }

        public string LastName

        {

            get { return Model.LastName; }

            set { Model.LastName = value; }

        }

  

        public string FullName

        {

            get { return Model.FullName; }

        }

  

        public FontWeight FullNameFontWeight

        {

            get

            {

                if (FullName.Length > 20)

                    return FontWeights.ExtraBold;

                else if (FullName.Length > 15)

                    return FontWeights.Bold;

                else if (FullName.Length > 10)

                    return FontWeights.Normal;

                else

                    return FontWeights.Light;

            }

        }

  

        public event PropertyChangedEventHandler PropertyChanged;

  

        protected void OnPropertyChanged(string propertyName)

        {

            if (PropertyChanged != null)

            {

                var args = new PropertyChangedEventArgs(propertyName);

                PropertyChanged(this, args);

            }

        }

  

        internal void Save()

        {

            // Implement the logic to save the customer.

        }

    }

}

In this case I duplicated all properties from the Model in the ViewModel. This is not a must, some people prefer to expose and bind to the Model directly. It saves a few lines of code but I prefer not to do so. Of course there is no need to duplicate properties the UI is never going to bind to directly.

Model-View-ViewModel guidelines

Not very difficult at all as long as you keep to a few guidelines:

Never set any UI properties from your CS code with the exception of the DataContext.
If you need an event handler in your code behind, like the button click, make it a single line and pass the request onto the ViewModel.
All UI control properties that need to change at runtime do so by data binding to a ViewModel property.
Organize your ViewModel types per View and not per Model. It is perfectly fine to create a ViewModel that wraps two different Models. A View has only a single DataContext so you cannot bind it to multiple ViewModel objects.

www.TheProblemSolver.nl
Wiki.WindowsWorkflowFoundation.eu

And now on Twitter at http://twitter.com/mauricedb.

.NET RIA Services and data communication

Maurice — Mon, 06 Apr 2009 13:55:02 GMT

I was working on an article about the .NET RIA Services and decided to fire up Fiddler to take a close look at the data actually passed around. I was sort of expecting to see a WCF REST based approach with XML messages. Turns out I was wrong, though I expect this option will be added in the future.

It turns out the .NET RIA Services use JSON as their serialization format. This is actually kind of nice as the DataContractJsonSerializer is part of the System.ServiceModel.Web assembly and therefore usable by all .NET clients.

The good part is that a .NET RIA Service is also usable from a JavaScript browser based client. So the same .NET RIA Services library gives us lots of client options. Now this was always the plan but it is nice to see that the default already enable it.

And the best thing?

Well that is that I was already using the .NET RIA Services and never even needed to know how the messages where actually send across the wire, something I shouldn't have to worry about when developing a RIA style application. Which is exactly the goal of the .NET RIA Services.

Cool stuff and highly recommended if you want to create browser based LOB apps

www.TheProblemSolver.nl
Wiki.WindowsWorkflowFoundation.eu

And now on Twitter at http://twitter.com/mauricedb.

Surface at the last Software Developer Event

Maurice — Mon, 06 Apr 2009 07:27:04 GMT

As was to be expected the Surface machine at the last SDE was a big success and with lots of people wanting to have a go at it.

Nice to see the interest. And I am grateful Martin Tirion from the Dutch Microsoft office let us borrow the machine for a day.

At the end of June we will have the next big event

Cu there.

BTW you can find more pictures from the event here.

www.TheProblemSolver.nl
Wiki.WindowsWorkflowFoundation.eu

And now on Twitter at http://twitter.com/mauricedb.

Want to download all MIX sessions?

Maurice — Tue, 31 Mar 2009 06:52:40 GMT

Then you should check Mike Swanson’s blog post here. He has two batch files, the first downloads all MIX session recordings with in the format you like, the second renames them so it is easier to make sense of all the media file names.

If you just want a list of all sessions with download links this page might be the thing for you.

So much better than downloading them by hand. Not as good as going to the MIX itself but if you, like me, couldn’t go it is still a nice way to see all the content.

Enjoy!

Visual Basic QuickStarts and How-to Topics for the Composite Application Guidance for WPF and Silverlight

Maurice — Wed, 25 Mar 2009 08:12:57 GMT

The P&P team have just release a VB version of the Prism quick starts.

You can download the goods here.

Enjoy!

Getting T4 templates to work with Silverlight

Maurice — Tue, 24 Mar 2009 03:24:00 GMT

In a previous blog post I mentioned that T4 templates didn’t quite work with Silverlight development. The reason being that Visual Studio decides to load the Silverlight version of System.dll which doesn’t contain all the required classes. Fortunately I was not the first person to run into this limitation, Jason Jarrett did as well and he described the solution in a blog post here.

The solution turns out to be surprisingly simple, just not very obvious. All you need to do is include the following line at the top of the T4 template.

   1: <#@ assembly name="C:\Windows\Microsoft.NET\Framework\v2.0.50727\System.dll" #>

This way the T4 template engine loads the regular System.dll instead of the CoreCLR version and all is well.

So now the complete template looks like:

<#@ Template language="C#" #>
<#@ assembly name="C:\Windows\Microsoft.NET\Framework\v2.0.50727\System.dll" #>
<#@ import namespace="System.Collections.Generic" #>
<#
    Dictionary<string, string> props = new Dictionary<string, string>();
    props.Add("FirstName", "string");
    props.Add("LastName", "string");
    props.Add("Age", "int");
#>
namespace T4Test
{
    public class Demo
    {
<#
  
    foreach (KeyValuePair<string, string> prop in props)
    {
#>
        /// <summary>
        /// Get or set the <#= prop.Key #> property.
        /// </summary>
        public <#= prop.Value #> <#= prop.Key #> { get; set; }
  
<#
    }
#>
    }
}

and the generated output looks like:

namespace T4Test
{
    public class Demo
    {
        /// <summary>
        /// Get or set the FirstName property.
        /// </summary>
        public string FirstName { get; set; }
  
        /// <summary>
        /// Get or set the LastName property.
        /// </summary>
        public string LastName { get; set; }
  
        /// <summary>
        /// Get or set the Age property.
        /// </summary>
        public int Age { get; set; }
  
    }
}

Pretty nice, something I will be using a lot more often when developing all those repetitive DTO classes.

A T4 template editor

By default Visual Studio allows you to create T4 templates by renaming a text files extension from TXT to TT but that is about it. No IntelliSense, no keyword highlighting or any of the other things we are used to.

Fortunately Clarius has developed a T4 editor that plug into Visual Studio and makes live a bit easier when developing T4 templates. There are several editions and they even have a free community edition, which I am using now. The free edition might not have all the features of the professional edition that ships for just $ 99.99 but its a big improvement over the default Visual Studio experience and for a price that is hard to beat. Below is a screen shot of the Clarius T4 editor with the same template.

Very useful and a great addition to my Visual Studio toolkit!

Enjoy!

Software Development Event march 30th

Maurice — Mon, 23 Mar 2009 15:40:29 GMT

Just one week to go to the next Software Development Event. The schedule with all the sessions is looking good. But this time there is even more!

We will have a Microsoft Surface machine somewhere in the common area for people to try our. And if you have never played, oops tested, with a Surface machine before this is a truly exiting machine!

Just goes to show, the SDN will go to extraordinary efforts to please all attendees

You can see the full schedule here. And don’t forget, we are not in Ede this time but in a great new location in Driebergen.

Hope to see everyone there next week Monday.

www.TheProblemSolver.nl
Wiki.WindowsWorkflowFoundation.eu

And now on Twitter at http://twitter.com/mauricedb.

Using T4 templates with Silverlight

Maurice — Sat, 21 Mar 2009 20:59:34 GMT

Everyone who has Visual Studio 2008 also has T4 templates that can be used to generate code, or anything else textual for that matter. Using T4 should be pretty easy but unfortunately Visual Studio kind of hides the fact, there is no “Add T4 template” option and when you manually add one there is no help whatsoever in the box to create a working template. There are some tools out there that will help some but getting started with a simple template is easy. The following is a simple template to create a simple class

        1: <#@ Template language="C#" #>

       2: <#@ import namespace="System.Collections.Generic" #>

       3: <#

       4:     Dictionary<string, string> props = new Dictionary<string, string>();

       5:     props.Add("FirstName", "string");

       6:     props.Add("LastName", "string");

       7:     props.Add("Age", "int");

       8: #>

       9: namespace T4Test

      10: {

      11:     public class Demo

      12:     {

      13: <#

      14:     foreach (KeyValuePair<string, string> prop in props)

      15:     {

      16: #>

      17:  

      18:         /// <summary>

      19:         /// Get or set the <#= prop.Key #> property.

      20:         /// </summary>

      21:         public <#= prop.Value #> <#= prop.Key #> { get; set; }

      22: <#

      23:     }

      24: #>

      25:     }

      26: }

The template looks nice, specially with the keyword highlighting but unfortunately that is my code snippet for Live Writer at work because Visual Studio only shows this as a single color text. The result is a nice C# class that looks like this:

       1: namespace T4Test

       2: {

       3:     public class Demo

       4:     {

       5:  

       6:         /// <summary>

       7:         /// Get or set the FirstName property.

       8:         /// </summary>

       9:         public string FirstName { get; set; }

      10:  

      11:         /// <summary>

      12:         /// Get or set the LastName property.

      13:         /// </summary>

      14:         public string LastName { get; set; }

      15:  

      16:         /// <summary>

      17:         /// Get or set the Age property.

      18:         /// </summary>

      19:         public int Age { get; set; }

      20:     }

      21: }

Pretty easy to do and a useful technique don’t you think so?

The bad news

So that was rather easy and great for generating business entities with a bunch of properties, all with identical property implementations. And that is exactly what I tend to do in my Silverlight line of business applications. So I decided to try using T4 with a Silverlight project. But unfortunately that didn’t quite work. using exactly the same template I only had the single word “ErrorGeneratingOutput” appear in the output.

The errors where a bit more useful thought.

Error 1 Compiling transformation: The type or namespace name 'CompilerError' does not exist in the namespace 'System.CodeDom.Compiler' (are you missing an assembly reference?)

Error 2 Compiling transformation: The type 'System.CodeDom.Compiler.CompilerErrorCollection' is defined in an assembly that is not referenced. You must add a reference to assembly 'System, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089'.

It turns out Visual Studio uses the project references itself to run the template. And While the System.CodeDom.Compiler namespace exists in Silverlight the required classes like CompilerError and CompilerErrorCollection do not.

This really is a shame as there is really no good reason that T4 templates do not work for Silverlight. All generation is done in Visual Studio, which has access to the full .NET framework, and not at runtime in the browser.

Still enjoy T4 in the full framework.

www.TheProblemSolver.nl
[2]

And now on Twitter at http://www.twitter.com/mauricedb.

Looking back at the MVP Summit

Maurice — Sat, 07 Mar 2009 11:08:09 GMT

Last week lots of MVP, myself included, where in Redmond visiting Microsoft on our yearly MVP pilgrimage. The MVP Summit is always a great event. Not only do we get to talk to the MS team members who actually design and build all the software we love and use but we also get to meet each other. And with MVP’s being located around the world that is kind of rare as well.

Despite this being a great event I still have very mixed feelings about this last MVP summit. The problem isn’t the events itself or the people I met, that was al great . No the problem was in some of the technological decisions made in product groups. Unfortunately I can’t divulge details yet because I have signed an NDA but as soon .NET 4.0 as beta 1 is made public I will be able to blog about some of these decisions. And rest assured I will!

The reason we really need to is the way these important changes are communicated. Or should I say not communicated. Some very important changes where not communicated at all and could only be derived by bullet points missing from PowerPoint slides. Only when directly asked about the missing bullet point would someone say “Yes that is right, we decided to …. NDA … because … NDA …”. Sorry about the NDA part .

I can only say that these decisions are a big problem and I know several MVP’s who decided to skip other sessions on the same product as a result. I didn’t, as far as I am concerned ignoring a problem is not going to make it go away, but I really think this product team needs to reevaluate this decision and the general future trend.

Despite this hiccup I am very exited about lots of the things I got to see and am really looking forward to .NET 4 and Visual Studio 2010. Now if we only could have a beta today . When we will have a first beta is still a big question though. If a date was announced I missed it, the best I heard was a quarter and is quite a time span.

Enjoy.

www.TheProblemSolver.nl
Wiki.WindowsWorkflowFoundation.eu

SilverUnit - Unit testing framework for Silverlight

Maurice — Wed, 25 Feb 2009 08:11:13 GMT

Roy Osherove has just released SilverUnit, a unit testing framework for Silverlight code. I haven't tried this yet but it certainly looks really interesting as you can start running your Silverlight unit tests inside of MS Test or NUnit.

And kind cool to hear this is written in VB

You can find more information and download SilverUnit from CodePlex here.

Enjoy!

www.TheProblemSolver.nl
Wiki.WindowsWorkflowFoundation.eu

Patterns & Practices release Prism version 2

Maurice — Wed, 18 Feb 2009 19:01:01 GMT

The Patterns & Practices group at Microsoft have just released Prism version 2. I am pretty exited about this because Prism version 2 supports both WPF and Silverlight. And as it makes extensive use of the Model - View - ViewModel amongst other design patterns it is a great place to learn, even if you don't use it as is.

Check out the main "Composite Application Guidance for WPF and Silverlight" page here. Or read Blaine Wastell about it here.

Enjoy!

Changing the MouseOver effect on a Silverlight ListBox

Maurice — Tue, 17 Feb 2009 14:04:00 GMT

One thing I occasionally have to do is change the way a ListBox item behaves. For example the blue highlight effect when the mouse hovers over it.

Changing the blue mouse over effect to something else, say the item growing slightly isn’t very hard using Blend. However I find the steps a little awkward so this post should help me remember them and I hope it helps someone else as well.

Suppose we start with the following very simple Silverlight page

     <UserControl

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

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

        x:Class="SilverlightApplication4.Page"

        Width="640" Height="480">

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

            <ListBox Margin="8,8,0,0" VerticalAlignment="Top" Height="116" Width="77" HorizontalAlignment="Left" >

                <ListBoxItem Content="One"/>

                <ListBoxItem Content="Two"/>

                <ListBoxItem Content="Three"/>

            </ListBox>

        </Grid>

    </UserControl>

The trick to changing the mouse over effect is changing the ListBox style first.

First select The ListBox in the “ Objects and Timeline” windows. Next select “Object/Edit Stype/Edit a Copy” from the menu and create a new style for the ListBox.

Next we need to edit the ListBoxItem style by selecting “Object/Edit Other Style/Edit ItemContainerStyle/Edit a Copy”.

Now we are at the level of the ListBox items. Now we need to edit the template itself to make the actual changes we want. So select “Object/Edit Control Parts (Template)/Edit Template from the menu.

Only when we get to this level do we see the separate states a ListBoxItem can have. Not very easy to find I admit but here it is. So now select the MouseOver state from the ComonStates.

Now we see that there is a change to the fillColor Opacity.

Suppose we want to change that and have the element grow with a mouse over effect. The first step is to delete the current effect. So select the Opacity in the “Objects and Timeline” and press delete. Next to make the item grow we are going to change the Scale Transform on the contentPresenter.

And when we run the Silverlight application and move the mouse over the two it looks like this:

Of course we could have typed the XAML in by hand but as the complete XAML produced by Blend, se below, is rather long I would rather use Blend, even it it is not exactly intuitive if you ask me. At least next time I know where to look for the steps

    <UserControl

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

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

        x:Class="SilverlightApplication4.Page"

        Width="640" Height="480" xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows">

        <UserControl.Resources>

            <Style x:Key="ListBoxItemStyle1" TargetType="ListBoxItem">

                <Setter Property="Padding" Value="3"/>

                <Setter Property="HorizontalContentAlignment" Value="Left"/>

                <Setter Property="VerticalContentAlignment" Value="Top"/>

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

                <Setter Property="BorderThickness" Value="1"/>

                <Setter Property="TabNavigation" Value="Local"/>

                <Setter Property="Template">

                    <Setter.Value>

                        <ControlTemplate TargetType="ListBoxItem">

                            <Grid Background="{TemplateBinding Background}">

                                <vsm:VisualStateManager.VisualStateGroups>

                                    <vsm:VisualStateGroup x:Name="CommonStates">

                                        <vsm:VisualState x:Name="Normal"/>

                                        <vsm:VisualState x:Name="MouseOver">

                                            <Storyboard>

                                                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">

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

                                                </DoubleAnimationUsingKeyFrames>

                                                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">

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

                                                </DoubleAnimationUsingKeyFrames>

                                            </Storyboard>

                                        </vsm:VisualState>

                                        <vsm:VisualState x:Name="Disabled">

                                            <Storyboard>

                                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="Opacity">

                                                    <SplineDoubleKeyFrame KeyTime="0" Value=".55"/>

                                                </DoubleAnimationUsingKeyFrames>

                                            </Storyboard>

                                        </vsm:VisualState>

                                    </vsm:VisualStateGroup>

                                    <vsm:VisualStateGroup x:Name="SelectionStates">

                                        <vsm:VisualState x:Name="Unselected"/>

                                        <vsm:VisualState x:Name="Selected">

                                            <Storyboard>

                                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="fillColor2" Storyboard.TargetProperty="Opacity">

                                                    <SplineDoubleKeyFrame KeyTime="0" Value=".75"/>

                                                </DoubleAnimationUsingKeyFrames>

                                            </Storyboard>

                                        </vsm:VisualState>

                                    </vsm:VisualStateGroup>

                                    <vsm:VisualStateGroup x:Name="FocusStates">

                                        <vsm:VisualState x:Name="Focused">

                                            <Storyboard>

                                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Visibility">

                                                    <DiscreteObjectKeyFrame KeyTime="0">

                                                        <DiscreteObjectKeyFrame.Value>

                                                            <Visibility>Visible</Visibility>

                                                        </DiscreteObjectKeyFrame.Value>

                                                    </DiscreteObjectKeyFrame>

                                                </ObjectAnimationUsingKeyFrames>

                                            </Storyboard>

                                        </vsm:VisualState>

                                        <vsm:VisualState x:Name="Unfocused"/>

                                    </vsm:VisualStateGroup>

                                </vsm:VisualStateManager.VisualStateGroups>

                                <Rectangle x:Name="fillColor" IsHitTestVisible="False" Opacity="0" Fill="#FFBADDE9" RadiusX="1" RadiusY="1"/>

                                <Rectangle x:Name="fillColor2" IsHitTestVisible="False" Opacity="0" Fill="#FFBADDE9" RadiusX="1" RadiusY="1"/>

                                <ContentPresenter HorizontalAlignment="Left" Margin="{TemplateBinding Padding}" x:Name="contentPresenter" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" RenderTransformOrigin="0.5,0.5">

                                    <ContentPresenter.RenderTransform>

                                        <TransformGroup>

                                            <ScaleTransform/>

                                            <SkewTransform/>

                                            <RotateTransform/>

                                            <TranslateTransform/>

                                        </TransformGroup>

                                    </ContentPresenter.RenderTransform>

                                </ContentPresenter>

                                <Rectangle x:Name="FocusVisualElement" Visibility="Collapsed" Stroke="#FF6DBDD1" StrokeThickness="1" RadiusX="1" RadiusY="1"/>

                            </Grid>

                        </ControlTemplate>

                    </Setter.Value>

                </Setter>

            </Style>

            <Style x:Key="ListBoxStyle1" TargetType="ListBox">

                <Setter Property="Padding" Value="1"/>

                <Setter Property="Background" Value="#FFFFFFFF"/>

                <Setter Property="Foreground" Value="#FF000000"/>

                <Setter Property="HorizontalContentAlignment" Value="Left"/>

                <Setter Property="VerticalContentAlignment" Value="Top"/>

                <Setter Property="IsTabStop" Value="False"/>

                <Setter Property="BorderThickness" Value="1"/>

                <Setter Property="TabNavigation" Value="Once"/>

                <Setter Property="BorderBrush">

                    <Setter.Value>

                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                            <GradientStop Color="#FFA3AEB9" Offset="0"/>

                            <GradientStop Color="#FF8399A9" Offset="0.375"/>

                            <GradientStop Color="#FF718597" Offset="0.375"/>

                            <GradientStop Color="#FF617584" Offset="1"/>

                        </LinearGradientBrush>

                    </Setter.Value>

                </Setter>

                <Setter Property="Template">

                    <Setter.Value>

                        <ControlTemplate TargetType="ListBox">

                            <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2">

                                <ScrollViewer x:Name="ScrollViewer" Background="{TemplateBinding Background}" BorderBrush="Transparent" BorderThickness="0" Padding="{TemplateBinding Padding}">

                                    <ItemsPresenter/>

                                </ScrollViewer>

                            </Border>

                        </ControlTemplate>

                    </Setter.Value>

                </Setter>

                <Setter Property="ItemContainerStyle" Value="{StaticResource ListBoxItemStyle1}"/>

            </Style>

        </UserControl.Resources>

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

            <ListBox Margin="8,8,0,0" Height="116" HorizontalAlignment="Left" Style="{StaticResource ListBoxStyle1}" VerticalAlignment="Top" Width="77" >

                <ListBoxItem Content="One"/>

                <ListBoxItem Content="Two"/>

                <ListBoxItem Content="Three"/>

            </ListBox>

        </Grid>

    </UserControl>

Enjoy

Lazy loading using Ninject

Maurice — Tue, 10 Feb 2009 06:13:00 GMT

In my previous blog post I demonstrated how you can use Ninject in your Silverlight application to automatically inject dependencies and make live easier. In the sample I injected the dependency, the PingService, inside my PageModel constructor. That worked just fine because the PingService is lightweight and stateless. However suppose creation is much more involved and you don’t need it all the time so you really want to divert creation until you really need the PingService. Well we can by just a few simple changes.

Changing the PageModel to defer loading of the PingService

This is actually a very easy change. All we need to do is change to constructor from expecting a PingService to expecting a IKernel. The IKernel is the Ninject main object and Ninject will take care of injecting itself. Kind of cool as the Page, which creates and uses the PageModel , doesn’t even need to be aware of the change, Ninject will do all the work here .

Now we can change the ExecutePing() function to use the kernel to create the PingService when needed and we are done. The new PageModel looks like this:

using System;
using System.ComponentModel;
using System.Threading;
using Ninject.Core;
 
namespace NinjectSample
{
    public class PageModel : INotifyPropertyChanged
    {
        public PageModel(IKernel kernel)
        {
            _kernel = kernel;
            _context = SynchronizationContext.Current;
        }
 
        private IKernel _kernel;
        private SynchronizationContext _context;
        public DateTime TheResult { get; set; }
 
        public void ExecutePing()
        {
            PingService.PingService proxy = _kernel.Get<PingService.PingService>();
            proxy.BeginPing(proxy_PingCompleted, proxy);
        }
 
        void proxy_PingCompleted(IAsyncResult result)
        {
            PingService.PingService proxy = (PingService.PingService)result.AsyncState;
            _context.Post(state =>
                {
                    TheResult = proxy.EndPing(result);
 
                    if (PropertyChanged != null)
                        PropertyChanged(this, new PropertyChangedEventArgs("TheResult"));
                }, null);
        }
 
        public event PropertyChangedEventHandler PropertyChanged;
    }
}

The normal generated WCF PingService will work just fine as will the Page, no changes there. The only other change we need to make is to the TestPingService as this was a very simple implementation before. Not that it is very complicated now but it needs to work with a dummy IAsyncResult. The complete fake code looks like this:

using System;
 
namespace NinjectSample
{
    public class TestPingService : PingService.PingService
    {
        public IAsyncResult BeginPing(AsyncCallback callback, object asyncState)
        {
            TestAsyncResult result = new TestAsyncResult() { AsyncState = asyncState };
            callback(result);
            return result;
        }
 
        public DateTime EndPing(IAsyncResult result)
        {
            // Birthdate Charles Babbage
            return new DateTime(1791, 12, 26);
        }
    }
 
    class TestAsyncResult : IAsyncResult
    {
        public object AsyncState { get; set; }
        public System.Threading.WaitHandle AsyncWaitHandle { get; set; }
        public bool CompletedSynchronously { get; set; }
        public bool IsCompleted { get; set; }
    }
}

Easy right

Conclusion

Even though we are now using lazy loading instead of eager loading Ninject still makes live easy for us.

Enjoy!

Download source code

Using Ninject with Silverlight to make you code more testable

Maurice — Mon, 09 Feb 2009 12:16:13 GMT

One useful feature when developing more complex code is using an inversion of control (IOC) container to do dependency injection. The basic principal of inversion of control, or dependency injection, is to pass in any dependencies when an object is created and not create them when needed. This way the code is much more decoupled and much easier to unit test.

Dependency injection with Silverlight

When developing regular .NET code there are plenty of IOC containers to choose from. However when it comes down to Silverlight the choice isn’t quite as big. I am aware of only two IOC containers you can use with Silverlight, Ninject and Unity. In this example I am going to use Ninject but the same approach would be perfectly valid using Unity.

The basic application

I am going to use a very basic application to demonstrate using Ninject with Silverlight. Just a TextBlock and Button on the form and when the button is called we are going to call a WCF service and call a ping method returning the current time.

The page is real simple. All I do is create a PageModel, make it the DataContext for the form and call the ExecutePing function when the button is clicked.

     using System.Windows;

    using System.Windows.Controls;

    namespace NinjectSample

    {

        public partial class Page : UserControl

        {

            private PageModel _model;

            public Page()

            {

                InitializeComponent();

                _model = new PageModel();

                DataContext = _model;

            }

            private void Button_Click(object sender, RoutedEventArgs e)

            {

                _model.ExecutePing();

            }

        }

    }

The PageModel class is also very straightforward and looks like this:

    using System;

    using System.ComponentModel;

    using NinjectSample.PingService;

    namespace NinjectSample

    {

        public class PageModel: INotifyPropertyChanged

        {

            public DateTime TheResult { get; set; }

            public void ExecutePing()

            {

                PingServiceClient proxy = new PingServiceClient();

                proxy.PingCompleted += proxy_PingCompleted;

                proxy.PingAsync();

            }

            void proxy_PingCompleted(object sender, PingCompletedEventArgs e)

            {

                TheResult = e.Result;

                if (PropertyChanged != null)

                    PropertyChanged(this, new PropertyChangedEventArgs("TheResult"));

            }

            public event PropertyChangedEventHandler PropertyChanged;

        }

    }

So this works but there is a problem. This code is not very testable as it creates the PingServiceClient, which calls the server, while executing. Lets see how we can refactor this using Ninject to create a bit more maintainable and testable code.

Adding Ninject

First make sure you download the Silverlight version of Ninject from the website here. And add a reference to the DLL’s from the Silverlight project.

So lets do the minimum work to use Ninject and have it insert the dependency. Instead of using the new operator to create the PageModel we are going to let Ninject handle this using the following code:

IKernel kernel = new StandardKernel();

_model = kernel.Get<PageModel>();

And to have Ninject inject the dependency on the WCF service we are going to change it to receive he proxy object in the constructor like this:

    public class PageModel : INotifyPropertyChanged

    {

        public PageModel(PingServiceClient proxy)

        {

            _proxy = proxy;

        }

        private PingServiceClient _proxy;

        public DateTime TheResult { get; set; }

        public void ExecutePing()

        {

            _proxy.PingCompleted += proxy_PingCompleted;

            _proxy.PingAsync();

        }

        void proxy_PingCompleted(object sender, PingCompletedEventArgs e)

        {

            _proxy.PingCompleted -= proxy_PingCompleted;

            TheResult = e.Result;

            if (PropertyChanged != null)

                PropertyChanged(this, new PropertyChangedEventArgs("TheResult"));

        }

        public event PropertyChangedEventHandler PropertyChanged;

    }

A few small changes and everything still works exactly as before.

So what did we gain? Only the fact that the dependency between the PageModel and the PingServiceClient is slightly decoupled. However because we are still using concrete classes and the PingAsync() is not virtual we have gained very little.

Making the code more testable

In order to make the code more testable we need to start using the PingService interface instead of the PingServiceClient concrete type. So lets make some changes to the code. First of all we need to change the PageModel class to use the interface. This means we can no longer use the PingAsync function and PingCompleted event as they are part of the concrete class. Instead we have to use the BeginPing() and EndPing() functions.

One extra complication here is that the standard generated proxy makes sure the callback event is raised on the right thread, something we now have to take care of using a SynchronizationContext.

The new PageModel looks like this:

    using System;

    using System.ComponentModel;

    using System.Threading;

    namespace NinjectSample

    {

        public class PageModel : INotifyPropertyChanged

        {

            public PageModel(PingService.PingService proxy)

            {

                _proxy = proxy;

                _context = SynchronizationContext.Current;

            }

            private PingService.PingService _proxy;

            private SynchronizationContext _context;

            public DateTime TheResult { get; set; }

            public void ExecutePing()

            {

                _proxy.BeginPing(proxy_PingCompleted, null);

            }

            void proxy_PingCompleted(IAsyncResult result)

            {

                _context.Post(state =>

                    {

                        TheResult = _proxy.EndPing(result);

                        if (PropertyChanged != null)

                            PropertyChanged(this, new PropertyChangedEventArgs("TheResult"));

                    }, null);

            }

            public event PropertyChangedEventHandler PropertyChanged;

        }

    }

With this in pace we need to configure Ninject a bit so it knows which object to create as the PingService. If we forget to do so we will see a Ninject.Core.ActivationException with the following message:

Error activating PingService: no matching bindings are available, and the type is not self-bindable (or implicit binding is disabled).
Activation path:
1) active request for PingService

Configuring Ninject

The way to configure Ninject is to create a module loader class derived from StandardModule and implement the Load() function specifying the dependencies like this:

    using Ninject.Core;

    using NinjectSample.PingService;

    namespace NinjectSample

    {

        public class PingModule : StandardModule

        {

            public override void Load()

            {

                Bind<PingService.PingService>().To<PingServiceClient>();

            }

        }

    }

Next we need to tell Ninject which module to use by passing it into the constructor like this:

public Page()

    InitializeComponent();

    IKernel kernel = new StandardKernel(new PingModule());

    _model = kernel.Get<PageModel>();

    DataContext = _model;

And again everything is working again

Adding a test service

Now we have fully decoupled the pageModel from the service we can create a test service so we execute the code without actually calling the WCF service.

First we need to create a test service like this:

    using System;

    namespace NinjectSample

    {

        public class TestPingService : PingService.PingService

        {

            public IAsyncResult BeginPing(AsyncCallback callback, object asyncState)

            {

                callback(null);

                return null;

            }

            public DateTime EndPing(IAsyncResult result)

            {

                // Birthdate Charles Babbage

                return new DateTime(1791, 12, 26);

            }

        }

    }

The code is simple and just returns a fixed date.

Next we need to tell Ninject which implementation to use. There are several ways to do this. I suppose the best is to create a specific module for testing but in this case I have taken the route of conditionally binding dependencies in a single module like this:

    using Ninject.Core;

    using NinjectSample.PingService;

    namespace NinjectSample

    {

        public class PingModule : StandardModule

        {

            private bool _testMode;

            public PingModule(bool testMode)

            {

                _testMode = testMode;

            }

            public override void Load()

            {

                Bind<PingService.PingService>().To<PingServiceClient>()

                    .OnlyIf(p => _testMode == false);

                Bind<PingService.PingService>().To<TestPingService>()

                    .OnlyIf(p => _testMode == true);

            }

        }

    }

Now I can vary the behavior by just passing in true or false when creating the Ninject module.

Conclusion

Using Ninject, or another IOC container, makes it easier to test code. Of course Ninject isn’t a silver bullet here, the same effect could be achieved with manual injection. But thinking about dependencies this way makes code easier to develop and test. And why do dependency inject by hand if an IOC container like Ninject can do it for you!

Enjoy!

Source code download