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

[orca_post_views] 瀏覽人次

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