Search code examples
wpfxamldatagridstyling

Give specific columns different background colours datagrid wpf


in my Wpf Project I have a datagrid:

<DataGrid x:Name="Tasks" CanUserDeleteRows="True" IsReadOnly="False" AutoGenerateColumns="False" HorizontalAlignment="Left" Height="413" VerticalAlignment="Top" Width="1100" Background="Transparent" HorizontalGridLinesBrush="Transparent" VerticalGridLinesBrush="Transparent" RowBackground="#202020" AlternatingRowBackground="#262626">
<DataGrid.Columns>
    <DataGridTextColumn Header="..." Binding="{Binding ..., UpdateSourceTrigger=PropertyChanged}"/>
    <DataGridTextColumn Header="...="{Binding ..., UpdateSourceTrigger=PropertyChanged}"/>
    <DataGridTextColumn Header="..." Binding="{Binding ..., UpdateSourceTrigger=PropertyChanged}"/>
    <DataGridTextColumn Header="..." Binding="{Binding ..., UpdateSourceTrigger=PropertyChanged}"/>
    <DataGridTextColumn Header="Colour" Binding="{Binding Colour, UpdateSourceTrigger=PropertyChanged}"/>
    <DataGridTextColumn Header="..." Binding="{Binding ..., UpdateSourceTrigger=PropertyChanged}"/>
    <DataGridTextColumn Header="..." Binding="{Binding ..., UpdateSourceTrigger=PropertyChanged}"/>
    <DataGridTextColumn Header="..." Binding="{Binding ..., UpdateSourceTrigger=PropertyChanged}"/>
    <DataGridTextColumn Header="..." Binding="{Binding ..., Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
    <DataGridTemplateColumn Header="...">
        <DataGridTemplateColumn.CellTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <Button Click="Start_Task_Click">
                        <materialDesign:PackIcon Kind="Play" Foreground="White"/>
                    </Button>
                    <Button Margin="5,0,0,0" Click="Stop_Button_Click">
                        <materialDesign:PackIcon Kind="Stop" Foreground="White"/>
                    </Button>
                    <Button Margin="5,0,0,0" Click="Edit_Task">
                        <materialDesign:PackIcon Kind="Pencil" Foreground="White"/>
                    </Button>
                    <Button Margin="5,0,0,0" Click="Delete_Button_Click">
                        <materialDesign:PackIcon Kind="Delete" Foreground="White"/>
                    </Button>
                </StackPanel>
            </DataTemplate>
        </DataGridTemplateColumn.CellTemplate>
    </DataGridTemplateColumn>
</DataGrid.Columns>

How would I be able to achieve something like this. I am sorry if this is an easy question, I am terrible at adding styles to anything. I want to make it so that 1 (or 2) specific columns in the datagrid have a different background compared to the other ones, also, would it matter if I kept the Row Background="" & AlternatingRowBackground=""? Any help would be appreciated, thanks in advance!


Solution

  • You could define a CellStyle for the column that you want to change the background of:

    <DataGridTextColumn ...>
        <DataGridTextColumn.CellStyle>
            <Style TargetType="DataGridCell">
                <Setter Property="Background" Value="Red" />
            </Style>
        </DataGridTextColumn.CellStyle>
    </DataGridTextColumn>