xaml - WPF DataGrid Alternating Column Colors -

i attempting create wpf datagrid has alternating background colors. using datagridtemplatecolumn columns , setting cellstyle background color not satisfied result:

<datagridtemplatecolumn.cellstyle>     <style targettype="datagridcell">         <style.triggers>             <trigger property="isselected" value="false">                 <setter property="background" value="#fff7f7f7" />             </trigger>         </style.triggers>     </style> </datagridtemplatecolumn.cellstyle> 

i modeling datagrid off of existing winforms project , attempting duplicate look. facing 2 problems:

1. the different column backgrounds attached cells , not properties of grid itself. unused rows not show these backgrounds. empty grid show columns , backgrounds.

2. the column background should extend under transparent expander header. believe if (1) satisfied, work well.

can these goals achieved datagrid directly? if not, workarounds might solve problem; perhaps somehow drawing column backgrounds directly on datagrids panel (datagridrowspresenter) , supporting column resize?

any ideas? thanks!

note: question similar , unanswered: wpf datagrid template column edit event , alternating column color

---

update:

this update based on proposed answer @lesliedavies gets me of way there. have 2 issues solution:

1. i'm not able star size datagrid columns. if attempt star size, columns grow continuously without bound.

2. if remove datagrid.groupstyle xaml, resizing no longer works correctly. rectangles grow correctly, when shrinking column rectangle shrinks grid columns not shrink properly.

xaml:

<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">     <grid>         <grid.columndefinitions>             <columndefinition width="auto" />             <columndefinition width="auto" />             <columndefinition width="auto" />         </grid.columndefinitions>         <rectangle name="rect0" grid.column="0" horizontalalignment="left" margin="-1,0,0,0" fill="#ffcacaca" />         <rectangle name="rect1" grid.column="1" horizontalalignment="left" margin="-1,0,0,0" fill="white"/>         <rectangle name="rect2" grid.column="2" horizontalalignment="left" margin="-1,0,0,0" fill="#ffcacaca"/>         <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">             <datagrid.groupstyle>                 <groupstyle>                     <groupstyle.containerstyle>                         <style targettype="{x:type groupitem}">                             <setter property="template">                                 <setter.value>                                     <controltemplate targettype="{x:type groupitem}">                                         <expander header="{binding}">                                             <itemspresenter />                                         </expander>                                     </controltemplate>                                 </setter.value>                             </setter>                         </style>                     </groupstyle.containerstyle>                 </groupstyle>             </datagrid.groupstyle>             <datagrid.columns>                 <datagridtextcolumn header="first name" minwidth="100" binding="{binding firstname}"/>                 <datagridtextcolumn header="last name"  minwidth="100" binding="{binding lastname}"/>                 <datagridtextcolumn header="age"        minwidth="100" binding="{binding age}"/>             </datagrid.columns>         </datagrid>     </grid> </window> 

code behind:

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; } 

this not elegant solution gives view want.

1. make background of datagrid "transparent".
2. make rowbackground of datagrid "transparent".
3. place datagrid in grid.
4. create many columndefinitions in grid have columns in datagrid.
5. create many rectangles have columns. place them in grid in each column. make horizontalalignment "left". color them "fill".
6. for datagrid, add layoutchanged event.

7. in code layoutchanged event, update width of rectangles. ex:

   rectangle.width = datagrid.columns[0].width.desiredvalue;

8. give 1st rectangle margin of (7,0,0,0) due datagrid styling.