title: WPF DataGrid Alternating Column Colors
body: <p>I am attempting to create a WPF DataGrid that has alternating background colors. I am currently using DataGridTemplateColumn columns and setting the CellStyle background color but am not fully satisfied with this result:</p>
  
  <p><img src="https://i.stack.imgur.com/WNqT0.jpg" alt="Simplified Example WPF DataGrid with Alternating Column Colors"></p>
  
  <pre><code>&lt;DataGridTemplateColumn.CellStyle&gt;
      &lt;Style TargetType="DataGridCell"&gt;
          &lt;Style.Triggers&gt;
              &lt;Trigger Property="IsSelected" Value="False"&gt;
                  &lt;Setter Property="Background" Value="#FFF7F7F7" /&gt;
              &lt;/Trigger&gt;
          &lt;/Style.Triggers&gt;
      &lt;/Style&gt;
  &lt;/DataGridTemplateColumn.CellStyle&gt;
  </code></pre>
  
  <p>I am modeling my DataGrid off of an existing WinForms project and am attempting to duplicate its look.  I am facing two problems:</p>
  
  <ol>
  <li><p>The different column backgrounds are attached to the cells and are not properties of grid itself.  Thus unused rows do not show these backgrounds. I would like even an empty grid to show the columns and backgrounds.</p></li>
  <li><p>The column background should extend under the transparent Expander header. I believe that if (1) is satisfied, this would work as well.</p></li>
  </ol>
  
  <p>Can these goals be achieved with the DataGrid directly?  If not, what workarounds might solve the problem; perhaps somehow drawing the column backgrounds directly on the DataGrids panel (DataGridRowsPresenter) and supporting column resize?</p>
  
  <p>Any ideas?  Thanks!</p>
  
  <p>NOTE: This question is similar and unanswered: 
  <a href="https://stackoverflow.com/questions/3875637/wpf-datagrid-template-column-edit-event-and-alternating-column-color">WPF Datagrid Template column edit event and alternating column color</a>  </p>
  
  <hr>
  
  <h1>Update:</h1>
  
  <p>This update is based on the proposed answer by @LeslieDavies which gets me most of the way there.  I have two issues with this solution:</p>
  
  <ol>
  <li><p>I'm not able to <em>star size</em> the DataGrid columns. If I attempt to star size, the columns grow continuously without bound.</p></li>
  <li><p>If I remove the <code>DataGrid.GroupStyle</code> from the XAML, the resizing no longer works correctly.  The Rectangles grow correctly, but when shrinking the column the Rectangle shrinks but the Grid columns do not shrink properly.</p></li>
  </ol>
  
  <p>XAML:  </p>
  
  <pre><code>&lt;Window x:Class="GridColumnColors.MainWindow"
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          Title="MainWindow" Height="350" Width="525" Background="Black"&gt;
      &lt;Grid&gt;
          &lt;Grid.ColumnDefinitions&gt;
              &lt;ColumnDefinition Width="Auto" /&gt;
              &lt;ColumnDefinition Width="Auto" /&gt;
              &lt;ColumnDefinition Width="Auto" /&gt;
          &lt;/Grid.ColumnDefinitions&gt;
          &lt;Rectangle Name="Rect0" Grid.Column="0" HorizontalAlignment="Left" Margin="-1,0,0,0" Fill="#FFCACACA" /&gt;
          &lt;Rectangle Name="Rect1" Grid.Column="1" HorizontalAlignment="Left" Margin="-1,0,0,0" Fill="White"/&gt;
          &lt;Rectangle Name="Rect2" Grid.Column="2" HorizontalAlignment="Left" Margin="-1,0,0,0" Fill="#FFCACACA"/&gt;
          &lt;DataGrid Name="DataGridStudents"  AutoGenerateColumns="False" Visibility="Visible" Grid.ColumnSpan="4" ItemsSource="{Binding StudentsCollectionView}"
                      SelectionMode="Extended" GridLinesVisibility="None" RowHeaderWidth="0"  RowBackground="Transparent"
                      CanUserResizeRows="False" IsReadOnly="True" Background="Transparent" LayoutUpdated="Students_LayoutUpdated"&gt;
              &lt;DataGrid.GroupStyle&gt;
                  &lt;GroupStyle&gt;
                      &lt;GroupStyle.ContainerStyle&gt;
                          &lt;Style TargetType="{x:Type GroupItem}"&gt;
                              &lt;Setter Property="Template"&gt;
                                  &lt;Setter.Value&gt;
                                      &lt;ControlTemplate TargetType="{x:Type GroupItem}"&gt;
                                          &lt;Expander Header="{Binding}"&gt;
                                              &lt;ItemsPresenter /&gt;
                                          &lt;/Expander&gt;
                                      &lt;/ControlTemplate&gt;
                                  &lt;/Setter.Value&gt;
                              &lt;/Setter&gt;
                          &lt;/Style&gt;
                      &lt;/GroupStyle.ContainerStyle&gt;
                  &lt;/GroupStyle&gt;
              &lt;/DataGrid.GroupStyle&gt;
              &lt;DataGrid.Columns&gt;
                  &lt;DataGridTextColumn Header="First Name" MinWidth="100" Binding="{Binding FirstName}"/&gt;
                  &lt;DataGridTextColumn Header="Last Name"  MinWidth="100" Binding="{Binding LastName}"/&gt;
                  &lt;DataGridTextColumn Header="Age"        MinWidth="100" Binding="{Binding Age}"/&gt;
              &lt;/DataGrid.Columns&gt;
          &lt;/DataGrid&gt;
      &lt;/Grid&gt;
  &lt;/Window&gt;
  </code></pre>
  
  <p>Code Behind:</p>
  
  <pre><code>private void Students_LayoutUpdated(object sender, EventArgs e)
  {
      Rect0.Width = DataGridStudents.Columns[0].ActualWidth+3;
      Rect1.Width = DataGridStudents.Columns[1].ActualWidth+0;
      Rect2.Width = DataGridStudents.Columns[2].ActualWidth+1;
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/6r15n.jpg" alt="DataGrid With Alternating Column Colors Updated"></p>