Content in Controls - Microsoft Silverlight 4 Step by Step

The two previous examples in this chapter placed text on a button . You learned how to change the text both manually and by using the Content property . However, the Content property is useful for far more than simple text . In fact the Content property stores XAML, which means you can define a button’s content by using the same language that you use to define the overall user interface . For example, you’ll often see user interfaces that incorporate buttons with pictures . Here’s a look at how you can build a picture button by using XAML .

Build a picture button

1 . Create a new Silverlight project called SbSCh2_2 .

2 . Double-click the Button control in the Toolbox to add a new Button control instance . 3 . Click the sizing handle at the lower-right corner of the button and drag the mouse to

make the button larger .

The XAML for the Button will now look something like this:

<Grid x:Name="LayoutRoot" Background="White"> <Button Content="Button" Height="107"

HorizontalAlignment="Left" Margin="10,10,0,0" Name="button1" VerticalAlignment="Top" Width="170" /> </Grid>

4 . Delete the Content=“Button” attribute and replace the slash and angle bracket (/>)

shown on the fourth line with a single angle bracket (>) . Then add the full </Button> closing tag . After you do that, your XAML should look like this:

<Grid x:Name="LayoutRoot" Background="White"> <Button Height="107"

HorizontalAlignment="Left" Margin="10,10,0,0" Name="button1" VerticalAlignment="Top" Width="170"> </Button>

</Grid>

5 . Now, add an Image control to the application . You won’t use the Image control directly,

but adding one to the designer gives you a nice shortcut for adding an Image to your project with the added advantage of making sure that it’s in the correct place for any other Image control to load it .

6 . Double-click the Image tool to add an Image .

7 . After adding the Image control, click it, and look for its Source property in the

Properties window . You’ll see that it has a caret button (one with ellipsis “…”) beside it .

8 . Click the caret button, and you’ll see a dialog box that asks which picture to use . If there

are any images within your solution, they’ll be listed here . You haven’t put any images in yet, so the list will be empty .

9 . Click the Add… button to add a new image to your solution .

10 . Visual Web Developer will display a common dialog box that lets you select an image in

one of the two formats Silverlight supports: .jpg or .png . Select an image and click OK .

11 . The Choose Image dialog will display an image . The Path field will show how you can

reference the image in the XAML for your Silverlight application . Click OK and the Image control will load the selected image .

12 . In the designer window, resize the image so that it is smaller than the button .

13 . Looking at the XAML, you’ll see that the Button declaration and the Image declaration

are siblings . That means they are beside each other, and neither is nested within the other .

When editing the content of the button earlier, you modified an attribute whose value was a string, which you deleted . Another way to describe the content is to use a child node—in other words, one node within another . In XAML, you do this by using dot syn- tax, so the Content declaration uses a Button.Content child, like this:

</Button.Content>

</Button>

14 . Now you can place XAML inside the Button.Content tags for the button . Remember the

Image control you just created? Cut its XAML and paste that inside the tag . The image

should now appear within the button .

Note If you moved the image around in the designer window, the Margin property may have been set . As a result, you may not see the image within the button at this point . If this happens, simply delete the Margin attribute and then you should see the image within the button .

Notice the placement of the XAML within the Button.Content tags in the following code:

<Button.Content>

15 . If you try to add more XAML elements to the Button.Content tag, you’ll discover that

Visual Web Developer flags an error by underlining the second element . This is because the property can only hold one XAML element . That may sound limiting, but it really isn’t . The single XAML element can be a container control, which, in turn, can hold mul- tiple XAML controls . One such container is the StackPanel control .

16 . Add a StackPanel element as the first child of the Button.Content node . The XAML edi-

tor will automatically close your tag, so it looks like this:

<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>

17 . The preceding code is invalid because the Button.Content element has two children

(StackPanel and Image) . So cut the Image tag and paste it between the StackPanel tags . Your XAML should now look like this:

<Button.Content> <StackPanel>

<Image Height="95" HorizontalAlignment="Left" Name="image1" Stretch="Fill"

VerticalAlignment="Top" Width="156"

Source="/SbSCh2_2;component/Images/front-logo.jpg" /> </StackPanel>

</Button.Content>

18 . A StackPanel control can have multiple children, allowing you to add another control

as a sibling to the Image control . Place the cursor before the closing </StackPanel> tag and type the following:

The XAML for the button’s content now contains two controls: an Image control and a

TextBlock control .

19 . By default, the StackPanel control stacks its children vertically . If you want them stacked

horizontally (placing the text to the right of the image, rather than beneath it) you can use the Orientation property of the StackPanel . Set it to Horizontal to see the effect .

You’ve now seen how content controls work . This might be a bit of a departure from what you are used to, where a control holds a specific data type, such as a text caption on a button . You’ll find that many Silverlight controls are content controls, making it easy to build complex scenarios, such as an image list, a video button, and so on .

In document Microsoft Silverlight 4 Step by Step (Page 48-54)