Binary Bob’s Blog

25
May

Scale 9 in Silverlight and WPF

Posted By Bob Bartholomay under Blend, Silverlight, WPF.

[updated 7/12/09 to Silverlight 3 RTW]

One of the very cool features of Flex that I miss in Silverlight is Scale 9. Sure Silverlight is vector based and if you resize your browser or a container inside your application, vector artwork scales perfectly.

But chances are your designer will give you a comp to reproduce along with the specific assets and chances are good you will need to use bitmap images as “skins”. They will look fine unless your user resizes the browser when all of a sudden your great app looks crappy.

In Flex you can conveniently specify Scale 9 settings in your CSS for a container’s skins as follows:

?View Code CSS
border-skin: Embed(source="mybackgrnd.png",scaleGridTop="20", scaleGridBottom="20",
scaleGridLeft="10", scaleGridRight="15");

In Silverlight you will need to do a little more work using a Grid (with 3 columns and 3 Rows) and the ‘Star sizing” capabilities of its Row and Column Definitions. For instance:

?View Code XML
<UserControl x:Class="NineScalePlaySite.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
    <Grid x:Name="LayoutRoot" ShowGridLines="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="640"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="480"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Canvas Grid.Column="1" Grid.Row="1">
            <Canvas.Background>
                <ImageBrush ImageSource="Bandon.JPG"/>                
            </Canvas.Background>
        </Canvas>
    </Grid>
</UserControl>

Notice the Gridlines are visible and they will stay in the same (general) place as the user resizes the browser. By setting all but the center’s widths and heights to “*” and then the center’s width and height to the size of your content, you get the desired effect as the browser’s size is changed.

Scale 9

You can see it in action here. Hope this saves someone some time. – Cheers!

One Response to “Scale 9 in Silverlight and WPF”

  1. Binary Bob’s Blog » Graphical Skinning Comes to Silverlight said:

    [...] Silverlight 2, I tried to use a 3X3 grid with “star sizing” for the middle piece and while it helped, it wasn’t [...]

    Posted on September 16th, 2009 at 7:53 pm

Leave a Reply