How to optimize code for datagrid

Question

I would like to repeat this design in my application.

I wrote this code.

public class CellViewModel
{
    public string Background { get; set; }

    public string FontWeight { get; set; }

    public string Foreground { get; set; }

    public string Value { get; set; }
}

ViewModel for DataGridCell

---

public class PerformanceItemViewModel
{
    public CellViewModel Title { get; set; }

    public CellViewModel AllTrades { get; set; }

    public CellViewModel LongTrades { get; set; }

    public CellViewModel ShortTrades { get; set; }

    public CellViewModel BuyAndHold { get; set; }
}

---

public class PerformanceViewModel
{
    public PerformanceViewModel()
    {
        this.Items = new ObservableCollection<PerformanceItemViewModel>
            {
                new PerformanceItemViewModel
                    {
                        Title = new CellViewModel { Value = "Net Profit", FontWeight = "Bold", Foreground = "Black", Background = "White" },
                        AllTrades = new CellViewModel { Value = "-683,84", FontWeight = "Normal", Foreground = "Red", Background = "White" },
                        LongTrades = new CellViewModel { Value = "-683,84", FontWeight = "Normal", Foreground = "Red", Background = "White" },
                        ShortTrades = new CellViewModel { Value = "0,00", FontWeight = "Normal", Foreground = "Black", Background = "White" },
                        BuyAndHold = new CellViewModel { Value = "-2010,00", FontWeight = "Normal", Foreground = "Red", Background = "White" }
                    }
            };
    }

    public ObservableCollection<PerformanceItemViewModel> Items { get; set; }
}

I would like to optimize this code.

The main problem is how to inform DataGrid about the Background, FontWeight, Foreground?

---

<Grid>
    <datagrid:ThemedDataGrid AlternatingRowBackground="{Binding Background}"
                             AutoGenerateColumns="False"
                             GridLinesVisibility="None"
                             HeadersVisibility="Column"
                             IsHitTestVisible="False"
                             IsReadOnly="True"
                             ItemsSource="{Binding Performance.Items}">

        <datagrid:ThemedDataGrid.CellStyle>
            <Style TargetType="DataGridCell">
                <Setter Property="BorderThickness" Value="0" />
            </Style>
        </datagrid:ThemedDataGrid.CellStyle>

        <datagrid:ThemedDataGrid.Columns>
            <DataGridTextColumn Binding="{Binding Path=Title.Value}">
                <DataGridTextColumn.CellStyle>
                    <Style TargetType="DataGridCell">
                        <Setter Property="Background" Value="{Binding Path=Title.Background}" />
                        <Setter Property="FontWeight" Value="{Binding Path=Title.FontWeight}" />
                        <Setter Property="Foreground" Value="{Binding Path=Title.Foreground}" />
                    </Style>
                </DataGridTextColumn.CellStyle>
            </DataGridTextColumn>
            <DataGridTextColumn Header="All Trades" Binding="{Binding Path=AllTrades.Value}">
                <DataGridTextColumn.CellStyle>
                    <Style TargetType="DataGridCell">
                        <Setter Property="Background" Value="{Binding Path=AllTrades.Background}" />
                        <Setter Property="FontWeight" Value="{Binding Path=AllTrades.FontWeight}" />
                        <Setter Property="Foreground" Value="{Binding Path=AllTrades.Foreground}" />
                    </Style>
                </DataGridTextColumn.CellStyle>
            </DataGridTextColumn>
            <DataGridTextColumn Header="Long Trades" Binding="{Binding Path=LongTrades.Value}">
                <DataGridTextColumn.CellStyle>
                    <Style TargetType="DataGridCell">
                        <Setter Property="Background" Value="{Binding Path=LongTrades.Background}" />
                        <Setter Property="FontWeight" Value="{Binding Path=LongTrades.FontWeight}" />
                        <Setter Property="Foreground" Value="{Binding Path=LongTrades.Foreground}" />
                    </Style>
                </DataGridTextColumn.CellStyle>
            </DataGridTextColumn>
            <DataGridTextColumn Header="Short Trades" Binding="{Binding Path=ShortTrades.Value}">
                <DataGridTextColumn.CellStyle>
                    <Style TargetType="DataGridCell">
                        <Setter Property="Background" Value="{Binding Path=ShortTrades.Background}" />
                        <Setter Property="FontWeight" Value="{Binding Path=ShortTrades.FontWeight}" />
                        <Setter Property="Foreground" Value="{Binding Path=ShortTrades.Foreground}" />
                    </Style>
                </DataGridTextColumn.CellStyle>
            </DataGridTextColumn>
            <DataGridTextColumn Header="Buy And Hold" Binding="{Binding Path=BuyAndHold.Value}">
                <DataGridTextColumn.CellStyle>
                    <Style TargetType="DataGridCell">
                        <Setter Property="Background" Value="{Binding Path=BuyAndHold.Background}" />
                        <Setter Property="FontWeight" Value="{Binding Path=BuyAndHold.FontWeight}" />
                        <Setter Property="Foreground" Value="{Binding Path=BuyAndHold.Foreground}" />
                    </Style>
                </DataGridTextColumn.CellStyle>
            </DataGridTextColumn>
        </datagrid:ThemedDataGrid.Columns>
    </datagrid:ThemedDataGrid>
</Grid>

But unfortunately this code is very cumbersome.

Maybe you have some ideas how to improve it?

Answer 1

DataGrid in WPF supports grouping, please take a look on this article How to: Group, Sort, and Filter Data in the DataGrid Control . The same on MSDN is pretty similar to your issue.