如何根據單元格中的可變值設置datagrid行的背景

Question

我目前正在使用C＃WPF DataGrid 。
DataGrid使用我的數據庫作為ItemsSource並且我使用DataGrid列出我的訂單。
例如：

大漢堡1
大MAC 1
芝士漢堡1

MCNUGGETS 2
雞2
可口可樂2
百事可樂2

如您所見，我列出了每個訂單中的商品，每個商品旁邊都有數字1或2。這些數字有助於我確定哪個商品屬於哪個訂單。

我的問題是我該如何繪制每一行，哪些項目屬於特定的訂單，例如，當項目與訂單1關聯時為紅色，當項目與訂單2關聯時為藍色，依此類推。 或者，也可以僅繪制每個訂單的最后一行（請看下面的粗體部分）。

我需要以某種方式將它們分開，因為當我將它們加載到datagrid時，看起來很亂。

想象一下：

大漢堡1大MAC 1
芝士漢堡1
MCNUGGETS 2
雞2
可口可樂2
百事可樂2
大漢堡3
大MAC 3
芝士漢堡3
MCNUGGETS 3
雞4
可口可樂4
百事可樂4

看起來很亂。

（正如我之前說過的，如果不可能整行繪制，則只能繪制每個訂單的最后一行，只是在屏幕上創建可見的分隔。）

這是我到目前為止所擁有的，但這並不是最佳選擇，因為它使用硬編碼值：

 <DataGrid.RowStyle>
        <Style TargetType="DataGridRow"> 
            <Style.Triggers>
                <DataTrigger Binding="{Binding NumberOfOrder}"  Value="1">
                    <Setter Property="Background" Value="Red"></Setter>
                </DataTrigger>
                <DataTrigger Binding="{Binding NumberOfOrder}"  Value="2">
                    <Setter Property="Background" Value="Green"></Setter>
                </DataTrigger>
                <DataTrigger Binding="{Binding NumberOfOrder}"  Value="3">
                    <Setter Property="Background" Value="Orange"></Setter>
                </DataTrigger>
            </Style.Triggers>
        </Style>
</DataGrid.RowStyle>

代碼如下：

public partial class MainWindow : Window
{
    public MainWindow()
    {
        try
        {
            InitializeComponent();
            this.WindowStartupLocation = WindowStartupLocation.CenterScreen;
            this.WindowState = WindowState.Maximized;

            datagrid1.ItemsSource = OrdersController.localOrders();
        }
        catch(Exception ex)
        {
            MessageBox.Show(ex.Message);
        }
    }
}

如您所見，如果我的NumberOfOrder是1,2或3 ，接下來我將使用硬編碼值： 繪制行 ，這不是一個好的解決方案，因為NumberOfOrder會有許多不同的值。

Mat的答案后編輯：

public MainWindow()
{
InitializeComponent();

    CollectionViewSource collectionViewSource = new CollectionViewSource();

    var ordersList = OrdersController.localOrders(); //ORDERS LIST

    collectionViewSource.Source = new List<OrdersController.OrdersLocal>()
    {
        foreach(var item in ordersList) 
        {
            new OrdersController.OrdersLocal() {Title = item.Title, NumberOfOrder = item.NumberOfOrder, Desc = item.Desc,   User = item.User }
        }

    };

    collectionViewSource.GroupDescriptions.Add(new PropertyGroupDescription("NumberOfOrder"));

    DataContext = collectionViewSource;
}

Answer 1

您可以嘗試將綁定與值轉換器一起使用。

我這樣做是針對單元格樣式的：

<Style TargetType="DataGridCell">
    <Setter Property="Background"
            Value="{Binding State, Converter={x:Static l:Converters.CoupleStateConverter}}" />
                    </Style>

因此，轉換器根據狀態返回背景色（在我的示例中為int）。 這類似於您的需求。

如您所見，單元格的數據上下文是該行的值，因此我可以在示例中綁定到屬性狀態。 我假設對於該行同樣有效，因此數據上下文將是要在該行中顯示的項目。

Answer 2

您可以使用CollectionViewSource並按NumberOfOrder分組：XAML：

        <DataGrid ItemsSource="{Binding}" >
        <DataGrid.GroupStyle>
            <!-- Style for groups at top level. -->
            <GroupStyle>
                <GroupStyle.ContainerStyle>
                    <Style TargetType="{x:Type GroupItem}">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="{x:Type GroupItem}">
                                    <Expander IsExpanded="True">
                                        <Expander.Header>
                                            <DockPanel>
                                                <TextBlock FontWeight="Bold"
                                                           Text="{Binding Path=Name}" />
                                            </DockPanel>
                                        </Expander.Header>
                                        <Expander.Content>
                                            <ItemsPresenter />
                                        </Expander.Content>
                                    </Expander>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </GroupStyle.ContainerStyle>
            </GroupStyle>
        </DataGrid.GroupStyle>
    </DataGrid>

代碼背后：

 CollectionViewSource collectionViewSource = new CollectionViewSource();
        collectionViewSource.Source = new List<RowItem>()
            {
              new RowItem() {NumberOfOrder =1, Name ="kong foo" },
              new RowItem() {NumberOfOrder =1,Name ="asdf" },
              new RowItem() {NumberOfOrder =2,Name ="asdf" },
              new RowItem() {NumberOfOrder =3,Name ="foo"}
            };


        collectionViewSource.GroupDescriptions.Add(new PropertyGroupDescription("NumberOfOrder"));

        DataContext = collectionViewSource;

Answer 3

使用MultiDataTrigger基於a）訂單號和b）訂單的最后一行來更改背景。 您可能希望在模型中添加一個屬性，該屬性說明該行是否為該訂單的最后一行。

嘗試以下操作（未經測試）：

<Style.Triggers>
    <MultiDataTrigger>
        <MultiDataTrigger.Conditions>
            <Condition Binding="{Binding NumberOfOrder}" Value="1" />
            <Condition Binding="{Binding IsLastRow}" Value="True" />
        </MultiDataTrigger.Conditions>
        <Setter Property="Background" Value="Red" />
    </MultiDataTrigger>
    ...
</Style.Triggers>