バージョン

項目フィルターの構成 (xamComboEditor)

トピックの概要

目的

このトピックは、 xamComboEditor コントロールに項目フィルターを設定する方法を説明します。

前提条件

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

トピック 目的

このトピックでは、 xamComboEditor コントロールを使用して作業を開始する方法と、プロシージャー コードを使用してそれをページに追加する方法を説明します。

このトピックの内容

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

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

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

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

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

フィルタリングが有効 / 無効かどうかを構成します

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

フィルタリングの有効 / 無効

概要

xamComboEditor は、ユーザーがテキスト フィールドに入力を開始するときに、コントロールのドロップダウンの項目をフィルターします。データ項目は xamComboEditor に指定したフィルターに基づいてフィルターされます。

この機能はデフォルトで有効です。フィルタリングは xamComboEditorDisplayMemberPath プロパティによって実行し、比較演算子は StartsWith です。

プロパティ設定

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

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

xamComboEditor でフィルタリングを有効/無効にします

bool

フィルターするためのデータ モデル プロパティを指定します

string

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

概要

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

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

注:

Note

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

注:

Note

フィルター値を設定するためにコードで ComparisonConditionFilterValue プロパティを使用できません。xamComboEditor は内部に FilterValue プロパティを使用します。コントロールの入力フィールドに入力されたテキストに設定されます。

プロパティ設定

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

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

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

ObservableCollection<ComboItemFilter>

フィルターするためのデータ モデル プロパティを指定します

string

すべてのフィルター条件を結合する論議演算子を指定します

適用する条件のコレクションを指定します

比較条件の演算子を指定します

以下のスクリーンショットは、次のコードにより、 xamComboEditor のフィルターリングを紹介します。

  1. xamComboEditor のテキスト入力フィールドに「s」を入力します:

CustomFiltering 1.png
  1. xamComboEditor のテキスト入力フィールドに「100」を入力します:

CustomFiltering 2.png

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

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>

関連コンテンツ

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

トピック 目的

このトピックは、 xamComboEditor の編集モードで利用可能なオート コンプリート機能を説明します。

このトピックは、コントロールのテキスト ボックスに入力するときに xamComboEditor の動作を指定する方法を説明します。

このトピックは、 xamComboEditor のドロップダウンのサイズ変更を有効/無効にする方法を説明し、ドロップダウンの最小幅、最大幅、および最大高さをコードで設定する方法を説明します。

このトピックは、項目の視覚化をカスタマイズするために xamComboEditor の ItemTemplate プロパティを使用する方法を説明します。

このトピックは xamComboEditor コントロールの選択を説明します。