Top 10 Silverlight 4 beta features for Designers

Silverlight 4 beta is out and delivers several new features for programmers, media people and designers. As a designer I was most interested in some specific features, so I’d like to share my top 10 with you.

10. Command property on buttons and hyperlink

I’ll have to explain this one. John Papa’s whitepaper only speaks of the MVVM pattern context, but in the WPF world commands are well known. Actually it is a feature not unlike Behaviors, because they encapsulate programming code in a simple property on a button or a hyperlink. The action that follows when clicking that button or hyperlink is determined by the command. Also, it is possible to include a parameter that the command can use. Thus it is used more dynamically and is more flexible. When developers create commands, designers can easily connect them as a simple property of a button or hyperlinkbutton.

<Button Content="Load" Width="120"
        Command="{Binding LoadProductsCommand}"
        CommandParameter="{Binding Path=Text, ElementName=MyFilterTextBox}"/>

9. StringFormat, TargetNullValue, FallbackValue on Data Binding

Again, maybe not straightforward, but these additions to the data binding functionality of Silverlight helps designer to format the results of data binding with more ease. TargetNullValue will show a value when the binding has null as a result, so you can insert a zero or other sensible value instead. The FallBackValue is about the same, but it shows up when a binding is unsuccessful. You can apply a different value instead. The best of the three is the StringFormat property, which allows you to format the text resulting from data binding. This way a designer can easily indicate that output is a currency or a percentage or a date in a specific format.

<TextBox Text="{Binding Path=UnitPrice, Mode=TwoWay, StringFormat=C}" />

<TextBox Text="{Binding Path=Discount, Mode=TwoWay, StringFormat=P}"/>

<TextBox Text="{Binding Path=OrderDate, Mode=TwoWay, StringFormat=’MM-dd-yyyy’}"/>

8.Webbrowser control and HTML brush

This seems like a nobrainer, but some restrictions are present. This only works in sandboxed applications, which means that you have to have an Out-Of-Browser application. You can use inline HTML (NavigateToString), an inline HTML document (Navigate) or an URL (Source).

string html = "<HTML><HEAD></HEAD><BODY style=’margin:0 padding:0′><IFRAME width=’100%’ style=’overflow: hidden;’ height=’100%’ src=’; /></BODY></HTML>";


The HTML brush lets you paint with a webpage, so you can use it as a Brush in any Shape.

<Path Data="…" >


        <HtmlBrush x:Name="htmlBrush" AlignmentX="Left" AlignmentY="Top" Stretch="None"/>



And in C# set the source: htmlBrush.SetSource(MyWebBrowser);

7. CompositeTransform

This makes a designers’ live a bit easier: combine Translation, Rotation and Scale in one go:

<Rectangle Height="100" Width="100" Fill="Red">

        <CompositeTransform ScaleX="2" Rotation="45" TranslateY="42"/>



6. Webcam and Microphone support

This one is self-explaining, but… What are designers and developers going to do with it? Check out the blog-post by Rob Houweling on the Silverlight and Expression Insiders site for details about this feature.

5. Rich Text Area control

Finally a way to create richer text experiences using the Rich Text Area. This will end the struggle with Run elements in TextBlocks to change a color, font or font size inside a text object. The Rich Text Area control welcomes every type of content. This includes other controls like Images and UI controls. Create bold, italic, colored text inside a block of text with ease using the Rich Text Area control. Will this lead to the inclusion of FlowDocuments in Silverlight one day?

4. ViewBox

A ViewBox is a handy container that allows you to scale up or down any graphic or large element that you want to display on a screen. Use the original sizes for the content and set the ViewBox to the size you want the content to show up. It’s that easy and very convenient at times. A ViewBox can contain only one element inside. It’s StretchDirection can be UpOnly, DownOnly or Both. The content can be Stretch-ed using None, Fill, Uniform and Uniform to fill, just like it’s WPF version.

<Viewbox x:Name=”iconSize” Margin="5" Width="64" Height="64">

    <Image Source="aHugeImage.png"/>


3. Fluid UI States for ItemsControl

I’d be very interested to see what designers and developer create with this feature. Create an ItemsControl and hook up interesting appearing and disappearing animations when adding or deleting items from the control. This not only allows you to animate ListBoxItems with ease, but opens the door to exiting navigation using items in ItemControls. Who’s up for the challenge? The new visual states are: BeforeLoaded, Loaded, and Unloaded.

2. Implicit Style

Styling an application helps in acceptance and defining a look for different groups of users. Implicit Styles will help a lot in implementing Themes. Actually the ToolKit people have already removed the Implicit Style Manager that took care of this. Just omit the x:Key and all controls of a the specific type will take on the style you give them. Combined with swapping ResourceDictionaries you have theming solutions available.

1. Printing support

Even though it is only possible in code, printing support is a huge improvement from a designers’ point of view. This is the most requested feature for a reason. It is possible the print the content of a page using the LayoutRoot, or any other container that you specify. It is also possible to print objects that are entirely invisible on the screen, but you’ll have to build a tree of objects in memory a feed that to the print command. This opens up enough possibilities to satisfy business consumers. So output your work to printers everywhere…

PrintDocument pd = new PrintDocument();

pd.PrintPage += (s, args) => {

    args.PageVisual = LayoutRoot;



These are the features that caught my eye as a designer. Some didn’t make it to the top ten, like the WordEllipsis TextTrimming property, Right Mouse Click Events and ScrollWheel events and ClipBoard support. Other features are more interesting for media people or developers. Check out Tim Heuer’s blog or John Papa’s white paper for all details on all new Silverlight 4 features.


Tip: Set DesignWidth and DesighHeight when styling Silverlight 3 controls

I rediscovered the usefulness of the DesignWidth and DesignHeight Blend properties while styling several controls.

Next time you are looking at a very small ControlTemplate in Resource Editing Mode in Expression Blend, don’t forget to set the design-time width and height. It will make your life easier. You can set it at the expected size of the control in de real interface and you can work in the control and see a reasonably sized control.

Styling a TabItem, for instance, will show the tab at the MinimumWidth en MinimumHeight of 10 pixels, leaving you a 10×10 pixel tab to work with. Setting the DesignWidth and DesignHeight properties on the root grid of the control to, say 150 and 25 gives you  room to work with and a more realistic view on the tab.

<ControlTemplate TargetType=”TabItem”>
    <Grid x:Name=”Root” d:DesignWidth=”150″ d:DesignHeight=”25″>

This needs the Blend NameSpaces at the top of the page to work:

xmlns:mc=”″ mc:Ignorable=”d”


Silverlight Style: GlassBorderStyle

GlassBorderStyleCreated a simple, but nice Glass Border for a panel in my current Silverlight 3 project. I’d like to share it with you…






  <Style x:Key="GlassBorderStyle" TargetType="Border">
    <Setter Property="BorderThickness" Value="2"/>
    <Setter Property="Padding" Value="5"/>
    <Setter Property="Background">
            <LinearGradientBrush EndPoint="0.75,1" StartPoint="0.25,0">
                <GradientStop Color="#33FFFFFF" Offset="0"/>
                <GradientStop Color="#C0FFFFFF" Offset="0.287"/>
                <GradientStop Color="#4011322D" Offset="0.683"/>
                <GradientStop Color="#33FFFFFF" Offset="1"/>
    <Setter Property="BorderBrush">
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#5811322D" Offset="0"/>
                <GradientStop Color="#3EFFFFFF" Offset="0.25"/>
                <GradientStop Color="#FFFFFFFF" Offset="0.5"/>
                <GradientStop Color="#3EFFFFFF" Offset="0.75"/>
                <GradientStop Color="#BFFFFFFF" Offset="1"/>
    <Setter Property="Effect">
            <DropShadowEffect BlurRadius="3" ShadowDepth="3" Opacity="0.5"/>

To use this style:

<Border x:Name="GlassBorder" Height="100" Width="100" CornerRadius="10"
    Style="{StaticResource GlassBorderStyle}">
    <Button Content="OK"/>