XAMLテンプレートを使用するカスタムセル

次のセクションでは、FlexGrid .NET 4.5.2および.NET 5バージョンでXAMLテンプレートを使用してカスタムセルを実装する方法を説明します。

.NET Framework
.NET

コードを記述するのではなく、XAML によってカスタムセルを作成することもできます。C1FlexGrid の Column オブジェクトには、CellTemplate および CellEditingTemplate プロパティが含まれます。これらのプロパティを使用して、列内のセルを表示および編集するためのビジュアル要素を指定できます。

たとえば、次の XAML コードは、列内の値を表示および編集するために使用されるカスタムビジュアル要素を定義します。この列内のセルは、緑色、太字、中央揃えのテキストで表示されます。テキストは、テキストボックスの横にある編集アイコンを使って編集します。

XAML	コードのコピー
<c1:C1FlexGrid x:Name="_fgTemplated"> <c1:C1FlexGrid.Columns> <!-- テンプレート列を追加します。--> <c1:Column ColumnName="_colTemplated" Header="テンプレート" Width="200"> <!-- 表示モードのセルのテンプレート --> <c1:Column.CellTemplate> <DataTemplate> <TextBlock Text="{Binding Name}" Foreground="Green" FontWeight="Bold" VerticalAlignment="Center"/> </DataTemplate> </c1:Column.CellTemplate> <!-- 編集モードのセルのテンプレート --> <c1:Column.CellEditingTemplate> <DataTemplate> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Image Source="edit_icon.png" Grid.Column="0" /> <TextBox Text="{Binding Name, Mode=TwoWay}" Grid.Column="1" /> </Grid> </DataTemplate> </c1:Column.CellEditingTemplate> </c1:Column> </c1:C1FlexGrid.Columns> </c1:C1FlexGrid>

XAML

コードのコピー

<c1:C1FlexGrid x:Name="_fgTemplated">
  <c1:C1FlexGrid.Columns>
    <!-- テンプレート列を追加します。-->
    <c1:Column ColumnName="_colTemplated" Header="テンプレート" Width="200">
      <!-- 表示モードのセルのテンプレート -->
      <c1:Column.CellTemplate>
        <DataTemplate>
          <TextBlock Text="{Binding Name}"
           Foreground="Green" FontWeight="Bold"
           VerticalAlignment="Center"/>
        </DataTemplate>
      </c1:Column.CellTemplate>
      <!-- 編集モードのセルのテンプレート -->
      <c1:Column.CellEditingTemplate>
        <DataTemplate>
          <Grid>
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="Auto" />
              <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Image Source="edit_icon.png" Grid.Column="0" />
            <TextBox Text="{Binding Name, Mode=TwoWay}" Grid.Column="1" />
          </Grid>
        </DataTemplate>
      </c1:Column.CellEditingTemplate>
    </c1:Column>
  </c1:C1FlexGrid.Columns>
</c1:C1FlexGrid>

コードを記述するのではなく、XAML によってカスタムセルを作成することもできます。C1FlexGrid の GridColumn クラスには、CellTemplate および CellEditingTemplate プロパティが含まれます。これらのプロパティを使用して、列内のセルを表示および編集するためのビジュアル要素を指定できます。

XAML	コードのコピー
<c1:FlexGrid x:Name="_fgTemplated"> <c1:FlexGrid.Columns> <!-- add a templated column --> <c1:GridColumn ColumnName="_colTemplated" Header="Template" Width="200"> <!-- template for cells in display mode --> <c1:GridColumn.CellTemplate> <DataTemplate> <TextBlock Text="{Binding FirstName}" Foreground="Green" FontWeight="Bold" VerticalAlignment="Center"/> </DataTemplate> </c1:GridColumn.CellTemplate> <!-- template for cells in edit mode --> <c1:GridColumn.CellEditingTemplate> <DataTemplate> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Image Source="edit_icon.png" Grid.Column="0" /> <TextBox Text="{Binding FirstName, Mode=TwoWay}" Grid.Column="1" /> </Grid> </DataTemplate> </c1:GridColumn.CellEditingTemplate> </c1:GridColumn> </c1:FlexGrid.Columns> </c1:FlexGrid>

XAML

コードのコピー

<c1:FlexGrid x:Name="_fgTemplated">
    <c1:FlexGrid.Columns>
        <!-- add a templated column -->
        <c1:GridColumn ColumnName="_colTemplated" Header="Template" Width="200">
            <!-- template for cells in display mode -->
            <c1:GridColumn.CellTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding FirstName}" Foreground="Green" FontWeight="Bold" VerticalAlignment="Center"/>
                </DataTemplate>
            </c1:GridColumn.CellTemplate>
            <!-- template for cells in edit mode -->
            <c1:GridColumn.CellEditingTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <Image Source="edit_icon.png" Grid.Column="0" />
                        <TextBox Text="{Binding FirstName, Mode=TwoWay}" Grid.Column="1" />
                    </Grid>
                </DataTemplate>
            </c1:GridColumn.CellEditingTemplate>
        </c1:GridColumn>
    </c1:FlexGrid.Columns>
</c1:FlexGrid>