One of the key concepts in XAML is that the Content property of a XAML control like a Button or ComboBoxItem does not have to contain just textual data. In fact, Content can be almost any other XAML that you want. To illustrate here is a simple example of how to spruce up your Button controls in Silverlight.

Here is some very simple XAML that consists of two Button controls within a StackPanel on a Silverlight User Control.

<StackPanel>
  <Button Name="btnHome"
          HorizontalAlignment="Left"
          Content="Home" />
  <Button Name="btnLog"
          HorizontalAlignment="Left"
          Content="Logs" />
</StackPanel>

The XAML listed above will produce a Silverlight control within a Browser that looks like Figure 1.

 

Figure 1: Normal button controls are quite boring.

With just a little bit of refactoring to move the button attributes into Styles, we can make the buttons look a little better. I am a big believer in Styles, so I typically create a Resources section within my user control where I can factor out the common attribute settings for a particular set of controls. Here is a Resources section that I added to my Silverlight user control.

<UserControl.Resources>
  <Style TargetType="Button"
         x:Key="NormalButton">
    <Setter Property="HorizontalAlignment"
            Value="Left" />
    <Setter Property="MinWidth"
            Value="50" />
    <Setter Property="Margin"
            Value="10" />
  </Style>
</UserControl.Resources>

Now back in the XAML within the Grid control I update the Button controls to use the Style attribute and have each button use the Static Resource called NormalButton.

<StackPanel>
  <Button Name="btnHome"
          Style="{StaticResource NormalButton}"
          Content="Home" />
  <Button Name="btnLog"
          Style="{StaticResource NormalButton}"
          Content="Logs" />
</StackPanel>

With the additional attributes set in the Resources section on the Button, the above XAML will now display the two buttons as shown in Figure 2.

Figure 2: Use Resources to Make Buttons More Consistent

Now let’s re-design these buttons even more. Instead of using words for each button, let’s replace the Content property to use a picture. As they say… a picture is worth a thousand words, so let’s take advantage of that. Modify each of the Button controls and eliminate the Content attribute and instead, insert an <Image> control with the <Button> and the </Button> tags. Add a ToolTip to still display the words you had before in the Content and you will now have better looking buttons, as shown in Figure 3.

 

Figure 3: Using pictures instead of words can be an effective method of communication

The XAML to produce Figure 3 is shown in the following listing:

<StackPanel>
  <Button Name="btnHome"
          ToolTipService.ToolTip="Home"
          Style="{StaticResource NormalButton}">
    <Image Style="{StaticResource NormalImage}"
            Source="Images/Home.jpg" />
  </Button>
  <Button Name="btnLog"
          ToolTipService.ToolTip="Logs"
          Style="{StaticResource NormalButton}">
    <Image Style="{StaticResource NormalImage}"
            Source="Images/Log.jpg" />
  </Button>
</StackPanel>

You will also need to add the following XAML to the User Control’s Resources section.

<Style TargetType="Image"
        x:Key="NormalImage">
  <Setter Property="Width"
          Value="50" />
</Style>

Add Multiple Controls to Content

Now, since the Content can be whatever we want, you could also modify the Content of each button to be a StackPanel control. Then you can have an image and text within the button.

<StackPanel>
  <Button Name="btnHome"
          ToolTipService.ToolTip="Home"
          Style="{StaticResource NormalButton}">
    <StackPanel>
      <Image Style="{StaticResource NormalImage}"
              Source="Images/Home.jpg" />
      <TextBlock Text="Home"
                  Style="{StaticResource NormalTextBlock}" />
    </StackPanel>
  </Button>
  <Button Name="btnLog"
          ToolTipService.ToolTip="Logs"
          Style="{StaticResource NormalButton}">
    <StackPanel>
      <Image Style="{StaticResource NormalImage}"
              Source="Images/Log.jpg" />
      <TextBlock Text="Logs"
                  Style="{StaticResource NormalTextBlock}" />
    </StackPanel>
  </Button>
</StackPanel>

You will need to add one more resource for the TextBlock control too.

<Style TargetType="TextBlock"
        x:Key="NormalTextBlock">
  <Setter Property="HorizontalAlignment"
          Value="Center" />
</Style>

All of the above will now produce the following:

 

Figure 4: Add multiple controls to the content to make your buttons even more interesting.

Summary

While this is a simple example, you can see how XAML Content has great flexibility. You could add a MediaElement control as the content of a Button and play a video within the Button. Not that you would necessarily do this, but it does work. What is nice about adding different content within the Button control is you still get the Click event and other attributes of a button, but it does necessarily look like a normal button.

Good Luck with your Coding,
Paul Sheriff

** SPECIAL OFFER FOR MY BLOG READERS **
Visit http://www.pdsa.com/Event/Blog for a free video on Silverlight entitled "Silverlight XAML for the Complete Novice - Part 1."