Class DropDownListBase

Represent a base class which is used to create a list control like SfComboBox or SfAutoComplete. These controls are used to selected item(s) from the suggestions displayed in drop down.

Inheritance

System.Object

DropDownListBase

SfAutoComplete

SfComboBox

Namespace: Syncfusion.UI.Xaml.Editors

Assembly: Syncfusion.Editors.WinUI.dll

Syntax

public abstract class DropDownListBase : Control

Constructors

DropDownListBase()

Initializes a new instance of the DropDownListBase class.

Declaration

public DropDownListBase()

Fields

DescriptionProperty

Identifies Description dependency property.

Declaration

public static readonly DependencyProperty DescriptionProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

DisplayMemberPathProperty

Identifies DisplayMemberPath dependency property.

Declaration

public static readonly DependencyProperty DisplayMemberPathProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the DisplayMemberPath dependency property.

HeaderProperty

Identifies Header dependency property.

Declaration

public static readonly DependencyProperty HeaderProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

HeaderTemplateProperty

Identifies HeaderTemplate dependency property.

Declaration

public static readonly DependencyProperty HeaderTemplateProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

HighlightedTextFontSizeProperty

HighlightedTextFontSize property. This property can be used to set the font Size of the matching text in the drop-down.

Declaration

public static readonly DependencyProperty HighlightedTextFontSizeProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

HighlightedTextFontStyleProperty

HighlightedTextFontStyle property. This property can be used to set the font Style of the matching text in the drop-down.

Declaration

public static readonly DependencyProperty HighlightedTextFontStyleProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

HighlightedTextFontWeightProperty

HighlightedTextFontWeight property. This property can be used to set the font weight of the matching text in the drop-down.

Declaration

public static readonly DependencyProperty HighlightedTextFontWeightProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

HighlightedTextForegroundProperty

HighlightedTextForeground property. This property can be used to change the text color of the matching text in the drop-down.

Declaration

public static readonly DependencyProperty HighlightedTextForegroundProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

IsDropDownOpenProperty

Identifies IsDropDownOpen dependency property.

Declaration

public static readonly DependencyProperty IsDropDownOpenProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

ItemsSourceProperty

Identifies ItemsSource dependency property.

Declaration

public static readonly DependencyProperty ItemsSourceProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the ItemsSource dependency property.

ItemTemplateProperty

Identifies ItemTemplate dependency property.

Declaration

public static readonly DependencyProperty ItemTemplateProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the ItemTemplate dependency property.

ItemTemplateSelectorProperty

Identifies ItemTemplateSelector dependency property.

Declaration

public static readonly DependencyProperty ItemTemplateSelectorProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the ItemTemplateSelector dependency property.

LeadingViewProperty

Identifies LeadingView dependency property.

Declaration

public static readonly DependencyProperty LeadingViewProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the LeadingView dependency property.

MaxDropDownHeightProperty

Identifies MaxDropDownHeight dependency property.

Declaration

public static readonly DependencyProperty MaxDropDownHeightProperty

Field Value

Type
Microsoft.UI.Xaml.DependencyProperty

NoResultsFoundContentProperty

Identifies NoResultsFoundContent dependency property.

Declaration

public static readonly DependencyProperty NoResultsFoundContentProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the NoResultsFoundContent dependency property.

NoResultsFoundTemplateProperty

Identifies NoResultsFoundTemplate dependency property.

Declaration

public static readonly DependencyProperty NoResultsFoundTemplateProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the NoResultsFoundTemplate dependency property.

PlaceholderForegroundProperty

Identifies PlaceholderForeground dependency property.

Declaration

public static readonly DependencyProperty PlaceholderForegroundProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the PlaceholderForeground dependency property.

PlaceholderTextProperty

Identifies PlaceholderText dependency property.

Declaration

public static readonly DependencyProperty PlaceholderTextProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the PlaceholderText dependency property.

SelectedItemProperty

Identifies SelectedItem dependency property.

Declaration

public static readonly DependencyProperty SelectedItemProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the SelectedItem dependency property.

SelectedValuePathProperty

Identifies SelectedValuePath dependency property.

Declaration

public static readonly DependencyProperty SelectedValuePathProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the SelectedValuePath dependency property.

SelectedValueProperty

Identifies SelectedValue dependency property.

Declaration

public static readonly DependencyProperty SelectedValueProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the SelectedValue dependency property.

TextBoxStyleProperty

Identifies TextBoxStyle dependency property.

Declaration

public static readonly DependencyProperty TextBoxStyleProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the TextBoxStyle dependency property.

TextMemberPathProperty

Identifies TextMemberPath dependency property.

Declaration

public static readonly DependencyProperty TextMemberPathProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the TextMemberPath dependency property.

TextProperty

Identifies Text dependency property.

Declaration

public static readonly DependencyProperty TextProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the Text dependency property.

TokenItemStyleProperty

Identifies TokenItemStyle dependency property.

Declaration

public static readonly DependencyProperty TokenItemStyleProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the TokenItemStyle dependency property.

TokenItemStyleSelectorProperty

Identifies TokenItemStyleSelector dependency property.

Declaration

public static readonly DependencyProperty TokenItemStyleSelectorProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the TokenItemStyleSelector dependency property.

TokenItemTemplateProperty

Identifies TokenItemTemplate dependency property.

Declaration

public static readonly DependencyProperty TokenItemTemplateProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the TokenItemTemplate dependency property.

TokenItemTemplateSelectorProperty

Identifies TokenItemTemplateSelector dependency property.

Declaration

public static readonly DependencyProperty TokenItemTemplateSelectorProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the TokenItemTemplateSelector dependency property.

TrailingViewProperty

Identifies TrailingView dependency property.

Declaration

public static readonly DependencyProperty TrailingViewProperty

Field Value

Type	Description
Microsoft.UI.Xaml.DependencyProperty	The identifier for the TrailingView dependency property.

Properties

Description

Gets or sets content that is shown below the control. The content should provide guidance about the input expected by the control.

Declaration

public object Description { get; set; }

Property Value

Type	Description
System.Object	The default value is `null`.

Examples

Set string as description.

<!-- String description -->
<editor:SfComboBox Header="Font" Description="You can set the font used for this text." />
<!-- or -->
<editor:SfAutoComplete Header="Font" Description="You can set the font used for this text." />

Set a control as description.

<!-- TextBlock as description -->
<editor:SfComboBox>
    <editor:SfComboBox.Description>
        <TextBlock Text = "You can set the font used for this text." FontWeight="Bold"/>
    </editor:SfComboBox.Description>
</editor:SfComboBox>
<!-- or -->
<editor:SfAutoComplete>
    <editor:SfAutoComplete.Description>
        <TextBlock Text = "You can set the font used for this text." FontWeight="Bold"/>
    </editor:SfAutoComplete.Description>
</editor:SfAutoComplete>

DisplayMemberPath

Gets or sets the name or path of the property that is displayed for each data item in the drop down.

Declaration

public string DisplayMemberPath { get; set; }

Property Value

Type	Description
System.String	The default value is `string.Empty`.

Remarks

In non-editable mode, search will be performed using DisplayMemberPath when the popup is opened. If TextMemberPath is null or string.Empty, then searching and displaying the selected value in selection box area will be based on DisplayMemberPath. If both TextMemberPath and DisplayMemberPath properties are null or string.Empty, then searching and displaying the selected value will be based on value received from object.ToString.

GroupStyle

Gets a collection of GroupStyle objects that define the appearance of each level of groups.

Declaration

public IObservableVector<GroupStyle> GroupStyle { get; }

Property Value

Type	Description
Windows.Foundation.Collections.IObservableVector<Microsoft.UI.Xaml.Controls.GroupStyle>	A collection of `GroupStyle` objects that define the appearance of each level of groups.

Remarks

Filtering is not supported when ItemsSource is CollectionViewSource.

Header

Gets or sets the content for the control's header.

Declaration

public object Header { get; set; }

Property Value

Type	Description
System.Object	The default value is `null`.

Examples

Set string as Header.

<!-- String header -->
<editor:SfComboBox Header="Colors" />
<!-- or -->
<editor:SfAutoComplete Header="Colors" />

Set a control as Header.

<!-- TextBlock as header -->
<editor:SfComboBox>
    <editor:SfComboBox.Header>
        <TextBlock Text="Colors" FontWeight="Bold"/>
    </editor:SfComboBox.Header>
</editor:SfComboBox>
<!-- or -->
<editor:SfAutoComplete>
    <editor:SfAutoComplete.Header>
        <TextBlock Text="Colors" FontWeight="Bold"/>
    </editor:SfAutoComplete.Header>
</editor:SfAutoComplete>

HeaderTemplate

Gets or sets the DataTemplate used to display the content of the control's header.

Declaration

public DataTemplate HeaderTemplate { get; set; }

Property Value

Type	Description
Microsoft.UI.Xaml.DataTemplate	The default value is `null`.

Examples

The following example shows how to define a HeaderTemplate for the control's header.

<editors:SfComboBox Header="Colors">
    <editors:SfComboBox.HeaderTemplate>
        <DataTemplate>
            <TextBlock
                Text="{Binding}"
                Foreground="Red"
                FontWeight="Bold"/>
        </DataTemplate>
    </editors:SfComboBox.HeaderTemplate>
</editors:SfComboBox>
<!-- or -->
<editors:SfAutoComplete Header="Colors">
    <editors:SfAutoComplete.HeaderTemplate>
        <DataTemplate>
            <TextBlock
                Text="{Binding}"
                Foreground="Red"
                FontWeight="Bold"/>
        </DataTemplate>
    </editors:SfAutoComplete.HeaderTemplate>
</editors:SfAutoComplete>

HighlightedTextFontSize

Gets or sets the value of the HighlightedTextFontSize. This property can be used to change the font size of the matching text in the drop-down.

Declaration

public Nullable<double> HighlightedTextFontSize { get; set; }

Property Value

Type	Description
System.Nullable<System.Double>	The default value is `null`.

HighlightedTextFontStyle

Gets or sets the value of the HighlightedFontStyle. This property can be used to change the font style of the matching text in the drop-down.

Declaration

public Nullable<FontStyle> HighlightedTextFontStyle { get; set; }

Property Value

Type	Description
System.Nullable<Windows.UI.Text.FontStyle>	The default value is `null`.

HighlightedTextFontWeight

Gets or sets the value of the HighlightedFontWeight. This property can be used to change the font weight of the matching text in the drop-down.

Declaration

public FontWeight HighlightedTextFontWeight { get; set; }

Property Value

Type	Description
Windows.UI.Text.FontWeight	The default value is `Bold`.

HighlightedTextForeground

Gets or sets the value of the HighlightedTextForeground. This property can be used to change the text color of matching text in the drop-down.

Declaration

public Brush HighlightedTextForeground { get; set; }

Property Value

Type	Description
Microsoft.UI.Xaml.Media.Brush	The default value is `null`.

IsDropDownOpen

Gets or sets a value indicating whether the drop down is open or close.

Declaration

public bool IsDropDownOpen { get; set; }

Property Value

Type	Description
System.Boolean	The default value is false.

ItemsSource

Gets or sets an object source used to generate the content of the control.

Declaration

public object ItemsSource { get; set; }

Property Value

Type	Description
System.Object	The default value is `null`.

Examples

The following example shows how to define a ItemsSource in control.

XAML
C#

<Grid>
    <Grid.DataContext>
        <local:ComboBoxViewModel/>
    </Grid.DataContext>
    <editors:SfComboBox
        ItemsSource="{Binding Countries}"
        TextMemberPath="Name"
        DisplayMemberPath="Name"/>
<!-- or -->
    <editors:SfAutoComplete
        ItemsSource="{Binding Countries}"
        TextMemberPath="Name"
        DisplayMemberPath="Name"/>
</Grid>

public class Country
{
    public string Name { get; set; }
    public string Continent { get; set; }
    public int ID { get; set; }
}

public class ComboBoxViewModel
{
    public ObservableCollection<Country> Countries { get; set; }
    public ComboBoxViewModel()
    {
        Countries = new ObservableCollection<Country>();
        Countries.Add(new Country() { Name = "United States", ID = 0, Continent = "America" });
        Countries.Add(new Country() { Name = "Afghanistan", ID = 1, Continent = "Asia" });
        Countries.Add(new Country() { Name = "Albania", ID = 2, Continent = "Europe" });
    }
}

ItemTemplate

Gets or sets the DataTemplate used to display each item in drop down.

Declaration

public DataTemplate ItemTemplate { get; set; }

Property Value

Type	Description
Microsoft.UI.Xaml.DataTemplate	The default value is `null`.

Examples

The following example shows how to define a ItemTemplate for the control's items.

<editors:SfComboBox
    ItemsSource="{Binding Countries}"
    TextMemberPath="Name">
    <editors:SfComboBox.ItemTemplate>
        <DataTemplate>
            <TextBlock
                Text="{Binding Name}"
                Foreground="Red"
                FontWeight="Bold"/>
        </DataTemplate>
    </editors:SfComboBox.ItemTemplate>
</editors:SfComboBox>
<!-- or -->
<editors:SfAutoComplete
    ItemsSource="{Binding Countries}"
    TextMemberPath="Name">
    <editors:SfAutoComplete.ItemTemplate>
        <DataTemplate>
            <TextBlock
                Text="{Binding Name}"
                Foreground="Red"
                FontWeight="Bold"/>
        </DataTemplate>
    </editors:SfAutoComplete.ItemTemplate>
</editors:SfAutoComplete>

ItemTemplateSelector

Gets or sets a reference to a custom DataTemplateSelector logic class. The DataTemplateSelector referenced by this property returns a template to apply to items.

Declaration

public DataTemplateSelector ItemTemplateSelector { get; set; }

Property Value

Type	Description
Microsoft.UI.Xaml.Controls.DataTemplateSelector	A reference to a custom `DataTemplateSelector` logic class.

Examples

The following example shows how to define a ItemTemplateSelector for the control.

XAML
C#

<Application.Resources>
    <DataTemplate x:Name="ItemTemplate1">
        <Grid Background="Green">
            <TextBlock Foreground="Yellow" Text="{Binding Name}" />
        </Grid>
    </DataTemplate>
    <DataTemplate x:Name="ItemTemplate2">
        <Grid Background="Red">
            <TextBlock Foreground="Green" Text="{Binding Name}" />
        </Grid>
    </DataTemplate>
</Application.Resources>

<Grid>
    <Grid.Resources>
        <local:CountryTemplateSelector x:Key="countryTemplateSelector" />
    </Grid.Resources>

    <editors:SfComboBox
        ItemsSource="{Binding Countries}"
        ItemTemplateSelector="{StaticResource countryTemplateSelector}" />
<!-- or -->
    <editors:SfAutoComplete
        ItemsSource="{Binding Countries}"
        ItemTemplateSelector="{StaticResource countryTemplateSelector}" />
</Grid>

public class CountryTemplateSelector : DataTemplateSelector
{
    protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
    {
        if (item != null && item is Country)
        {
            Country country = item as Country;
            if (country.ID is int)
            {
                if (country.ID % 2 == 0)
                    return Application.Current.Resources["ItemTemplate1"] as DataTemplate;
                else
                    return Application.Current.Resources["ItemTemplate2"] as DataTemplate;
            }
        }

        return base.SelectTemplateCore(item, container);
    }
}

LeadingView

Gets or sets the leading view for the control which holds any content like icon, image, or any other controls. It gets displayed before the selection area.

Declaration

public object LeadingView { get; set; }

Property Value

Type	Description
System.Object	The default value is `null`.

MaxDropDownHeight

Gets or sets the maximum height for a drop-down.

Declaration

public double MaxDropDownHeight { get; set; }

Property Value

Type	Description
System.Double	The default value is Auto.

multiSelectionSuggestionTextBlock

Gets or sets the suggested item in the Textblock portion of the control when the textChanging

Declaration

public TextBlock multiSelectionSuggestionTextBlock { get; set; }

Property Value

Type
Microsoft.UI.Xaml.Controls.TextBlock

NoResultsFoundContent

Gets or sets the text displayed when no results are found.

Declaration

public object NoResultsFoundContent { get; set; }

Property Value

Type	Description
System.Object	The text to display when no results are found. The default is value is ‘No Results Found’.

Examples

The following example shows how to define a NoResultsFoundContent for the control.

<editor:SfAutoComplete 
            TextMemberPath ="CityName"
            DisplayMemberPath="CityName"
            ItemsSource="{Binding Cities}"
            NoResultsFoundContent="Not Found" />
<editor:SfComboBox 
            TextMemberPath ="CityName"
            DisplayMemberPath="CityName"
            ItemsSource="{Binding Cities}"
            IsFilteringEnabled="True" 
            IsEditable="True"
            NoResultsFoundContent="Not Found" />

NoResultsFoundTemplate

Gets or sets the DataTemplate used to display in the dropdown when no results are found in the search.

Declaration

public DataTemplate NoResultsFoundTemplate { get; set; }

Property Value

Type	Description
Microsoft.UI.Xaml.DataTemplate	The template that specifies the visualization of the dropdown when no results are found in the search. The default value is null.

Remarks

The NoResultsFoundContent value is the data context of this DataTemplate.

Examples

The following example shows how to define a NoResultsFoundTemplate for the control.

<editors:SfAutoComplete 
              TextMemberPath ="CityName" 
              DisplayMemberPath="CityName"
              ItemsSource="{Binding Cities}"
              NoResultsFoundContent="Not Found">
   <editors:SfAutoComplete.NoResultsFoundTemplate>
        <DataTemplate>
            <TextBlock 
               Text ="{Binding}"
               Foreground="Red"
               FontStyle="Italic"
               FontSize="20" />
        </DataTemplate> 
   </editors:SfAutoComplete.NoResultsFoundTemplate>
</editors:SfAutoComplete>
<editors:SfComboBox 
              TextMemberPath ="CityName" 
              DisplayMemberPath="CityName"
              ItemsSource="{Binding Cities}"
              IsFilteringEnabled="True" 
              IsEditable="True"
              NoResultsFoundContent="Not Found">
   <editors:SfComboBox.NoResultsFoundTemplate>
        <DataTemplate>
            <TextBlock 
               Text ="{Binding}"
               Foreground="Red"
               FontStyle="Italic"
               FontSize="20" />
        </DataTemplate> 
   </editors:SfComboBox.NoResultsFoundTemplate>
</editors:SfComboBox>

PlaceholderForeground

Gets or sets a brush that describes the color of placeholder text.

Declaration

public Brush PlaceholderForeground { get; set; }

Property Value

Type	Description
Microsoft.UI.Xaml.Media.Brush	The default value is `null`.

PlaceholderText

Gets or sets the text that is displayed in the control until the value is changed by a user action or some other operation.

Declaration

public string PlaceholderText { get; set; }

Property Value

Type	Description
System.String	The default value is `string.Empty`.

SelectedItem

Gets or sets the selected item.

Declaration

public object SelectedItem { get; set; }

Property Value

Type	Description
System.Object	The default value is `null`.

Remarks

Editor will show PlaceHolderText when no item is selected. This property does not have effect in multiple selection mode.

SelectedItems

Gets the list of currently selected items in the control.

Declaration

public IList<object> SelectedItems { get; }

Property Value

Type	Description
System.Collections.Generic.IList<System.Object>	The default value is empty collection.

Remarks

Add or remove the items in SelectedItems. This property does not have effect in single selection mode.

SelectedValue

Gets or sets the value of the SelectedItem obtained using SelectedValuePath.

Declaration

public object SelectedValue { get; set; }

Property Value

Type	Description
System.Object	The default value is `null`.

Remarks

The value of the selected item. This property does not have effect in multiple selection mode.

SelectedValuePath

Gets or sets the property path that is used to get the SelectedValue property of the SelectedItem property.

Declaration

public string SelectedValuePath { get; set; }

Property Value

Type	Description
System.String	The default value is `string.Empty`.

Remarks

If SelectedValuePath is null, SelectedValue will be received from object.ToString. This property does not have effect in multiple selection mode.

singleSelectionSuggestionTextBlock

Gets or sets the suggested item in the Textblock portion of the control when the textChanging

Declaration

public TextBlock singleSelectionSuggestionTextBlock { get; set; }

Property Value

Type
Microsoft.UI.Xaml.Controls.TextBlock

Text

Gets or sets the text that is used to display in the text box portion of the control.

Declaration

public string Text { get; set; }

Property Value

Type	Description
System.String	The default value is `string.Empty`.

Remarks

This property does not have effect in non-editable mode.

TextBoxStyle

Gets or sets the style of the TextBox in the control when the control is editable.

Declaration

public Style TextBoxStyle { get; set; }

Property Value

Type	Description
Microsoft.UI.Xaml.Style	The style of the TextBox in the control when the control is editable.

Examples

The following example shows how to define a TextBoxStyle for the control.

<editors:SfComboBox>
    <editors:SfComboBox.TextBoxStyle>
        <Style TargetType="TextBox">
            <Style.Setters>
                <Setter Property="SelectionHighlightColor" Value="Green"/>
            </Style.Setters>
        </Style>
    </editors:SfComboBox.TextBoxStyle>
</editors:SfComboBox>
<!-- or -->
 <editors:SfAutoComplete>
    <editors:SfAutoComplete.TextBoxStyle>
        <Style TargetType="TextBox">
            <Style.Setters>
                <Setter Property="SelectionHighlightColor" Value="Green"/>
            </Style.Setters>
        </Style>
    </editors:SfAutoComplete.TextBoxStyle>
</editors:SfAutoComplete>

TextMemberPath

Gets or sets the property path that is used to display the selected value in the text box portion or non-editable display area.

Declaration

public string TextMemberPath { get; set; }

Property Value

Type	Description
System.String	The default value is `string.Empty`.

Remarks

In editable mode, search will be performed using TextMemberPath. In non-editable mode, search will be performed using TextMemberPath when the popup is not opened. In non-editable mode, search will be performed using DisplayMemberPath when the popup is opened. If TextMemberPath is null or string.Empty, then searching and displaying the selected value in selection box area will be based on DisplayMemberPath. If both TextMemberPath and DisplayMemberPath properties are null or string.Empty, then searching and displaying the selected value will be based on value received from object.ToString.

TokenItemStyle

Gets or sets the Microsoft.UI.Xaml.Style that is applied to the generated item in token container.

Declaration

public Style TokenItemStyle { get; set; }

Property Value

Type	Description
Microsoft.UI.Xaml.Style	The default value is `null`.

Examples

The following example shows how to define a ItemContainerStyle for the token container items.

<editors:SfComboBox SelectionMode="Multiple"
                    MultiSelectionDisplayMode="Token"
                    ItemsSource="{Binding Countries}"
                    TextMemberPath="Name"
                    DisplayMemberPath="Name">
     <editors:SfComboBox.TokenItemStyle>
            <Style TargetType = "editors:ComboBoxTokenItem" >
                 <Setter Property="Foreground" Value="Red"/>
                 <Setter Property = "Background" Value="LightCyan"/>
            </Style>
     </editors:SfComboBox.TokenItemStyle>
</editors:SfComboBox>
<!-- or -->
<editors:SfAutoComplete SelectionMode="Multiple"
                        ItemsSource="{Binding Countries}"
                        TextMemberPath="Name"
                        DisplayMemberPath="Name">
       <editors:SfAutoComplete.TokenItemStyle>
              <Style TargetType = "editors:AutoCompleteTokenItem" >
                   <Setter Property="Foreground" Value="Red"/>
                   <Setter Property = "Background" Value="LightCyan"/>
              </Style>
       </editors:SfAutoComplete.TokenItemStyle>
</editors:SfAutoComplete>

TokenItemStyleSelector

Gets or sets a reference to a custom Microsoft.UI.Xaml.Controls.StyleSelector logic class. The StyleSelector returns different Style values to use for the item container based on characteristics of the object being displayed.

Declaration

public StyleSelector TokenItemStyleSelector { get; set; }

Property Value

Type	Description
Microsoft.UI.Xaml.Controls.StyleSelector	A custom `StyleSelector`logic class.

Examples

The following example shows how to define a ItemContainerStyleSelector for the TokenContainer.

XAML
C#

<Application.Resources>
    <Style x:Key="CountryStyle1" TargetType="editors:ComboBoxTokenItem">
        <Setter Property="Foreground" Value="Blue"/>
        <Setter Property="Background" Value="LightCyan"/>
        <Setter Property="Content" Value="{Binding}"/>
    </Style>
    <Style x:Key="CountryStyle2" TargetType="editors:ComboBoxTokenItem">
        <Setter Property="Foreground" Value="Red"/>
        <Setter Property="Background" Value="LightCyan"/>
        <Setter Property="Content" Value="{Binding}"/>
    </Style>
<!-- or -->
    <Style x:Key="CountryStyle1" TargetType="editors:AutoCompleteTokenItem">
        <Setter Property="Foreground" Value="Blue"/>
        <Setter Property="Background" Value="LightCyan"/>
        <Setter Property="Content" Value="{Binding}"/>
    </Style>
    <Style x:Key="CountryStyle2" TargetType="editors:AutoCompleteTokenItem">
        <Setter Property="Foreground" Value="Red"/>
        <Setter Property="Background" Value="LightCyan"/>
        <Setter Property="Content" Value="{Binding}"/>
    </Style>
</Application.Resources>

<Grid>
    <Grid.Resources>
        <local:CountryStyleSelector x:Key="countryStyleSelector" />
    </Grid.Resources>

    <editors:SfComboBox SelectionMode="Multiple"
                        MultiSelectionDisplayMode="Token"
                        TextMemberPath="Name"
                        DisplayMemberPath="Name"
                        ItemsSource="{Binding Countries}"
                        TokenItemStyleSelector="{StaticResource countryStyleSelector}"/>
<!-- or -->
    <editors:SfAutoComplete SelectionMode="Multiple"
                            TextMemberPath="Name"
                            DisplayMemberPath="Name"
                            ItemsSource="{Binding Countries}"
                            TokenItemStyleSelector="{StaticResource countryStyleSelector}"/>
</Grid>

public class CountryStyleSelector : StyleSelector
{
    protected override Style SelectStyleCore(object item, DependencyObject container)
    {
        if (item != null && item is Country)
        {
            Country country = item as Country;
            if (country.ID is int)
            {
                if (country.ID % 2 == 0)
                    return Application.Current.Resources["CountryStyle1"] as Style;
                else
                    return Application.Current.Resources["CountryStyle2"] as Style;
            }
        }

        return base.SelectStyleCore(item, container);
    }
}

TokenItemTemplate

Gets or sets the DataTemplate used to display each item in token container.

Declaration

public DataTemplate TokenItemTemplate { get; set; }

Property Value

Type	Description
Microsoft.UI.Xaml.DataTemplate	The default value is `null`.

Examples

The following example shows how to define a ItemTemplate for the token container items.

<editors:SfComboBox
    SelectionMode="Multiple"
    MultiSelectionDisplayMode="Token"
    ItemsSource="{Binding Countries}"
    DisplayMemberPath="Name">
    <editors:SfComboBox.TokenItemTemplate>
        <DataTemplate>
            <TextBlock
                Text="{Binding Name}"
                Foreground="Red"
                FontWeight="Bold"/>
        </DataTemplate>
    </editors:SfComboBox.TokenItemTemplate>
</editors:SfComboBox>
<!-- or -->
<editors:SfAutoComplete
    SelectionMode="Multiple"
    ItemsSource="{Binding Countries}"
    DisplayMemberPath="Name">
    <editors:SfAutoComplete.TokenItemTemplate>
        <DataTemplate>
            <TextBlock
                Text="{Binding Name}"
                Foreground="Red"
                FontWeight="Bold"/>
        </DataTemplate>
    </editors:SfAutoComplete.TokenItemTemplate>
</editors:SfAutoComplete>

TokenItemTemplateSelector

Gets or sets a reference to a custom DataTemplateSelector logic class. The DataTemplateSelector referenced by this property returns a template to apply to items.

Declaration

public DataTemplateSelector TokenItemTemplateSelector { get; set; }

Property Value

Type	Description
Microsoft.UI.Xaml.Controls.DataTemplateSelector	A reference to a custom `DataTemplateSelector` logic class.

Examples

The following example shows how to define a ItemTemplateSelector for the TokenContainer.

XAML
C#

<Application.Resources>
    <DataTemplate x:Name="ItemTemplate1">
        <Grid Background="Green">
            <TextBlock Foreground="Yellow" Text="{Binding Name}" />
        </Grid>
    </DataTemplate>
    <DataTemplate x:Name="ItemTemplate2">
        <Grid Background="Red">
            <TextBlock Foreground="Green" Text="{Binding Name}" />
        </Grid>
    </DataTemplate>
</Application.Resources>

<Grid>
    <Grid.Resources>
        <local:CountryTemplateSelector x:Key="countryTemplateSelector" />
    </Grid.Resources>

    <editors:SfComboBox SelectionMode="Multiple"
                        MultiSelectionDisplayMode="Token"
                        ItemsSource="{Binding Countries}"
                        DisplayMemberPath="Name"
                        TokenItemTemplateSelector="{StaticResource countryTemplateSelector}" />
<!-- or -->
    <editors:SfAutoComplete SelectionMode="Multiple"
                            ItemsSource="{Binding Countries}"
                            DisplayMemberPath="Name"
                            TokenItemTemplateSelector="{StaticResource countryTemplateSelector}" />
</Grid>

public class CountryTemplateSelector : DataTemplateSelector
{
    protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
    {
        if (item != null && item is Country)
        {
            Country country = item as Country;
            if (country.ID is int)
            {
                if (country.ID % 2 == 0)
                    return Application.Current.Resources["ItemTemplate1"] as DataTemplate;
                else
                    return Application.Current.Resources["ItemTemplate2"] as DataTemplate;
            }
        }

        return base.SelectTemplateCore(item, container);
    }
}

TrailingView

Gets or sets the trailing view for the control which holds any content like icon, image, or any other controls. It gets displayed after the selection area.

Declaration

public object TrailingView { get; set; }

Property Value

Type	Description
System.Object	The default value is `null`.

Methods

Dispose()

Dispose the Control from the memory.

Declaration

public virtual void Dispose()

OnApplyTemplate()

Declaration

protected override void OnApplyTemplate()

OnGotFocus(RoutedEventArgs)

Declaration

protected override void OnGotFocus(RoutedEventArgs e)

Parameters

Type	Name	Description
Microsoft.UI.Xaml.RoutedEventArgs	e

OnKeyUp(KeyRoutedEventArgs)

Declaration

protected override void OnKeyUp(KeyRoutedEventArgs e)

Parameters

Type	Name	Description
Microsoft.UI.Xaml.Input.KeyRoutedEventArgs	e

OnLostFocus(RoutedEventArgs)

Declaration

protected override void OnLostFocus(RoutedEventArgs e)

Parameters

Type	Name	Description
Microsoft.UI.Xaml.RoutedEventArgs	e

OnPointerEntered(PointerRoutedEventArgs)

Declaration

protected override void OnPointerEntered(PointerRoutedEventArgs e)

Parameters

Type	Name	Description
Microsoft.UI.Xaml.Input.PointerRoutedEventArgs	e

OnPointerExited(PointerRoutedEventArgs)

Declaration

protected override void OnPointerExited(PointerRoutedEventArgs e)

Parameters

Type	Name	Description
Microsoft.UI.Xaml.Input.PointerRoutedEventArgs	e