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.
- <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.
- <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.
- <Button Height="80" Margin="10,80,300,170">
- <Rectangle Height="60" Width="120" Fill="Green"/>
- </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.
- <Button Margin="10,201,100,40">
- <StackPanel Orientation="Horizontal">
- <Ellipse Height="60" Width="60" Fill="Red"/>
- <TextBlock TextAlignment="Center"><Run Text=" Red Circle"/></TextBlock>
- <TextBlock TextAlignment="Center"><Run Text=" "/></TextBlock>
- <Rectangle Height="60" Width="120" Fill="Green"></Rectangle>
- <TextBlock TextAlignment="Center"><Run Text=" Green Rectangle"/></TextBlock>
- </StackPanel>
- </Button>
Listing 4
The output of Listing 4 looks as in Figure 3.
Figure 3
The final XAML code is listed in Listing 5.
- <Window x:Class="ContentPropertySample.MainWindow"
- xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
- xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
- Title="MainWindow" Height="400" Width="500" >
- <Grid x:Name="ParentGrid">
-
- <Button Height="50" Margin="10,10,350,310" Content="Hello XAML" />
- <Button Height="80" Margin="10,80,300,170">
- <Rectangle Height="60" Width="120" Fill="Green"></Rectangle>
- </Button>
-
- <Button Margin="10,201,100,40">
- <StackPanel Orientation="Horizontal">
- <Ellipse Height="60" Width="60" Fill="Red"/>
- <TextBlock TextAlignment="Center"><Run Text=" Red Circle"/></TextBlock>
- <TextBlock TextAlignment="Center"><Run Text=" "/></TextBlock>
- <Rectangle Height="60" Width="120" Fill="Green"></Rectangle>
- <TextBlock TextAlignment="Center"><Run Text=" Green Rectangle"/></TextBlock>
-
- </StackPanel>
- </Button>
- </Grid>
- </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.
- // Button with string content
- Button helloButton = new Button();
- helloButton.Margin = new Thickness(10,10,350,310);
- helloButton.Content = "Hello XAML";
-
- // Button with a UIElement
- Button buttonWithRectangle = new Button();
- buttonWithRectangle.Height = 80;
- buttonWithRectangle.Margin = new Thickness(10, 80, 300, 170);
-
- // Create a Rectangle
- Rectangle greenRectangle = new Rectangle();
- greenRectangle.Height = 60;
- greenRectangle.Width = 120;
- greenRectangle.Fill = Brushes.Green;
-
- // Set Rectangle as Button.Content
- buttonWithRectangle.Content = greenRectangle;
-
- // Button with a Container, StackPanel
- Button buttonWithStackPanel = new Button();
- buttonWithStackPanel.Margin = new Thickness(10, 10, 350, 310);
- // Create a StackPanel and set its orinetation to horizontal
- StackPanel stackPanel = new StackPanel();
- stackPanel.Orientation = Orientation.Horizontal;
-
- // Create an Ellipse
- Ellipse redEllipse = new Ellipse();
- redEllipse.Width = 60;
- redEllipse.Height = 60;
- redEllipse.Fill = Brushes.Red;
-
- // Add to StackPanel
- stackPanel.Children.Add(redEllipse);
-
- // Create a TextBlock
- TextBlock textBlock1 = new TextBlock();
- textBlock1.TextAlignment = TextAlignment.Left;
- textBlock1.Text = "Red Circle";
-
- // Add to StackPanel
- stackPanel.Children.Add(textBlock1);
-
- // Create a TextBlock
- TextBlock space = new TextBlock();
- space.TextAlignment = TextAlignment.Center;
- space.Text = " ";
-
- // Add to StackPanel
- stackPanel.Children.Add(space);
- // Create a Rectangle
- Rectangle greenRectangle2 = new Rectangle();
- greenRectangle2.Height = 60;
- greenRectangle2.Width = 120;
- greenRectangle2.Fill = Brushes.Green;
-
- // Add to StackPanel
- stackPanel.Children.Add(greenRectangle2);
-
- // Create a TextBlock
- TextBlock textBlock2 = new TextBlock();
- textBlock2.TextAlignment = TextAlignment.Left;
- textBlock2.Text = "Green Rectangle";
-
- // Add to StackPanel
- stackPanel.Children.Add(textBlock2);
-
- // Set StackPaenl as Button.Content
- buttonWithStackPanel.Content = stackPanel;
-
- // Add dynamic button controls to the Window
- ParentGrid.Children.Add(helloButton);
-
- ParentGrid.Children.Add(buttonWithRectangle);
- 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.