XamDataGrid Field に ViewModel のデータをバインドする

XamDataGrid の列に ViewModel のデータをバインドしてみましょう。例えば、ViewModel 側に編集可否を制御するフラグデータを保持しておき、フラグの状態に応じて列単位のセル編集可否を制御するシナリオを考えてみます。

ViewModel のプロパティ

編集可否を制御するフラグ、AllowTitleEdit プロパティ（デフォルト値 true）と AllowDueEdit プロパティ（デフォルト値 false）を用意します。

class MainViewModel : NotificationObject
{
    ...

    private bool _allowTitleEdit;
    public bool AllowTitleEdit
    {
        get
        {
            return _allowTitleEdit;
        }
        set
        {
            _allowTitleEdit = value;
            OnPropertyChanged();
        }
    }

    private bool _allowDueEdit;
    public bool AllowDueEdit
    {
        get
        {
            return _allowDueEdit;
        }
        set
        {
            _allowDueEdit = value;
            OnPropertyChanged();
        }
    }

    public MainViewModel()
    {
        ...

        #region 列編集可否

        this.AllowTitleEdit = true;
        this.AllowDueEdit = false;
        
        #endregion
    }
}

Window へ ViewModel を渡す

Window の DataContext に ViewModel を渡します。

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        // ViewModel を Window の DataContext へ割り当て
        MainViewModel vm = new MainViewModel();
        this.DataContext = vm;
    }
}

XAML 上での XamDataGrid の定義

XamDataGrid には 4 つの列を定義し、「タイトル」列、「期限」列の AllowEdit プロパティに先程の AllowTitleEdit プロパティ、AllowDueEdit プロパティをバインドします。Field のプロパティに ViewModel のデータをバインドする際は FieldBinding クラスを利用します。下記コードスニペットの 14 行目～ 18 行目をご覧ください。

<Window
        ...
        xmlns:igDP="http://infragistics.com/DataPresenter" x:Class="XamDataGrid_Field_AllowEdit.MainWindow"
        ...>
    <Grid>
        ...
        <igDP:XamDataGrid DataSource="{Binding Tasks}" Grid.Row="1">
            ...
            <igDP:XamDataGrid.FieldLayouts>
                <igDP:FieldLayout>
                    <igDP:FieldLayout.Fields>
                        <igDP:Field Name="ID" Label="ID"/>
                        
                        <!--FieldBinding を利用した場合-->
                        <igDP:Field Name="Title" Label="タイトル"
                                    AllowEdit="{igDP:FieldBinding AllowTitleEdit}"/>
                        <igDP:Field Name="Due" Label="期限"
                                    AllowEdit="{igDP:FieldBinding AllowDueEdit}"/>

                        <!--2014 vol.1 以前の場合：代替案１-->
                        <!--<igDP:Field Name="Title" Label="タイトル"
                                    AllowEdit="{Binding RelativeSource={RelativeSource Self}, Path=DataContext.AllowTitleEdit}"/>
                        <igDP:Field Name="Due" Label="期限"
                                    AllowEdit="{Binding RelativeSource={RelativeSource Self}, Path=DataContext.AllowDueEdit}"/>-->
                        
                        <!--2014 vol.1 以前の場合：代替案２-->
                        <!--<igDP:Field Name="Title" Label="タイトル"
                                    AllowEdit="{Binding RelativeSource={RelativeSource Self}, Path=Owner.DataPresenter.DataContext.AllowTitleEdit}"/>
                        <igDP:Field Name="Due" Label="期限"
                                    AllowEdit="{Binding RelativeSource={RelativeSource Self}, Path=Owner.DataPresenter.DataContext.AllowDueEdit}"/>-->
                        
                        <igDP:Field Name="IsCompleted" Label="完了？"/>
                    </igDP:FieldLayout.Fields>
                </igDP:FieldLayout>
            </igDP:XamDataGrid.FieldLayouts>
        </igDP:XamDataGrid>
        ...
    </Grid>
</Window>

FieldBinding は 2014 vol.2 より提供される機能です。2014 vol.1 以前のバージョンを利用する場合、FieldBinding の代わりに Binding RelativeSource={RelativeSource Self}, Path=DataContext.AllowTitleEdit もしくは Binding RelativeSource={RelativeSource Self}, Path=Owner.DataPresenter.DataContext.AllowTitleEdit として ViewModel のデータを参照します。上記コードスニペットの 20 行目～ 30 行目をご覧ください。

サンプル