This article applies to applications being built using XAML for WPF, Windows Store App, or Windows Phone apps.
Each XAML object element is capable of displaying different content types. XAML provides a special property called Content that works to display the content of the element depending on the element capabilities. For example, a Content property of a Button can be a set to a string, an object, a UIElement or even and container. However, the Content property of a ListBox is set using the Items property.

Note: Some XAML object elements may not have the Content property available directly. It must be set through a property.

The code snippet in Listing 1 creates a Button control and sets its Content property to a string “Hello XAML”. The output looks as in Figure 1.

  1. <Button Height="50" Margin="10,10,350,310" Content="Hello XAML" />

Listing 1

Listing 2 is an alternative way to set the Content property of a Button.

  1. <Button Height="50" Margin="10,10,350,310">Hello XAML</Button>

Listing 2

The output of Listing 2 looks the same as in Figure 1.


Figure 1

A Button element can display other child elements as its content. The code listed in Listing 3 sets a Rectangle element as the content of the Button.

  1. <Button Height="80" Margin="10,80,300,170">
  2. <Rectangle Height="60" Width="120" Fill="Green"/>
  3. </Button>

Listing 3

The output of Listing 3 looks as in Figure 2.


Figure 2

Content property can also be a container or a parent element hosting child elements. The code listed in Listing 4 sets a StackPanel container with 5 child elements as the content of the Button.

  1. <Button Margin="10,201,100,40">
  2. <StackPanel Orientation="Horizontal">
  3. <Ellipse Height="60" Width="60" Fill="Red"/>
  4. <TextBlock TextAlignment="Center"><Run Text=" Red Circle"/></TextBlock>
  5. <TextBlock TextAlignment="Center"><Run Text=" "/></TextBlock>
  6. <Rectangle Height="60" Width="120" Fill="Green"></Rectangle>
  7. <TextBlock TextAlignment="Center"><Run Text=" Green Rectangle"/></TextBlock>
  8. </StackPanel>
  9. </Button>

Listing 4

The output of Listing 4 looks as in Figure 3.


Figure 3

The final XAML code is listed in Listing 5.

  1. <Window x:Class="ContentPropertySample.MainWindow"
  2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4. Title="MainWindow" Height="400" Width="500" >
  5. <Grid x:Name="ParentGrid">
  7. <Button Height="50" Margin="10,10,350,310" Content="Hello XAML" />
  8. <Button Height="80" Margin="10,80,300,170">
  9. <Rectangle Height="60" Width="120" Fill="Green"></Rectangle>
  10. </Button>
  12. <Button Margin="10,201,100,40">
  13. <StackPanel Orientation="Horizontal">
  14. <Ellipse Height="60" Width="60" Fill="Red"/>
  15. <TextBlock TextAlignment="Center"><Run Text=" Red Circle"/></TextBlock>
  16. <TextBlock TextAlignment="Center"><Run Text=" "/></TextBlock>
  17. <Rectangle Height="60" Width="120" Fill="Green"></Rectangle>
  18. <TextBlock TextAlignment="Center"><Run Text=" Green Rectangle"/></TextBlock>
  20. </StackPanel>
  21. </Button>
  22. </Grid>
  23. </Window>

Listing 5

The output of Listing 5 looks as in Figure 4.


Figure 4

As you can imagine from the preceding examples, you can pretty much host any user interfaces as content of a XAML element.

The code listed in Listing 6 creates the preceding Button controls dynamically in the code and sets their Content properties to a string, a Rectangle and a StackPanel respectively.

  1. // Button with string content
  2. Button helloButton = new Button();
  3. helloButton.Margin = new Thickness(10,10,350,310);
  4. helloButton.Content = "Hello XAML";
  6. // Button with a UIElement
  7. Button buttonWithRectangle = new Button();
  8. buttonWithRectangle.Height = 80;
  9. buttonWithRectangle.Margin = new Thickness(10, 80, 300, 170);
  11. // Create a Rectangle
  12. Rectangle greenRectangle = new Rectangle();
  13. greenRectangle.Height = 60;
  14. greenRectangle.Width = 120;
  15. greenRectangle.Fill = Brushes.Green;
  17. // Set Rectangle as Button.Content
  18. buttonWithRectangle.Content = greenRectangle;
  20. // Button with a Container, StackPanel
  21. Button buttonWithStackPanel = new Button();
  22. buttonWithStackPanel.Margin = new Thickness(10, 10, 350, 310);
  23. // Create a StackPanel and set its orinetation to horizontal
  24. StackPanel stackPanel = new StackPanel();
  25. stackPanel.Orientation = Orientation.Horizontal;
  27. // Create an Ellipse
  28. Ellipse redEllipse = new Ellipse();
  29. redEllipse.Width = 60;
  30. redEllipse.Height = 60;
  31. redEllipse.Fill = Brushes.Red;
  33. // Add to StackPanel
  34. stackPanel.Children.Add(redEllipse);
  36. // Create a TextBlock
  37. TextBlock textBlock1 = new TextBlock();
  38. textBlock1.TextAlignment = TextAlignment.Left;
  39. textBlock1.Text = "Red Circle";
  41. // Add to StackPanel
  42. stackPanel.Children.Add(textBlock1);
  44. // Create a TextBlock
  45. TextBlock space = new TextBlock();
  46. space.TextAlignment = TextAlignment.Center;
  47. space.Text = " ";
  49. // Add to StackPanel
  50. stackPanel.Children.Add(space);
  51. // Create a Rectangle
  52. Rectangle greenRectangle2 = new Rectangle();
  53. greenRectangle2.Height = 60;
  54. greenRectangle2.Width = 120;
  55. greenRectangle2.Fill = Brushes.Green;
  57. // Add to StackPanel
  58. stackPanel.Children.Add(greenRectangle2);
  60. // Create a TextBlock
  61. TextBlock textBlock2 = new TextBlock();
  62. textBlock2.TextAlignment = TextAlignment.Left;
  63. textBlock2.Text = "Green Rectangle";
  65. // Add to StackPanel
  66. stackPanel.Children.Add(textBlock2);
  68. // Set StackPaenl as Button.Content
  69. buttonWithStackPanel.Content = stackPanel;
  71. // Add dynamic button controls to the Window
  72. ParentGrid.Children.Add(helloButton);
  74. ParentGrid.Children.Add(buttonWithRectangle);
  75. ParentGrid.Children.Add(buttonWithStackPanel);

Listing 6

Summary

In this article, we saw the meaning of the Content property available to XAML elements and how to use it in our application.