Theming images – why Expression Design is great

Microsoft Expression design is a really useful tool, and it’s now free – you can download Expression Design from Microsoft right here.

“But why should I?” you may ask. I know people have their tool of choice from Photoshop, to Paint.Net, to just plain old paint for creating an icon or graphic to use in your app. And, as I discussed here, some effects can be achieved using Opacity Masks.

Expression Design can take this one step further and spit out the XAML for your image.  You can then customize the image at run time by binding the colors, or fonts, or line styles to other resources. You can even show or hide different parts of the image, just the same as you would for a Button, Textblock or other control. One use for this is avoiding light/dark theme issues, but it also gives good flexibility.

So how’s it done?

First, create an image, shape, logo or whatever in expression design.designNext, choose File, Export and select XAML Silverlight 4 / WPF Canvas

design-export

Open the XAML file in visual studio or any text editor.  In my case it looks like this:

<?xml version="1.0" encoding="utf-8"?>
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="Untitled1" Width="100" Height="100" Clip="F1 M 0,0L 100,0L 100,100L 0,100L 0,0">
 <Canvas x:Name="Layer_1" Width="100" Height="100" Canvas.Left="0" Canvas.Top="0">
  <Rectangle x:Name="Rectangle" Width="46.75" Height="44.5" Canvas.Left="5" Canvas.Top="6.6875" Stretch="Fill" Fill="#FF000000"/>
  <Rectangle x:Name="Rectangle_0" Width="46.75" Height="44.5" Canvas.Left="26.625" Canvas.Top="27.75" Stretch="Fill" Fill="#FFFF0000"/>
  <Rectangle x:Name="Rectangle_1" Width="46.75" Height="44.5" Canvas.Left="48.625" Canvas.Top="52.875" Stretch="Fill" Fill="#FF230FD2"/>
 </Canvas>
</Canvas>

The last thing is to decide how to use it.  Silverlight has to use this as a Canvas which has some limitations.  You will run into them quickly if you just add the Canvas as-is to your resource dictionary  and try and use it.  However, I can be used both in the page content, or in a resource.

The easiest way to add it is in page content, like this:

<ContentControl Grid.Row="0" >
 <Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="Untitled1" Width="100" Height="100" Clip="F1 M 0,0L 100,0L 100,100L 0,100L 0,0">
  <Canvas x:Name="Layer_1" Width="100" Height="100" Canvas.Left="0" Canvas.Top="0">
   <Rectangle x:Name="Rectangle" Width="46.75" Height="44.5" Canvas.Left="5" Canvas.Top="6.6875" Stretch="Fill" Fill="#FF000000"/>
   <Rectangle x:Name="Rectangle_0" Width="46.75" Height="44.5" Canvas.Left="26.625" Canvas.Top="27.75" Stretch="Fill" Fill="#FFFF0000"/>
   <Rectangle x:Name="Rectangle_1" Width="46.75" Height="44.5" Canvas.Left="48.625" Canvas.Top="52.875" Stretch="Fill" Fill="#FF230FD2"/>
  </Canvas
 </Canvas>
</ContentControl>

However, this is only half of it, as you see – the top left square of my design is missing.

badimage

Next, I change the color for the first rectangle:

<Rectangle x:Name="Rectangle" Width="46.75" Height="44.5" Canvas.Left="5" Canvas.Top="6.6875" Stretch="Fill" Fill="{StaticResource PhoneForegroundBrush}"/>

That PhoneForgroundPrush will change depending on the light or dark theme, but I could use custom colors here, if I’d decided to offer a choice of my own themes to users. In this case, it now looks like:

goodimage

So if I wanted to use this as a resource, so I could have it appear as part of a list, then what’s the key. Well, if the canvas itself is a resource, it will cause problems, but the canvas can be contained in other things, such as a DataTemplate for an ItemsControl.  I used this system in Shoppers Calculator to do the check marks, before I knew about the Opacity Mask trick.  Here’s the XAML I’m using:

<DataTemplate x:Key="ShoppingItemTemplate">
  <StackPanel>          
    <Grid MouseLeftButtonUp="ListItem_MouseUp" Background="{Binding SelectedBrush}" Height="30">
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*" />
        <ColumnDefinition Width="6*"/>
        <ColumnDefinition Width="Auto"/>
      </Grid.ColumnDefinitions>     
      <TextBlock Text="{Binding Quantity}" FontSize="{StaticResource PhoneFontSizeMediumLarge}"/>      
      <TextBlock Grid.Column="1" Text="{Binding ValueString}" FontSize="{StaticResource PhoneFontSizeMediumLarge}" HorizontalAlignment="Right" Margin="6,0"/>
      <ContentControl Grid.Column="2" Visibility="{Binding ElementName=ControlContent, Path=DataContext.SupportsTax, Converter={StaticResource boolToVisible}}" MinWidth="30" VerticalAlignment="Bottom" VerticalContentAlignment="Bottom">
        <Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Visibility="{Binding HasTax, Converter={StaticResource boolToVisible}}" Width="25.6875" Height="20.625" Clip="F1 M 0,0L 25.6875,0L 25.6875,20.625L 0,20.625L 0,0">
          <Canvas x:Name="Layer_1" Width="48.4111" Height="299.554" Canvas.Left="0" Canvas.Top="0">
           <Path x:Name="Path" Width="22.8125" Height="19.125" Canvas.Left="1.4375" Canvas.Top="1.5" Stretch="Fill" StrokeThickness="4" StrokeStartLineCap="Square" StrokeEndLineCap="Square" StrokeLineJoin="Bevel" Stroke="{StaticResource PhoneForegroundBrush}" Data="F1 M 3.4375,10.61L 10.8855,18.625L 22.25,3.5"/>
           <Path x:Name="Path_0" Width="18.75" Height="15.3125" Canvas.Left="3.3125" Canvas.Top="0" Stretch="Fill" StrokeMiterLimit="2.75" Stroke="#80000000" Data="F1 M 3.8125,7.625L 10.8125,14.8125L 21.5625,0.5"/>
           <Path x:Name="Path_1" Width="25.6875" Height="17.125" Canvas.Left="0" Canvas.Top="3.125" Stretch="Fill" StrokeLineJoin="Bevel" Stroke="#80000000" Data="F1 M 0.5,10.75L 9.1875,19.75L 12.875,19.5625L 25.1875,3.625"/>
         </Canvas>
        </Canvas>            
       </ContentControl>
     </Grid>
   </StackPanel>
 </DataTemplate>

This DataTemplate is used to display the shopping items in your basket in my Shoppers Calculator app.  The canvas represents an image (checkmark) that i’m using to denote if tax has been applied.  Yes, it’s a very simplistic image and example, but hopefully this has shown why I value Expression Design among my developer tools.

Advertisements

About bluechrism

I am a software developer with most professional experience in the Windows .Net realm and I'm currently a WPF developer with Starkey Labs. However, I have wanted for some time to start the mobile developer journey properly and being an N900 owner, this was to be in the realm of QT. Job hunting, moving to Minnesota and changing jobs put my plans on hold 6-12 months but things are starting to settle now, just as I'm getting sorted to start some things, Microsoft and Nokia merge. This blog is about my novice mobile development experiences and hopefully will end up complete with links to download some apps on various platforms, but obviously by the name, Sybian, Maemo/Meego and Windows Mobile. In other stuff, I am English, I support Everton FC, I have visited Glastonbury music festival 5 times and recommend it to anyone. I am married and my wife and i have a dog called Friday.
This entry was posted in Development, Microsoft, Windows Phone and tagged , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s