![CustomFiltering 1.png](images/CustomFiltering_1.png)
このトピックは、 xamComboEditor コントロールに項目フィルターを設定する方法を説明します。
このトピックを理解するためには、以下のトピックを理解しておく必要があります。
以下の表は、 xamComboEditor のフィルタリング機能で構成できる要素を簡単に説明し、構成するプロパティにマップします。詳細は、表の後に記載されています。
xamComboEditor は、ユーザーがテキスト フィールドに入力を開始するときに、コントロールのドロップダウンの項目をフィルターします。データ項目は xamComboEditor に指定したフィルターに基づいてフィルターされます。
この機能はデフォルトで有効です。フィルタリングは xamComboEditor の DisplayMemberPath プロパティによって実行し、比較演算子は StartsWith です。
以下の表は、任意の構成とそれを管理するプロパティ設定のマップを示します。
xamComboEditor コントロールは、項目フィルタリングをカスタマイズする機能を提供します。
これは xamComboEditor の ItemFilters プロパティを使用して行います。カスタム項目フィルタリングを提供するには、 ComboItemFilter オブジェクトの ObservableCollection
をこのプロパティに設定します。
注:
注:
以下の表は、任意の構成とそれを管理するプロパティ設定のマップを示します。
以下のスクリーンショットは、次のコードにより、 xamComboEditor のフィルターリングを紹介します。
xamComboEditor のテキスト入力フィールドに「s」を入力します:
xamComboEditor のテキスト入力フィールドに「100」を入力します:
以下のコードはこの例を実装します。
XAML の場合:
<ig:XamComboEditor x:Name="ComboEditor"
ItemsSource="{Binding Path=Products}"
Height="30" Width="250"
AutoComplete="False">
<ig:XamComboEditor.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding ProductName}" Grid.Column="1" Margin="5" />
<TextBlock Text="{Binding UnitsInStock}" Margin="5" />
</Grid>
</DataTemplate>
</ig:XamComboEditor.ItemTemplate>
<!-- カスタム フィルターを追加します -->
<ig:XamComboEditor.ItemFilters>
<!-- データ モデルの ProductName プロパティのフィルターを作成します -->
<ig:ComboItemFilter FieldName="ProductName" LogicalOperator="And">
<ig:ComboItemFilter.Conditions>
<ig:ComparisonCondition Operator="Contains" />
<ig:ComparisonCondition Operator="StartsWith"/>
</ig:ComboItemFilter.Conditions>
</ig:ComboItemFilter>
<!-- データ モデルの UnitsInStock プロパティのフィルターを作成します -->
<ig:ComboItemFilter FieldName="UnitsInStock">
<ig:ComboItemFilter.Conditions>
<ig:ComparisonCondition Operator="GreaterThan"/>
</ig:ComboItemFilter.Conditions>
</ig:ComboItemFilter>
</ig:XamComboEditor.ItemFilters>
</ig:XamComboEditor>
このトピックの追加情報については、以下のトピックも合わせてご参照ください。