As you saw earlier, Silverlight controls are highly customizable because they are Content controls . You can define exactly how you want them to appear by using the Control .Content property .
Look at this code example from Chapter 2:
<Button Height="148" HorizontalAlignment="Left" Margin="10,10,0,0" Name="button1" VerticalAlignment="Top" Width="205"> <Button.Content>
<Image Height="95" HorizontalAlignment="Left" Name="image1" Stretch="Fill"
VerticalAlignment="Top" Width="156"
Source="/SbSCh2_2;component/Images/front-logo.jpg" /> </Button.Content>
</Button>
This shows how you can easily make a Button a picture Button by overriding the default con- tent with custom XAML . As you can imagine, building visually exciting Buttons can require quite a lot of XAML that may include animations, transitions, and more .
So what happens if you have 20 Buttons like this? That’s a lot of XAML for Silverlight to parse through, and it could really slow down your Silverlight applications .
To solve such problems, you can use styles, which allow you to define the XAML for the con- tent of your controls once and then apply the defined style to as many controls as you like . This reduces the size of your application by avoiding repetitive XAML and improves perfor- mance, because Silverlight will need to parse the XAML only once to determine how to render it .
Style a button with XAML
1 . Create a new Silverlight project called SbSCh3_4 .
2 . Add a Button control to your design surface by double-clicking Button in the Toolbox . 3 . Add a StackPanel control to your design surface and make sure that its orientation is set
to Vertical .
4 . Add an Image control to your design surface by double-clicking Image in the Toolbox .
Make sure the image is added as a child of the StackPanel . If it isn’t, you can just drag it over the StackPanel and drop it there . To ensure you did this correctly, you can check the XAML view to make sure the Image tag is nested inside the StackPanel tags .
5 . Now set the Source property of the Image control . Use the dialog box to upload an im-
age to your project .
6 . Add a new TextBlock to your design surface and make it a child of the StackPanel . 7 . Set the Text property of the TextBlock to Fancy Books .
8 . Change the Font property of the TextBlock to something other than the default setting .
The following screenshot uses Georgia font at 20 points .
9 . Take a look at the XAML for your Button . The Content attribute will be set to “Button” .
Delete this attribute completely .
10 . Add a full closing tag to the button . Instead of using /> at the end of the line, you
should use the standard > and place </Button> at the end of the line . Your code should look something like this:
<Button ... HorizontalAlignment="Left" ... > </Button>
11 . Now add a <Button .Content></Button .Content> section to the Button, so that it looks like this: <Button HorizontalAlignment="Left" ... > <Button.Content> </Button.Content> </Button>
12 . Cut the entire StackPanel XAML and paste it within the <Button .Content> tags . Don’t
worry if you can’t see the content . If you don’t see the content, it is probably due to the Margin property on the StackPanel being set . You can just delete the entire attribute .
13 . Resize the Button so you can see its content .
14 . Select the Button and use the copy (Ctrl+C) and paste (Ctrl+V) commands to make a
few instances of the Button on your page . Take a look at how quickly your XAML docu- ment has grown and how much XAML is repeated across the page . Note that when you look at the design, you’ll see only one button because they’ve all been laid out on top of each other .
15 . Delete the duplicate Buttons so that you’re back to just one .
16 . To create a style for a container, you use something called a Setter and apply it to the
control template . You create styles in the Resources section of your XAML . If you look at the root node of your XAML, you’ll see that it’s called a UserControl . Find the Grid node declaration and above it type <UserControl .Resources></UserControl .Resources> .
17 . You define your styles within the <UserControl .Resources> tags . In this case, you’ll de-
fine a style called PictureButton . Add the Style tags so your code looks like this:
<UserControl.Resources>
<Style x:Key="PictureButton" TargetType="Button"> </Style>
18 . You can now define a Setter to set properties as part of the template and enter the
Value of the Setter using a ControlTemplate . Here’s what your XAML should look like:
<UserControl.Resources>
<Style x:Key="PictureButton" TargetType="Button"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> </ControlTemplate> </Setter.Value> </Setter> </Style> </UserControl.Resources>
19 . At this point, the style defines a template that you can apply to controls when you want
them to look alike . The template simply defines the look—your other code defines the Button and its content . So, following the example of the Fancy Books picture button from earlier, your style and template will look like this . Notice that the Button definition is placed inside the <ControlTemplate> tags .
<UserControl.Resources>
<Style x:Key="PictureButton" TargetType="Button"> <Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button"> <Button>
<Button.Content>
<StackPanel Height="100" HorizontalAlignment="Left" Name="stackPanel1" VerticalAlignment="Top" Width="200">
<Image Height="70" Name="image1" Stretch="Fill" Width="200"
Source="/SbSCh3_4;component/Images/logo_sbo.jpg" /> <TextBlock Height="23" Name="textBlock1" Text="Fancy Books" Width="120" FontFamily="Georgia" FontSize="20" />
</StackPanel> </Button.Content> </Button> </ControlTemplate> </Setter.Value> </Setter> </Style> </UserControl.Resources>
20 . To create a button that uses this style and template, you simply set the Style property
of a Button to the resource . You do this using the following syntax:
<Button Style="{StaticResource PictureButton}" Height="100" Width="200" />
21 . You could also define the Height and Width in the template if you’d rather not include
them in the Button tag .
22 . Now, if you cut and paste your Button declaration so your application has four identical
buttons, you’ll see that you only need four lines of XAML to define them!
Key Points
■
■ Using the layout controls, you can control how UI elements are rendered, including how
they automatically flow when users change the window size .
■
■ The Canvas control offers a completely definable surface on which you can place con-
trols wherever you like .
■
■ The Grid control lets you define a grid with cells that contain controls, letting you con-
■
■ You can use the StackPanel control to stack controls either vertically or horizontally, au-
tomatically laying them out according to the height of the control .
■
■ When using content controls in Silverlight, you can fine-tune exactly how you want any
control to appear . This expands the volume of XAML used in your UI definition and can lead to maintenance and performance problems . To avoid such problems, you can use styles to define how controls should appear and templates to specify the parts of the control that will define the style .
67