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

尚無瀏覽量

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 行。