#80 – Content Properties and Collection Syntax Express UIElement Containment

Using both a content property and the collection syntax is quite common in XAML and often expresses containment of a collection of UIElement objects in a parent container.

For example, the StackPanel is a parent control, containing a number of child controls:

     <Label Content="A label" Height="28" />
     <Button Content="Click Me" Height="23" />

In this example, containment is expressed by listing the child controls contained in the StackPanel as child elements in XAML.

This containment shorthand is possible for two reasons:

  • StackPanel‘s content property is Children, an UIElementCollection
  • We can specify the members of the UIElementCollection using collection syntax, by listing its members

All containers that inherit from System.Windows.Controls.Panel have Children as their content property–including Grid, StackPanel, Canvas, WrapPanel, etc.

#79 – Content Properties for Common WPF Types

Here is a list of the content properties for some common WPF types.  You can set values for these properties in XAML using one or more child elements directly, rather than having to use the property element syntax.

E.g. Because Text is the content property for a TextBox, you can specify a value for Text as a child element of the TextBox element:

 <TextBox Height="23" Width="120">
     Some text...

Here is the list of some common WPF types and their content properties:

  • Button – Content
  • CheckBox – Content
  • ComboBox – Items
  • Grid – Children
  • GridView – Columns
  • GroupBox – Content
  • Label – Content
  • ListBox – Items
  • ListView – Items
  • Page – Content
  • Panel – Children
  • StackPanel – Children
  • TextBox – Text
  • TreeView – Items
  • Window – Content

For a more complete list, see Building A List of Types That Have Content Properties.

#78 – Setting the Value of a Content Property By Setting Child Element

You can set the value of a property using an XAML attribute.  Consider setting the Text property of a TextBox using an attribute:

 <TextBox Height="23" Width="120" Text="Eat Muesli!"/>

You can also set the same property value using property element syntax:

 <TextBox Height="23" Width="120">
         Eat Muesli!

There is an even simpler way to specify the value of the Text property.  Because the TextBox class has identified its Text property as a content property, the value of the Text property can be specified directly as the single child of the TextBox XAML element:

 <TextBox Height="23" Width="120">
     Eat Muesli!

#77 – XAML Collection Syntax

When setting  a property value in XAML for a property that represents some sort of collection, you can directly specify the children of the collection as a series of elements.

For example, to create some entries in a ListBox, you can do the following:

 <ListBox Height="100" HorizontalAlignment="Left" Margin="64,66,0,0" Name="listBox1" VerticalAlignment="Top" Width="120">
         <ListBoxItem Content="Oak"/>
         <ListBoxItem Content="Red Pine"/>
         <ListBoxItem Content="Larch"/>

The ListBox.Items property is of type ItemCollection, so you might expect to see the tag <ItemCollection> under the property element <ListBox.Items>.  But because the Items property is a collection, you can just list the child elements of the collection directly.

#76 – Two Types of Elements in XAML

In XML, elements are the things surrounded by angle brackets, < >.  In XAML, there are two types of elements.

An object element declares an instance of a type.

 <Button Name="btnClick" Content="Click Me" Height="23" Width="75"/>

A property element specifies the value of a property.  (Button.Background is the property element in this example).

     <SolidColorBrush Color="RosyBrown"/>

#75 – Sometimes You Must Use Property Element Syntax

In many cases, you can set a property value in XAML using a string value, even though the property being set is a more complex object.  (E.g. Setting Background property to new instance of SolidColorBrush just by indicating color of brush as a string).

But there are cases when the property that you want to set cannot be set using a simple string.  In these cases, you must use the property element syntax.

As an example, you can have a context menu pop up when a button is right-clicked by setting the button’s ContextMenu property.  A context menu can not be described using only a string value, so you must use property element syntax:

<Button Name="btnClick" Content="Click Me" Height="23" Width="75">
            <MenuItem Header="Open"/>
            <MenuItem Header="Save"/>

#74 – Property Element Syntax

The simplest way to set property values in XAML is by using attributes.

<Button Content="Click Me" Height="23" Width="75" Background="Red" />

Because the Button.Background property is of type Brush, the string “Red” is actually used to create a new instance of a SolidColorBrush (subtype of Brush), with its Color property set to an RGB value of FF,00,00 (entirely red).

You can also set a property value using property element syntax.  This syntax allows setting a property value using an embedded XAML element of the form TypeName.PropertyName.

You typically use property element syntax for property values that can’t be expressed as strings.

Using the property element syntax, we can set the button’s background to a red brush as follows:

<Button Name="btnClick" Content="Click Me" Height="23" Width="75" Click="Button_Click">
        <SolidColorBrush Color="Red"/>