Infragistics|Ultimate UI WPF|如何將XamDataGrid儲存格的顏色綁定到View Model屬性

infragistics log


如果你想在View Model端擁有一個儲存格的顏色並綁定其屬性,您可以使用CellBinding功能輕鬆地做到這一點。

// Model(SampleDataItem.cs)
public class SampleDataItem
{
    public int ID { get; set; }
    public String Value1 { get; set; }
    public SolidColorBrush Value1Color { get; set;} // 要設定為Value1儲存格的背景色的顏色。
}
// Viewmodel(MainWindowViewModel.cs)
public class MainWindowViewModel
{
    private ObservableCollection _sampleData;

    public ObservableCollection SampleData
    {
        get { return _sampleData; }
        set { _sampleData = value; }
    }

    public MainWindowViewModel()
    {
        // 如果ID=1,Value1儲存格的背景色是粉紅色,如果ID=4,Value1儲存格的背景色是LightGreen,如果是其他情況,儲存格背景色會是透明的。
        _sampleData = new ObservableCollection();
        _sampleData.Add(new SampleDataItem() { ID = 1, Value1 = "aaa", Value1Color = new SolidColorBrush(Colors.Pink) });
        _sampleData.Add(new SampleDataItem() { ID = 2, Value1 = "bbb", Value1Color = new SolidColorBrush(Colors.Transparent) });
        _sampleData.Add(new SampleDataItem() { ID = 3, Value1 = "ccc", Value1Color = new SolidColorBrush(Colors.Transparent) });
        _sampleData.Add(new SampleDataItem() { ID = 4, Value1 = "ddd", Value1Color = new SolidColorBrush(Colors.LightGreen) });
        _sampleData.Add(new SampleDataItem() { ID = 5, Value1 = "eee", Value1Color = new SolidColorBrush(Colors.Transparent) });
    }
}
<!-- Model(MainWindow.xaml) -->
<igDP:XamDataGrid ...
DataSource="{Binding SampleData}" ...>
<igDP:XamDataGrid.FieldLayoutSettings>
<igDP:FieldLayoutSettings AutoGenerateFields="False" />
</igDP:XamDataGrid.FieldLayoutSettings>
<igDP:XamDataGrid.FieldLayouts>
<igDP:FieldLayout>
<igDP:FieldLayout.Fields>
<igDP:Field Name="ID" Label="ID"/>
<igDP:Field Name="Value1" Label="Value1">
<!-- 用CellBinding將儲存格的背景顏色綁定到View Model端的屬性 -->
<igDP:Field.CellBindings>
<igDP:CellBinding
Property="Background"
Target="CellValuePresenter"
Binding="{Binding Path=DataItem.Value1Color}" />
</igDP:Field.CellBindings>
</igDP:Field>
</igDP:FieldLayout.Fields>
</igDP:FieldLayout>
</igDP:XamDataGrid.FieldLayouts>
</igDP:XamDataGrid>


執行結果



Example

相關參考資料




延伸閱讀
aa71435723的大頭照
Winston

Eggplant DAI 自動化測試專家。

留言