AutoCompleteBox.ItemTemplate Property

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

Gets or sets the DataTemplate used to display each item in the drop-down portion of the control.

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

Syntax

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

XAML Values

  • singleDataTemplate
    A single DataTemplate object element. The single DataTemplate typically has multiple child elements that define the visual appearance of the data to display.

  • 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 DataTemplate used to display each item in the drop-down. The default is nulla null reference (Nothing in Visual Basic).

Remarks

You use the ItemTemplate property to specify the visualization of the data objects in the drop-down portion of the AutoCompleteBox control. If the AutoCompleteBox is bound to a collection and you do not provide specific display instructions by using a DataTemplate, the resulting UI of each item is a string representation of each object in the underlying collection. You would typically use a data template when specifying a ValueMemberBinding or ValueMemberPath to populate the drop-down.

Examples

The following example shows how to set the ItemTemplate property to a data template when specifying the ValueMemberBinding property. There is a value converter associated with the binding that formats the date in a custom format. In addition, the SelectionChanged event is handled, and the details of the selected item are shown in two text block controls. This code example requires a reference to the System.Windows.Controls.Input assembly.

Run this sample

Imports System.Windows.Data

Partial Public Class MainPage
    Inherits UserControl
    Private MyMusic As New List(Of Recording)()
    Public Sub New()
        InitializeComponent()

        ' Add items to the collection. 
        MyMusic.Add(New Recording("Chris Sells", "Chris Sells Live", New DateTime(2008, 3, 5)))
        MyMusic.Add(New Recording("Chris Sells", "Chris Sells", New DateTime(2004, 4, 6)))
        MyMusic.Add(New Recording("Luka Abrus", "The Road to Redmond", New DateTime(2007, 8, 3)))
        MyMusic.Add(New Recording("Luka Abrus", "Luka", New DateTime(2005, 12, 8)))
        MyMusic.Add(New Recording("Jim Hance", "The Best of Jim Hance", New DateTime(2007, 2, 6)))

        ' Set the data context for the AutoCompleteBox. 
        myACB.DataContext = MyMusic
        AddHandler myACB.SelectionChanged, AddressOf myACB_SelectionChanged
    End Sub

    ' Handle the SelectionChanged event-setting the data context for the stack panel 
    ' that contains the details to the selected item. 
    Private Sub myACB_SelectionChanged(ByVal sender As Object, ByVal e As SelectionChangedEventArgs)
        RecordingDetails.DataContext = e.AddedItems(0)
        Dim acb As AutoCompleteBox = TryCast(sender, AutoCompleteBox)
    End Sub
End Class

    ' Simple business object. 
    Public Class Recording
        Public Sub New()
        End Sub
        Public Sub New(ByVal artistName As String, ByVal cdName As String, ByVal release As DateTime)
            Artist = artistName
            Name = cdName
            ReleaseDate = release
        End Sub
        Private _Artist As String
        Public Property Artist() As String
            Get
                Return _Artist
            End Get
            Set(ByVal value As String)
                _Artist = value
            End Set
        End Property
        Private _Name As String
        Public Property Name() As String
            Get
                Return _Name
            End Get
            Set(ByVal value As String)
                _Name = value
            End Set
        End Property
        Private _ReleaseDate As DateTime
        Public Property ReleaseDate() As DateTime
            Get
                Return _ReleaseDate
            End Get
            Set(ByVal value As DateTime)
                _ReleaseDate = value
            End Set
        End Property
    End Class

    Public Class ObjectFormatter
        Implements IValueConverter
        ' This converts the object to the string to display. 
    Public Function Convert(ByVal value As Object, ByVal targetType As Type, _
                            ByVal parameter As Object, _
                            ByVal culture As System.Globalization.CultureInfo) As Object _
                            Implements IValueConverter.Convert

        ' Retrieve the format string and use it to format the value. 
        Dim formatString As String = TryCast(parameter, String)
        If Not String.IsNullOrEmpty(formatString) Then
            Return String.Format(culture, formatString, value)
        End If

        ' If the format string is null or empty, simply call ToString() 
        ' on the value. 
        Return value.ToString()
    End Function

        ' No need to implement converting back on a one-way binding 
    Public Function ConvertBack(ByVal value As Object, ByVal targetType As Type, _
                                ByVal parameter As Object, _
                                ByVal culture As System.Globalization.CultureInfo) As Object _
                                Implements IValueConverter.ConvertBack
        Throw New NotImplementedException()
    End Function
    End Class

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Data;
using System.Collections;

namespace ACBValueMemberBinding
{

    public partial class MainPage : UserControl
    {
        List<Recording> MyMusic = new List<Recording>();
        public MainPage()
        {
            InitializeComponent();

            // Add items to the collection.
            MyMusic.Add(new Recording("Chris Sells", "Chris Sells Live",
                new DateTime(2008, 3, 5)));
            MyMusic.Add(new Recording("Chris Sells", "Chris Sells",
               new DateTime(2004, 4, 6)));
            MyMusic.Add(new Recording("Luka Abrus",
                "The Road to Redmond", new DateTime(2007, 8, 3)));
            MyMusic.Add(new Recording("Luka Abrus",
                "Luka", new DateTime(2005, 12, 8)));
            MyMusic.Add(new Recording("Jim Hance",
                "The Best of Jim Hance", new DateTime(2007, 2, 6)));

            // Set the data context for the AutoCompleteBox.
            myACB.DataContext = MyMusic;
            myACB.SelectionChanged += new SelectionChangedEventHandler(myACB_SelectionChanged);
        }

        // Handle the SelectionChanged event-setting the data context for the stack panel
        // that contains the details to the selected item.
        void myACB_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
        if (e.AddedItems.Count > 0) 
                RecordingDetails.DataContext = e.AddedItems[0];

        }
    }

    // Simple business object.
    public class Recording
    {
        public Recording() { }
        public Recording(string artistName, string cdName, DateTime release)
        {
            Artist = artistName;
            Name = cdName;
            ReleaseDate = release;
        }
        public string Artist { get; set; }
        public string Name { get; set; }
        public DateTime ReleaseDate { get; set; }
    }

    public class ObjectFormatter : IValueConverter
    {
        // This converts the object to the string to display.
        public object Convert(object value, Type targetType, object parameter,
            System.Globalization.CultureInfo culture)
        {
            // Retrieve the format string and use it to format the value.
            string formatString = parameter as string;
            if (!string.IsNullOrEmpty(formatString))
            {
                return string.Format(culture, formatString, value);
            }

            // If the format string is null or empty, simply call ToString()
            // on the value.
            return value.ToString();
        }

        // No need to implement converting back on a one-way binding 
        public object ConvertBack(object value, Type targetType,
            object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}
<!-- NOTE: 
  By convention, the sdk prefix indicates a URI-based XAML namespace declaration 
  for Silverlight SDK client libraries. This namespace declaration is valid for 
  Silverlight 4 only. In Silverlight 3, you must use individual XAML namespace 
  declarations for each CLR assembly and namespace combination outside the scope 
  of the default Silverlight XAML namespace. For more information, see the help 
  topic "Prefixes and Mappings for Silverlight Libraries". 
-->
<UserControl xmlns:sdk="https://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" x:Class="ACBValueMemberBinding.MainPage" 
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="clr-namespace:ACBValueMemberBinding"
    Width="400" Height="413">
    <StackPanel x:Name="LayoutRoot" Background="White" >
    <StackPanel Orientation="Horizontal">
        <StackPanel.Resources>
        <local:ObjectFormatter x:Key="FormatConverter" />
        </StackPanel.Resources>
        <TextBlock Margin="5" Text="Enter a date:" TextWrapping="Wrap" />
            <sdk:AutoCompleteBox VerticalAlignment="Top" Margin="5" Width="170" Height="30" x:Name="myACB" 
                ItemsSource="{Binding}" 
                ValueMemberBinding="{Binding Path=ReleaseDate, Converter={StaticResource FormatConverter}, 
                ConverterParameter=\{0:d\}}" >
            <sdk:AutoCompleteBox.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Path=ReleaseDate, Converter={StaticResource FormatConverter}, 
                    ConverterParameter=\{0:d\}}" />
                </DataTemplate>
            </sdk:AutoCompleteBox.ItemTemplate>
        </sdk:AutoCompleteBox>
    </StackPanel>
        <Rectangle Fill="DarkGray" Margin="5" Height="5" />
        <StackPanel x:Name="RecordingDetails" Margin="5" Background="Beige">
            <TextBlock FontWeight="Bold" Text="{Binding Path=Artist}" x:Name="artistTextBox" />
            <TextBlock FontStyle="Italic" Text="{Binding Path=Name}" />
        </StackPanel>
    </StackPanel>
</UserControl>

Version Information

Silverlight

Supported in: 5, 4, 3

Platforms

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