Datagrid RowDetailsTemplate Stretchs RowBackground Gradient Brushes

Question

I am in the process of customizing a wpf datagrid, the issue that I am having is that I have set both RowStyle and RowDetails Template, in the Row style as below I simply set the Row Background to some orange gradient brush:

<DataGrid.RowStyle>
    <Style TargetType="{x:Type DataGridRow}">
        <Setter Property="Background" Value="White" />
        <Style.Triggers>
             ...
            <Trigger  Property="IsSelected" Value="True">
                <Setter Property="Height" Value="24" />
                    <Setter Property="Background">
                        <Setter.Value>
                            <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1" Opacity="0.9">
                                <GradientStop Color="White" Offset="0.0" />
                                <GradientStop Color="Orange" Offset="0.2" />
                                <GradientStop Color="#FF4500" Offset="0.8" />
                                <GradientStop Color="#EE4000" Offset="0.9"/>
                                <GradientStop Color="White" Offset="1.0" />
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
            </Trigger>
        </Style.Triggers>
    </Style>

This works all fine until I decide to set RowDetailsTemplate, which when the row is selected in the Datagrid, it will cause the Gradient brush to stretch to now fit the Details section too, to the point where you only see the faded orange at the top. Now I am assuming this is happening because the Row Details Template is part of the row.
However I was wandering if there is away I can stop this from happening?
One work around was to set the Cell Style, however this cause new issues such as not the whole row is coloured, i.e. at the end of the grid there is some empty space, this doesn't get filled in when you set the CellStyle.

saurabh.mridul saurabh.mridul · Accepted Answer · 2013-10-29T06:45:17

You can explicitly set the background color of your ContentControl lies in RowDetailsTemplate.

<DataGrid.RowDetailsTemplate>           <DataTemplate>
              <Border Name="RowDetailsTemplateBorder" BorderBrush="#3B73B9" BorderThickness="2" Margin="1" >
                 <Grid Name="RowDetailsTemplateGrid" Height="180" Background="White">
                          <Image Height="100" Source="{Binding Image}" />
    </Grid>
               </Border>
        </DataTemplate>
    </DataGrid.RowDetailsTemplate>

Datagrid RowDetailsTemplate Stretchs RowBackground Gradient Brushes

1 Answers