Infragistics｜Ultimate UI｜將 ViewModel 的數據綁定到 XamDataGrid 字段

278 瀏覽人次

2023-02-14 更新

讓我們將 ViewModel 的數據綁定到 XamDataGrid 的列。例如，讓我們考慮一個場景，其中 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
    }
}

將 ViewModel 傳遞給 Window

將 ViewModel 傳遞給 Windows 的 DataContext。

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

        // 將 Viewmodel 配分給 Window 的 DataContext
        MainViewModel vm = new MainViewModel();
        this.DataContext = vm;
    }
}

在 XAML 中定義 XamDataGrid

在 XamDataGrid 中定義四列，並將 AllowTitleEdit 和 AllowDueEdit 屬性綁定到“標題”和“截止日期”列的 AllowEdit 屬性。使用 FieldBinding 類將 ViewModel 數據綁定到 Field 屬性。請參閱下面代碼片段中的第 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 先前版本的用法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 或更早版本時， ViewModel 的作為Binding RelativeSource={RelativeSource Self}, Path=Owner.DataPresenter.DataContext.AllowTitleEdit 或 Binding RelativeSource={RelativeSource Self}, Path=DataContext.AllowTitleEdit 請參閱上面代碼片段中的第 20-30 行。