XamDataGrid – セルにオートフィルタが可能なコンボボックスを表示する

XamDataGrid のセルでフィルタリング可能なコンボボックスを表示するには、CellValuePresenter にフィルタリング機能を有効にした XamMultiColumnComboEditor を配置します。

以下は CellValuePresenter スタイルの実装例です。
テンプレートに XamMultiColumnComboEditor を配置し、 ItemsSource プロパティには DataContext のデータをバインドし、 SelectedValue プロパティには TemplatedParent の Value プロパティを指定しています。SelectedValuePath と DisplayMemberPath にはそれぞれ “Id” と “Name” を指定しています。また、ItemFilters には「含む」でフィルタリングを行う ComboItemFilter を追加しています。

<Style x:Key="MultiColumnComboCellStyle" TargetType="{x:Type igWPF:CellValuePresenter}">
	<Setter Property="Template">
		<Setter.Value>
			<ControlTemplate TargetType="{x:Type igWPF:CellValuePresenter}">
				<ig:XamMultiColumnComboEditor
					x:Name="PART_XamMultiColumnComboEditor" 
					ItemsSource="{Binding DataContext.ComboData, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}}" 
					SelectedValue="{Binding RelativeSource={RelativeSource TemplatedParent},Path=Value,Mode=TwoWay}"
					SelectedValuePath="Id"
					DisplayMemberPath="Name" 
					SelectedItemsResetButtonVisibility="Collapsed"
					AutoGenerateColumns="False" 
					CustomValueEnteredAction="Allow">
					<ig:XamMultiColumnComboEditor.Resources>
						<Style TargetType="ig:ComboHeaderCellControl">
							<Setter Property="Visibility" Value="Collapsed"/>
						</Style>
						<Style TargetType="ig:ComboCellControl">
							<Setter Property="BorderThickness" Value="0,0,0,1"/>
						</Style>
					</ig:XamMultiColumnComboEditor.Resources>
					<ig:XamMultiColumnComboEditor.Columns>
						<ig:TextComboColumn Key="Name" Width="*"/>
					</ig:XamMultiColumnComboEditor.Columns>
					<ig:XamMultiColumnComboEditor.ItemFilters>
						<ig:ComboItemFilter LogicalOperator="And">
							<ig:ComboItemFilter.Conditions>
								<ig:ComparisonCondition Operator="Contains" />
							</ig:ComboItemFilter.Conditions>
						</ig:ComboItemFilter>
					</ig:XamMultiColumnComboEditor.ItemFilters>
				</ig:XamMultiColumnComboEditor>

				<ControlTemplate.Triggers>
					<Trigger Property="IsRecordSelected" Value="True">
						<Setter TargetName="PART_XamMultiColumnComboEditor" Property="EditAreaBackground" Value="#00FFFFFF" />
					</Trigger>
					<DataTrigger Binding="{Binding Path=Record.IsActive, RelativeSource={RelativeSource Self}}" Value="True">
						<Setter TargetName="PART_XamMultiColumnComboEditor" Property="EditAreaBackground" Value="#00FFFFFF" />
					</DataTrigger>
					<Trigger Property="IsActive" Value="True">
						<Setter TargetName="PART_XamMultiColumnComboEditor" Property="EditAreaBackground" Value="white" />
					</Trigger>
				</ControlTemplate.Triggers>
			</ControlTemplate>
		</Setter.Value>
	</Setter>
</Style>

以上のように定義した CellValuePresenter スタイルを、XamDataGrid の「Test1」フィールドの CellValuePresenterStyle に Key で割り当てます。

<igWPF:XamDataGrid　.....>
	<igWPF:XamDataGrid.FieldLayouts>
		<igWPF:FieldLayout>
			<igWPF:FieldLayout.Fields>
				<igWPF:Field Name="Test1" >
					<igWPF:Field.Settings>
						<igWPF:FieldSettings　CellValuePresenterStyle="{StaticResource MultiColumnComboCellStyle}"/>
					</igWPF:Field.Settings>
				</igWPF:Field>
...
			</igWPF:FieldLayout.Fields>
		</igWPF:FieldLayout>
	</igWPF:XamDataGrid.FieldLayouts>
</igWPF:XamDataGrid>