Partilhar via


ItemsControl.ItemTemplate Property

Microsoft Silverlight will reach end of support after October 2021. Learn more.

Gets or sets the DataTemplate used to display each item.

Namespace:  System.Windows.Controls
Assembly:  System.Windows (in System.Windows.dll)

Syntax

'Declaration
Public Property ItemTemplate As DataTemplate
public DataTemplate ItemTemplate { get; set; }
<itemsControl>
  <itemsControl.ItemTemplate>
    singleDataTemplate
  </itemsControl.ItemTemplate>
</itemsControl>
<itemsControl ItemTemplate="resourceReferenceToDataTemplate"/>

XAML Values

  • singleDataTemplate
    A single DataTemplate object element. That DataTemplate would typically have multiple child elements that define the visual appearance of the data representation.

  • resourceReferenceToDataTemplate
    A resource reference to an existing DataTemplate from a resources collection. The resource reference must specify the desired DataTemplate by key.

Property Value

Type: System.Windows.DataTemplate
The template that specifies the visualization of the data objects. The default is nulla null reference (Nothing in Visual Basic).

Remarks

Dependency property identifier field: ItemTemplateProperty

You use the ItemTemplate property to specify the visual representation of your data. ItemTemplate is particularly useful when you bind the ItemsSource to data. You use a DataTemplate to define the appearance of your data objects. The content of your DataTemplate becomes the visual structure of your data objects. If you do not set the ItemTemplate, the ItemsControl displays the string representation of the objects in a collection.

Examples

The following example uses a DataTemplate to display the items of a ListBox, which inherits from ItemsControl. In this example, the ListBox is bound to a collection of Customer objects. The DataTemplate contains TextBlock controls that bind to the FirstName, LastName, and Address properties. For more information about data binding, see Data Binding.

<Grid>
    <Grid.Resources>
        <src:Customers x:Key="customers"/>
    </Grid.Resources>

    <ListBox ItemsSource="{StaticResource customers}" Width="350" Margin="0,5,0,10">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Padding="5,0,5,0"
          Text="{Binding FirstName}" />
                    <TextBlock Text="{Binding LastName}" />
                    <TextBlock Text=", " />
                    <TextBlock Text="{Binding Address}" />
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</Grid>

The following example shows the Customer class and the collection that the ListBox is bound to.

Public Class Customer
    Private _firstName As String
    Private _lastName As String
    Private _address As String

    Public Property FirstName() As String
        Get
            Return _firstName
        End Get

        Set(ByVal value As String)
            _firstName = value
        End Set
    End Property

    Public Property LastName() As String
        Get
            Return _lastName
        End Get

        Set(ByVal value As String)
            _lastName = value
        End Set
    End Property

    Public Property Address() As String
        Get
            Return _address
        End Get

        Set(ByVal value As String)
            _address = value
        End Set
    End Property

    Public Sub New(ByVal firstName As String, ByVal lastName As String, ByVal address As String)
        Me.FirstName = firstName
        Me.LastName = lastName
        Me.Address = address
    End Sub

End Class

Public Class Customers
    Inherits ObservableCollection(Of Customer)

    Public Sub New()
        Add(New Customer("Michael", "Anderberg", "12 North Third Street, Apartment 45"))
        Add(New Customer("Chris", "Ashton", "34 West Fifth Street, Apartment 67"))
        Add(New Customer("Cassie", "Hicks", "56 East Seventh Street, Apartment 89"))
        Add(New Customer("Guido", "Pica", "78 South Ninth Street, Apartment 10"))
    End Sub

End Class
public class Customer
{
    public String FirstName { get; set; }
    public String LastName { get; set; }
    public String Address { get; set; }

    public Customer(String firstName, String lastName, String address)
    {
        this.FirstName = firstName;
        this.LastName = lastName;
        this.Address = address;
    }

}

public class Customers : ObservableCollection<Customer>
{
    public Customers()
    {
        Add(new Customer("Michael", "Anderberg",
                "12 North Third Street, Apartment 45"));
        Add(new Customer("Chris", "Ashton",
                "34 West Fifth Street, Apartment 67"));
        Add(new Customer("Cassie", "Hicks",
                "56 East Seventh Street, Apartment 89"));
        Add(new Customer("Guido", "Pica",
                "78 South Ninth Street, Apartment 10"));
    }

}

Version Information

Silverlight

Supported in: 5, 4, 3

Silverlight for Windows Phone

Supported in: Windows Phone OS 7.1, Windows Phone OS 7.0

Platforms

For a list of the operating systems and browsers that are supported by Silverlight, see Supported Operating Systems and Browsers.