EF Code First and WPF with the Chinook database. Part 3 – Styles and DataTemplates 101

I have decided to split out the styling work into 2 posts as it would be a huge post to restyle even something so simple.  so this post is going to change the controls to be more style-conscious and introduce basic style and the next post will introduce some more advance concepts such as using adorners to display additional details.

Going back to the previous post we had a basic app as follows:

This is slightly ugly and needs a little work so the first thing I want to add is  a style that will tidy up the artist list.

I want the artist list to have a nice look and feel with rounded button type items and also contain a count of the number of albums – I want each item in the list to look something like this:

image

The first step to getting this design in place is adding the DataTemplate so that it is picked up by the item.  A DataTemplate is a template that gets applied to an object that has no default way of showing itself and manifests itself as its type name.

NOTE – this can also be be done by overriding Object.ToString() but this is a client side post so I don’t want to have to change model code to do something.

I have added a simple DataTemplate to the Application.Resources section in App.xaml as follows:

<DataTemplate DataType="{x:Type business:Artist}">
    <TextBlock x:Name="contentHolder">
        <TextBlock.Text>
            <MultiBinding StringFormat="{}{0} - {1} albums">
                <Binding Path="Name"/>
                <Binding Path="Albums.Count" />
            </MultiBinding>
        </TextBlock.Text>                
    </TextBlock>
    <DataTemplate.Triggers>
        <DataTrigger Binding="{Binding Albums.Count}" Value="1">
            <DataTrigger.Setters>
                <Setter Property="TextBlock.Text" TargetName="contentHolder">
                    <Setter.Value>
                        <MultiBinding StringFormat="{}{0} - {1} album">
                            <Binding Path="Name"/>
                            <Binding Path="Albums.Count" />
                        </MultiBinding>
                    </Setter.Value>
                </Setter>
            </DataTrigger.Setters>
        </DataTrigger>
    </DataTemplate.Triggers>
</DataTemplate>

There are several things going on here:

  1. the first line declares the type that this template is associated with – you have to add the namespace to this file first in order to make this work:
    xmlns:business="clr-namespace:MusicApp.Model;assembly=MusicApp.Model"
    
  2. The MultiBinding has an associated StringFormat – this is the same as a normal format string except for the “{}” after the equals sign – this simply escapes the format string.
  3. The binding to Albums.Count – yes you can bind to “built-in” properties as well.
  4. The DataTrigger is a simple way of saying that if we have only one album then the trailing text shouldn’t have an ‘s’ on the end.

It is possible to do the whole string in a converter but I like the declarative way as you can see everything going on in one place.  For those that like using converters you would bind the TextBlock’s Text property to the whole Artist ({Binding}) and then use a converter like the following:

public class ArtistStringConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        string retVal = string.Empty;
        var artist = value as Artist;
        if (artist != null)
        {
            retVal += string.Format("{0} - {1} {2}", artist.Name, artist.Albums.Count, artist.Albums.Count == 1 ? "artist" : "artists");
        }

        return retVal;
    }

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

this is then used from the xaml as follows:

<local:ArtistStringConverter x:Key="artistConverter"/>
<DataTemplate DataType="{x:Type business:Artist}">
    <TextBlock x:Name="contentHolder" Text="{Binding Converter={StaticResource artistConverter}}" />
</DataTemplate>

Once this is added (either option) you need to remove the DisplayMemberPath property from the ArtistList.xaml view so that the template is used instead.

I now have a list of Artists that show the name and the total albums they have so I can work on the actual style to make the list items look like the above image.

I want all three lists to look the same so I am adding a style with no key to the app.xaml file.  If you want specific styles for your controls then you can add ‘x:Key=”YourKeyName”’ and reference it using ‘{StaticResource YourKeyName}’ (in this instance the reference would be in the ItemContainerStyle property of the ListBox).

<Style TargetType="ListBoxItem">
    <Style.Setters>
        <Setter Property="Margin" Value="5,2" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBoxItem">
                    <Grid>
                        <Rectangle Opacity="0.5" Height="30" StrokeThickness="1" x:Name="backBox"
                                        Stroke="Silver" RadiusX="5" RadiusY="5" Fill="Azure"/>
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="Selector.IsSelected" Value="True">
                            <Setter TargetName="backBox" Property="Fill" Value="Silver"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style.Setters>
</Style>

Again I have a couple of things going on inside this style:

  1. It targets ListBoxItem as this is what we want to style (not the ListBox itself).
  2. The margin separates the items nicely.
  3. The actual style part is contained inside a ControlTemplate which is then assigned  the Template property of the ListBoxItem.
  4. The ContentPresenter will present whatever content it is given, in this case it is presenting the passed in DataTemplate.
  5. The trigger here indicates that when the ListBoxItem is selected we want to change the fill colour of the rectangle to indicate we have selected an item.

To finish I have added a new DataTemplate for the albums – this looks the same with the type and property names changed to display the correct things and I have also rearranged the view as follows:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="0.5*" />
        <ColumnDefinition Width="0.5*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="0.5*"/>
        <RowDefinition Height="0.5*"/>
    </Grid.RowDefinitions>

    <ListBox ItemsSource="{Binding Path=Artists}" Margin="5" 
                Grid.Column="0" Grid.Row="0"
                Grid.RowSpan="2"
                SelectedItem="{Binding SelectedArtist}" />
        
    <ListBox ItemsSource="{Binding Path=SelectedArtist.Albums}" Margin="5" 
                Grid.Column="1" Grid.Row="0" 
                SelectedItem="{Binding SelectedAlbum}" />
        
    <ListBox ItemsSource="{Binding Path=SelectedAlbum.Tracks}" Margin="5" 
                DisplayMemberPath="Name" 
                Grid.Column="1" Grid.Row="1" />
</Grid>

This now gives me the following view which I am sure you will agree looks a lot better and is easily achievable by simply using XAML – we could have done this in blend as well but for the simple changes we have made I prefer to edit the XAML directly.

image

In the next post I will be adding some adorner goodness to the screen for displaying album and track details (which also covers changes to the model).

Advertisements

Skinning in WPF

I like writing XAML.  It gives me a sense of completion when I write a style of template by hand and it just works, I like using blend as well but raw is more fun Smile.

Lets say we have a requirement to change the front-end of a product for different brandings and “products” (that is, the same product with a different ‘skin’).  One of the challenges we have is that we don’t want to write new user controls every time the client screen needs to change (especially for something simple such as switching to a different style for certain builds).  What follows is a way of using the power of WPF resources to skin an application with little work.

we start off with 2 ListBoxes on a window, for the purposes of this article the list boxes are simple with a list of colours, as follows (they are both the same).

<ListBox Grid.Column="0" Margin="5"> 
    <ListBoxItem>Red</ListBoxItem> 
    <ListBoxItem>Yellow</ListBoxItem> 
    <ListBoxItem>Pink</ListBoxItem> 
    <ListBoxItem>Green</ListBoxItem> 
    <ListBoxItem>Orange</ListBoxItem> 
    <ListBoxItem>Purple</ListBoxItem> 
    <ListBoxItem>Blue</ListBoxItem> 
</ListBox> 

Now, this will just display 2 boring list so lets add a nice style in the app.xaml file for the left hand list as follows:

<Style x:Key="RoundedList" TargetType="{x:Type ListBoxItem}">
    <Setter Property="Width" Value="150" />
    <Setter Property="Margin" Value="5,2" />
    <Setter Property="Padding" Value="2" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ListBoxItem}">
                <Border x:Name="border" BorderThickness="1" BorderBrush="Silver" Background="AliceBlue" CornerRadius="5">
                    <ContentPresenter x:Name="Content" Margin="0" HorizontalAlignment="Center" TextBlock.Foreground="Black" VerticalAlignment="Stretch" />
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="Selector.IsSelected" Value="True">
                        <Setter TargetName="border" Property="Background" Value="Silver" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Adding the ItemContainerStyle ({StaticResource RoundedList}) to the list box will now give us something like the following:

image

As we can see we now have a nice styled list on the left which will change colour when we click on each item.  To demonstrate the skinning I am going to apply the same style to the right hand list but with a different name (so we now have 2 styles in the app.xaml file – RoundedList and RoundedList_skin).

So, for certain builds of this app we want the list buttons to shrink slightly when we click them but we only want it to do that for certain configurations.  We can add a new WPF resource dictionary to our project (Skin.xaml) and add the new style to it – it is important that the new style retains the name of the one it is replacing as we shall see shortly.

<Style x:Key="RoundedList_skin" TargetType="{x:Type ListBoxItem}">
    <Setter Property="Width" Value="150" />
    <Setter Property="Margin" Value="5,2" />
    <Setter Property="Padding" Value="2" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ListBoxItem}">
                <Border x:Name="border" BorderThickness="1" BorderBrush="Silver" Background="AliceBlue" CornerRadius="5">
                    <ContentPresenter x:Name="Content" Margin="0" HorizontalAlignment="Center" VerticalAlignment="Stretch" />
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="Selector.IsSelected" Value="True">
                        <Setter Property="RenderTransform">
                            <Setter.Value>
                                <ScaleTransform ScaleX="0.85" ScaleY="0.85"/>
                            </Setter.Value>
                        </Setter> 
                        <Setter Property="RenderTransformOrigin" Value="0.5, 0.5"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
       </Setter.Value>
    </Setter>
</Style>

The transform in this style simply makes the item look as though it had been pressed.

And now for the actual trick of making the new skin available to the app thus replacing the defaults in App.xaml.  I need a new Application configuration file (App.config) with an appSetting (skins) to hold the required skins for this application build.  This is a comma-separated list of resource dictionaries that we are going to include in this build.  In order to allow the new skins to override the existing ones we are required to move the current resources that we have defined into a dictionary of their own (this is due to the scoping rules of merged dictionaries in WPF – the primary dictionary will always take precedence).  I am simply going to move them into a new dictionary called OriginalSkin.xaml and include this in my skins appSetting which now looks like this.

<add key="skins" value="OriginalSkin.xaml,Skin.xaml"/>

We now have the two dictionaries ready to be loaded.  In App.xaml.cs we need a new method to load the skins from the config and this should be called from the OnStartup method of the app (its virtual so is available right there in app.xaml.cs to be overridden).

private void LoadSkins()
{
    string skins = ConfigurationManager.AppSettings["skins"];
    if (string.IsNullOrEmpty(skins))
    {
        return;
    }

    string[] resources = skins.Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries);
    foreach (string resource in resources)
    {
        ResourceDictionary dictionary = new ResourceDictionary();
        dictionary.Source = new Uri(resource, UriKind.Relative);
        this.Resources.MergedDictionaries.Add(dictionary);
    }
}

This code loops through the skins in the appSetting and adds them as merged dictionaries.  The beauty of this is that merged dictionaries are read in the order that they are added so the latter dictionaries will override the earlier ones resulting in our newly minted RoundedList_skin being called instead of the original one but the original version of RoundedList is still available for the other ListBox:

image

We can now add any number of skins to this configuration but we will only load the ones listed in the App.config file – this now makes the app very extensible and can be changed at the drop of a hat.

The sample application that I used for this post can be found here