バージョン

xamGrid コントロールの代わりに xamDataGrid コントロールを使用してください。xamGrid は数年以内に廃止する予定のため、新しい機能の追加はありません。xamGrid のサポートおよび重要なバグ修正は廃止時まで提供されます。コードベースの xamDataGrid への移動に関する質問は、サポートまでお問い合わせください。

テンプレート列でデータを編集

xamGrid コントロールは、テンプレート列でのデータ編集をサポートします。 TemplateColumn オブジェクトは、エディターを編集モードで使用するように定義するために使用できる EditorTemplate プロパティを提供します。データ オブジェクトが INotifyPropertyChanged インターフェイスを実装している場合、データを更新できるようにするためにエディターとデータ オブジェクト間で適切なデータ バインディングを構成します。バインディングする時は、必ず UpdateSourceTrigger プロパティを Explicit に設定してください。そうすれば、xamGrid はこの更新が発生するタイミングを完全に制御でき、ユーザーが Escape キーを押すとキャンセルすることができます。

テンプレート列でデータを編集するためのもうひとつのオプションはイベントを使用して行います。データ ソースへの更新を処理するために、 CellEnteredEditMode および CellExitingEditMode の 2 つのイベントを使用できます。

以下のコードは、xamGrid でテンプレート列のエディターとして Slider コントロールを設定する方法を示します。 DataUtil クラスが提供されます。

XAML の場合:

<ig:XamGrid x:Name="xamGrid1" ItemsSource="{Binding Source={StaticResource DataUtil}, Path=Products}">
    <ig:XamGrid.EditingSettings>
        <ig:EditingSettings AllowEditing="Row" />
    </ig:XamGrid.EditingSettings>
    <ig:XamGrid.Columns>
        <ig:TextColumn Key="ProductID" />
        <ig:TextColumn Key="ProductName" />
        <ig:TemplateColumn Key="UnitPrice">
            <ig:TemplateColumn.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding UnitPrice}" />
                </DataTemplate>
            </ig:TemplateColumn.ItemTemplate>
            <!--列のカスタム エディターを設定します -->
            <ig:TemplateColumn.EditorTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Vertical">
                        <!-- ソースの更新が行われる時をグリッドが制御できるように UpdateSourceTrigger を Explicit に設定します -->
                        <Slider x:Name="slider1" Minimum="0" Maximum="100" SmallChange="1" LargeChange="5" Value="{Binding UnitPrice, Mode=TwoWay, UpdateSourceTrigger=Explicit}"></Slider>
                        <TextBlock Text="{Binding Value, ElementName=slider1}" HorizontalAlignment="Center"/>
                    </StackPanel>
                </DataTemplate>
            </ig:TemplateColumn.EditorTemplate>
        </ig:TemplateColumn>
    </ig:XamGrid.Columns>
    </ig:XamGrid>
sl xamGrid Editing Data in a Template Column 01.png