バージョン

編集イベントを使用してカスタム エディターを作成

このコントロールは廃止されたため、XamDataGrid コントロールに移行することをお勧めします。今後、新機能、バグ修正、サポートは提供されません。コードベースの XamDataGrid への移行に関する質問は、サポートまでお問い合わせください。

始める前に

このトピックでは、テンプレート列でカスタム エディターを作成するために CellEnteredEditMode および CellExitingEditMode イベントを使用する方法を説明します。

前提:

このトピックでは以下を前提とします。

  • xamGrid コントロールをページのデータに既にバインドしてあること。詳細は データ バインディングトピックを参照してください。

  • 編集を有効にしてあります。詳細は データの編集トピックを参照してください。

達成すること

グリッドで Product Name 列のエディターとして使用されるカスタム コンボ ボックスを作成します。グリッドが編集モードに入ると、すべての製品名が移植されたコンボ ボックスが表示され、現在の製品名がドロップダウンに強調表示されます。

次の手順を実行します

  1. TemplateColumn を作成し、 Key を ProductName に設定します。

XAML の場合:

<Grid x:Name="LayoutRoot" Background="White">
   <ig:XamGrid x:Name="MyDataGrid" ItemsSource={StaticResource DataUtil}, Path=Products}">
      <ig:XamGrid.EditingSettings>
         <ig:EditingSettings AllowEditing="Row"/>
      </ig:XamGrid.EditingSettings>
      <ig:XamGrid.Columns>
         <ig:TemplateColumn Key="ProductName">
            <!-- TODO: ItemTemplate を追加します -->
            <!-- TODO: EditorTemplate を追加します -->
         </ig:TemplateColumn>
      </ig:XamGrid.Columns>
   </ig:XamGrid>
</Grid>
  1. ItemTemplate を作成します。

DataTemplate を作成します。

TextBlock を DataTemplate に追加し、それを ProductName 列にバインドします。

XAML の場合:

<ig:TemplateColumn.ItemTemplate>
   <DataTemplate>
      <TextBlock Text="{Binding ProductName}"/>
   </DataTemplate>
</ig:TemplateColumn.ItemTemplate>
  1. EditorTemplate を作成します。

DataTemplate を作成します。

ComboBox を追加します。

コンボ ボックスの ItemTemplate を作成します。

DataTemplate を作成します。

TextBlock を DataTemplate に追加し、それを製品名にバインドします。

XAML の場合:

<ig:TemplateColumn.EditorTemplate>
   <DataTemplate>
      <ComboBox>
         <ComboBox.ItemTemplate>
            <DataTemplate>
               <TextBlock Text="{Binding ProductName}"/>
            </DataTemplate>
         </ComboBox.ItemTemplate>
      </ComboBox>
   </DataTemplate>
</ig:TemplateColumn.EditorTemplate>
  1. CellEnteredEditMode および CellExitingEditMode イベントを xamGrid コントロールに追加します。

XAML の場合:

<ig:XamGrid x:Name="MyDataGrid" ItemsSource={StaticResource DataUtil}
      CellEnteredEditMode="MyDataGrid_CellEnteredEditMode"
      CellExitingEditMode="MyDataGrid_CellExitingEditMode">
      …
  </ig:XamGrid>
  1. CellEnteredEditMode および CellExitingEditMode イベントを処理します。

Visual Basic の場合:

Private Sub MyDataGrid_CellEnteredEditMode(ByVal sender As Object, ByVal e As EditingCellEventArgs)
   ' 正しいセルを確認します。
   If (e.Cell.Column.Key = "ProductName") Then
      Dim box As ComboBox = CType(e.Editor, ComboBox)
      box.ItemsSource = DataUtil.Products
      ' 選択したインデックスをグリッド セルのインデックスに設定します。
      box.SelectedIndex = e.Cell.Row.Index
   End If
End Sub
Private Sub MyDataGrid_CellExitingEditMode(ByVal sender As Object, ByVal e As ExitEditingCellEventArgs)
   ' 正しいセルを使用し、編集がキャンセルされていないことを確認します。
   If ((e.Cell.Column.Key = "ProductName") _
          AndAlso Not e.EditingCanceled) Then
      Dim box As ComboBox = CType(e.Editor, ComboBox)
      If (Not (box.SelectedItem) Is Nothing) Then
         ' 新しい値は、コンボ ボックスで選択した項目の値です。
         e.NewValue = CType(box.SelectedItem, Product).ProductName
         box.ItemsSource = Nothing
         box.SelectedItem = Nothing
      End If
   End If
End Sub

C# の場合:

private void MyDataGrid_CellEnteredEditMode(object sender, EditingCellEventArgs e)
{
   // 正しいセルを確認します。
   if (e.Cell.Column.Key == "ProductName") {
      ComboBox box = e.Editor as ComboBox;
      box.ItemsSource = DataUtil.Products;
      // 選択したインデックスをグリッド セルのインデックスに設定します。
      box.SelectedIndex = e.Cell.Row.Index;
   }
}
private void MyDataGrid_CellExitingEditMode(object sender, ExitEditingCellEventArgs e)
{
   // 正しいセルを使用し、編集がキャンセルされていないことを確認します。
   if (e.Cell.Column.Key == "ProductName" && !e.EditingCanceled) {
      ComboBox box = e.Editor as ComboBox;
      if (box.SelectedItem !=null){
         // 新しい値は、コンボ ボックスで選択した項目の値です。
         e.NewValue = ((Product)box.SelectedItem).ProductName;
         box.ItemsSource = null;
         box.SelectedItem = null;
      }
   }
}
  1. アプリケーションを保存して実行します。ProductName 列が編集モードに入ると、既存の製品名が移植された状態でコンボ ボックスが表示されます。現在の製品名が選択されています。

xamGrid Custom Editor Using Editing Events 01.png