locked
Bind DataGridTemplateColumn.CellTemplate background color to current row color RRS feed

  • Question

  •  am using a DataGrid and have custom DataGrid.Columns:

            <DataGrid Name="dgVATINS" ...>
                <DataGrid.Columns>
                    <!--VATIN-->
                    <DataGridTextColumn Header="VATIN" Binding="{Binding Body}"/>
                    <!--More DataGridTextColumns-->
    
                    <!--VATIN.LastResult-->
                    <DataGridTemplateColumn Header="Is Valid" SortMemberPath="LastResult.IsValid">
                        <DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <Grid Name="gridContent" Margin="-2,-1,-2,-1" Background="White">
                                    <!--ToDo: Content-->
                                </Grid>
                            </DataTemplate>
                        </DataGridTemplateColumn.CellTemplate>
                    </DataGridTemplateColumn>
                    <!--More DataGridTemplateColumns-->
                </DataGrid.Columns>
            </DataGrid>

    I set the AlternatingRowBackground from the DataGrid to red and here is a screenshot: enter image description here

    My problem is: How can I bind the gridContent.Background to the row background. It should look like this:

    enter image description here

    Currently the bg color is always white, but what can I do that the bg color is red if the AlternationIndex is 1 and what can I do that the bg color is blue if the row is selected?

    EDIT: I don't want to set the background to transparent. That's not the finished design. The problem is: There is a grid in the grid and if I set the background to transparent it looks like this:

    It looks weird if you select the cell or the row because of the Border/VerticalGridLines


    Wednesday, November 19, 2014 12:57 PM

Answers

  • You could bind to the Background property of the corresponding DataGridRow using a RelativeSource and use a DataTrigger to reset the background when the row is selected:

    <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                  <Grid Name="gridContent" Margin="-2,-1,-2,-1" Background="{Binding Path=Background, RelativeSource={RelativeSource AncestorType=DataGridRow}}">
                    <!--ToDo: Content-->
                  </Grid>
                  <DataTemplate.Triggers>
                    <DataTrigger Binding="{Binding Path=IsSelected, RelativeSource={RelativeSource AncestorType=DataGridRow}}" Value="True">
                      <Setter Property="Background" TargetName="gridContent" Value="Transparent"/>
                    </DataTrigger>
                  </DataTemplate.Triggers>
                </DataTemplate>
              </DataGridTemplateColumn.CellTemplate>

    Please remember to mark helpful posts as answer and/or helpful.

     

    Wednesday, November 19, 2014 1:25 PM

All replies

  • I would just set it transparent rather so you can see the row background.

    <!--VATIN.LastResult--> <DataGridTemplateColumn Header="Is Valid" SortMemberPath="LastResult.IsValid"> <DataGridTemplateColumn.CellTemplate> <DataTemplate> <Grid Name="gridContent" Margin="-2,-1,-2,-1"

    Background="Transparent"> <!--ToDo: Content--> </Grid> </DataTemplate> </DataGridTemplateColumn.CellTemplate> </DataGridTemplateColumn>


    Wednesday, November 19, 2014 1:02 PM
  • You can simply remove your gridContent Background, like this:

            <DataGrid Name="dgVATINS" ...>
                <DataGrid.Columns>
                    <!--VATIN-->
                    <DataGridTextColumn Header="VATIN" Binding="{Binding Body}"/>
                    <!--More DataGridTextColumns-->
    
                    <!--VATIN.LastResult-->
                    <DataGridTemplateColumn Header="Is Valid" SortMemberPath="LastResult.IsValid">
                        <DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <Grid Name="gridContent" Margin="-2,-1,-2,-1" >
                                    <!--ToDo: Content-->
                                </Grid>
                            </DataTemplate>
                        </DataGridTemplateColumn.CellTemplate>
                    </DataGridTemplateColumn>
                    <!--More DataGridTemplateColumns-->
                </DataGrid.Columns>
            </DataGrid>

    That way, the color used will be the one of the DataGridRow.


    Emiliano Musso - MVP Visual Basic

    Wednesday, November 19, 2014 1:07 PM
  • You could bind to the Background property of the corresponding DataGridRow using a RelativeSource and use a DataTrigger to reset the background when the row is selected:

    <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                  <Grid Name="gridContent" Margin="-2,-1,-2,-1" Background="{Binding Path=Background, RelativeSource={RelativeSource AncestorType=DataGridRow}}">
                    <!--ToDo: Content-->
                  </Grid>
                  <DataTemplate.Triggers>
                    <DataTrigger Binding="{Binding Path=IsSelected, RelativeSource={RelativeSource AncestorType=DataGridRow}}" Value="True">
                      <Setter Property="Background" TargetName="gridContent" Value="Transparent"/>
                    </DataTrigger>
                  </DataTemplate.Triggers>
                </DataTemplate>
              </DataGridTemplateColumn.CellTemplate>

    Please remember to mark helpful posts as answer and/or helpful.

     

    Wednesday, November 19, 2014 1:25 PM