バージョン

項目のフィルタリングの構成 (xamMultiColumnComboEditor)

トピックの概要

目的

このトピックでは、 xamMultiColumnComboEditor™ コントロールで項目のフィルタリングを構成する方法を説明します。

前提条件

このトピックを理解するためには、以下のトピックを理解しておく必要があります。

トピック 目的

このトピックでは、 xamMultiColumnComboEditor コントロールをアプリケーションに追加し、いくつかのプロパティの使用方法を説明します。

このトピックの内容

このトピックは、以下のセクションで構成されます。

はじめに

項目のフィルタリングの概要

xamMultiColumnComboEditor コントロールは、入力テキスト フィールドへの入力が開始された場合のコントロールのドロップダウン項目のフィルタリングを提供します。データ項目は、 xamMultiColumnComboEditor に指定されたフィルターに従ってフィルタリングされます。

カスタム フィルターが指定されていない場合は、項目のフィルタリングは常に有効に設定され、コントロールのドロップダウンのすべての列で項目のフィルタリングが実行されます。

フィルタリング構成の概要

フィルタリング構成の概要表

以下の表では、 xamMultiColumnComboEditor フィルタリング機能の構成可能な要素を簡単に説明し、それらを構成するプロパティにマップします。詳細は、表の後に記載されています。

構成可能な項目 詳細 プロパティ

項目フィルタリングを適用する列を構成します。

xamMultiColumnComboEditor データ項目のフィルタリングに適用されるカスタム フィルターのコレクションを構成します。

フィルタリング範囲の構成

概要

xamMultiColumnComboEditor は項目のフィルタリング範囲を指定するオプションを提供します。

xamMultiColumnComboEditor FilterMode プロパティを使用して、コントロールのプライマリ列で実行、または表示されているすべての列で実行のいずれかに項目フィルタリングを設定します。

プライマリ列とは、DisplayMemberPath プロパティで指定されたデータ オブジェクト プロパティのデータを表す列です。

注:

Note

プロパティが FilterOnPrimaryColumnOnly に設定されている場合、 xamMultiColumnComboEditor は自動的にユーザーが入力したテキストのオートコンプリートを実行します。

プロパティ設定

以下の表は、任意の構成とそれを管理するプロパティ設定のマップを示します。

目的: 使用するプロパティ: 設定値

プライマリ列の項目にフィルタリングを適用

FilterOnPrimaryColumnOnly

表示されているすべての列の項目にフィルタリングを適用

FilterOnAllColumns

例

以下のスクリーンショットは、以下の設定の結果、 xamMultiColumnComboEditor がどのように動作するかを示しています。

プロパティ 値

ProductName

FilterOnAllColumns
Item Filtering 1.png

以下のコードはこの例を実装します。

XAML の場合:

<ig:XamMultiColumnComboEditor x:Name="ComboEditorProducts"
                              Height="30" Width="300"
                              ItemsSource="{Binding Path=Products}"
                              AutoGenerateColumns="False"
                              DisplayMemberPath="ProductName"
                              FilterMode="FilterOnAllColumns">
    <ig:XamMultiColumnComboEditor.Columns>
        <ig:TextComboColumn Key="ProductName"/>
        <ig:TextComboColumn Key="QuantityPerUnit"/>
    </ig:XamMultiColumnComboEditor.Columns>
</ig:XamMultiColumnComboEditor>

以下のスクリーンショットは、以下の設定の結果、 xamMultiColumnComboEditor がどのように動作するかを示しています。

プロパティ 値

ProductName

FilterOnPrimaryColumnOnly
Item Filtering 2.png

以下のコードはこの例を実装します。

XAML の場合:

<ig:XamMultiColumnComboEditor x:Name="ComboEditorProducts"
                              Height="30" Width="300"
                              ItemsSource="{Binding Path=Products}"
                              AutoGenerateColumns="False"
                              DisplayMemberPath="ProductName"
                              FilterMode="FilterOnPrimaryColumnOnly">
    <ig:XamMultiColumnComboEditor.Columns>
        <ig:TextComboColumn Key="ProductName"/>
        <ig:TextComboColumn Key="QuantityPerUnit"/>
    </ig:XamMultiColumnComboEditor.Columns>
</ig:XamMultiColumnComboEditor>

カスタム フィルターの構成

概要

xamMultiColumnComboEditor コントロールは項目のフィルタリングをカスタマイズする機能を提供します。

これは xamMultiColumnComboEditor ItemFilters プロパティを使用して行います。このプロパティには、 ComboItemFilter オブジェクトの ObservableCollection がカスタム項目フィルタリングを提供するために設定されています。

注:

Note

カスタムの ComboItemFilter を作成する場合は、ComboItemFilter FieldName プロパティをフィルター処理対象のデータプロパティの名前に設定する必要があります。FieldName プロパティが設定されていない場合は、例外がスローされます。

注:

Note

フィルター値をコードでプリセットする場合は、 ComparisonCondition FilterValue プロパティを使用できません。xamMultiColumnComboEditor が FilterValue プロパティを内部的に使用し、コントロールの入力フィールドに入力されたテキストに設定します。

プロパティ設定

以下の表は、任意の構成とそれを管理するプロパティ設定のマップを示します。

目的: 使用するプロパティ: 設定値

カスタム フィルターのコレクションの作成

ObservableCollection< ComboItemFilter>

項目フィルタリングが実行されるデータ モデル プロパティの指定

string

すべてのフィルター条件を組み合わせるための論理演算子の指定

適用される条件コレクションの指定

比較条件演算子の指定

例

以下のスクリーンショットは、以下のコードを使用した結果、 xamMultiColumnComboEditor のフィルタリングがどのように動作するかを示しています。

  1. xamMultiColumnComboEditor テキスト入力フィールドに「s」と入力します。

Item Filtering 3.png

  1. xamMultiColumnComboEditor テキスト入力フィールドに「100」と入力します。

Item Filtering 4.png

以下のコードはこの例を実装します。

XAML の場合:

<ig:XamMultiColumnComboEditor x:Name="MultiColumnComboEditor"
                              ItemsSource="{Binding Path=Products}"
                              Height="30" Width="300"
                              AutoGenerateColumns="False"
                              DisplayMemberPath="ProductName">
    <ig:XamMultiColumnComboEditor.Columns>
        <ig:TextComboColumn Key="ProductName"/>
        <ig:TextComboColumn Key="UnitsInStock"/>
    </ig:XamMultiColumnComboEditor.Columns>
    <ig:XamMultiColumnComboEditor.ItemFilters>
        <ig:ComboItemFilter FieldName="ProductName" LogicalOperator="And">
            <ig:ComboItemFilter.Conditions>
                <ig:ComparisonCondition Operator="Contains" />
                <ig:ComparisonCondition Operator="StartsWith"/>
            </ig:ComboItemFilter.Conditions>
        </ig:ComboItemFilter>
        <ig:ComboItemFilter FieldName="UnitsInStock">
            <ig:ComboItemFilter.Conditions>
                <ig:ComparisonCondition Operator="GreaterThan"/>
            </ig:ComboItemFilter.Conditions>
        </ig:ComboItemFilter>
    </ig:XamMultiColumnComboEditor.ItemFilters>
</ig:XamMultiColumnComboEditor>

関連コンテンツ

このトピックの追加情報については、以下のトピックも合わせてご参照ください。

トピック 目的

このトピックでは、 xamMultiColumnComboEditor コントロールのテキストフィールドに入力し Enter キーを押した場合に、実行される動作を構成する方法について説明します。

このトピックでは、 xamMultiColumnComboEditor コントロールをデータとバインドして、コントロールのドロップダウン リストの項目レイアウトを構成する方法について説明します。

このトピックでは、 xamMultiColumnComboEditor ドロップダウンのレイアウトおよび動作を構成する方法を説明します。

このグループのトピックでは、 xamMultiColumnComboEditor コントロールの選択機能とその使用方法について説明します。