xaml - Multilevel column header for DataGrid in WPF -

i have datagrid needs this:

as can see, there multiple columns multi-level column headers, span multiple columns.

i need in wpf, kindly provide xaml solutions create multi level column headers.

as far know, standard datagrid not support it, need alternatives. can offer use of grid capabilities, such as: grid.rowdefinitions, grid.columndefinitions. illustrate feature, created sample, need complete:

<window x:class="multiheaderdatagrid.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"     windowstartuplocation="centerscreen">  <window.resources>     <style targettype="{x:type border}">         <setter property="background" value="bisque" />         <setter property="textblock.fontsize" value="14" />         <setter property="borderbrush" value="black" />         <setter property="borderthickness" value="1" />         <setter property="horizontalalignment" value="stretch" />     </style> </window.resources>  <grid>     <grid.rowdefinitions>         <rowdefinition height="auto"/>         <rowdefinition height="auto"/>         <rowdefinition height="auto"/>         <rowdefinition height="2*"/>     </grid.rowdefinitions>      <grid grid.row="0">                          <border grid.column="1" grid.columnspan="4">             <textblock text="main application" textalignment="center" />         </border>     </grid>      <grid grid.row="1">         <grid.columndefinitions>             <columndefinition width="*" />             <columndefinition width="*" />         </grid.columndefinitions>          <border grid.column="0">                             <textblock grid.column="1" text="experiment 1" textalignment="center" />                      </border>          <border grid.column="1">             <textblock grid.column="1" text="experiment 2" textalignment="center" />         </border>     </grid>      <grid grid.row="2">         <grid.columndefinitions>             <columndefinition width="*" />             <columndefinition width="*" />             <columndefinition width="*" />             <columndefinition width="*" />         </grid.columndefinitions>          <border grid.column="0">             <textblock grid.column="1" text="mode 1" textalignment="center" />         </border>          <border grid.column="1">             <textblock grid.column="1" text="mode 2" textalignment="center" />         </border>          <border grid.column="2">             <textblock grid.column="1" text="mode 1" textalignment="center" />         </border>          <border grid.column="4">             <textblock grid.column="1" text="mode 2" textalignment="center" />         </border>     </grid>      <grid grid.row="3">         <grid.columndefinitions>             <columndefinition width="*" />             <columndefinition width="*" />             <columndefinition width="*" />             <columndefinition width="*" />         </grid.columndefinitions>          <border grid.column="0">             <textblock grid.column="1" text="mode 1" textalignment="center" />         </border>          <border grid.column="1">             <textblock grid.column="1" text="mode 2" textalignment="center" />         </border>          <border grid.column="2">             <textblock grid.column="1" text="mode 1" textalignment="center" />         </border>          <border grid.column="4">             <textblock grid.column="1" text="mode 2" textalignment="center" />         </border>     </grid>      <datagrid name="datagrid1" autogeneratecolumns="false" grid.row="3" rowheaderwidth="10" loaded="datagrid1_loaded">         <datagrid.columns>             <datagridtextcolumn x:name="column1" binding="{binding name}" header="column 1" width="100" />             <datagridtextcolumn x:name="column2" binding="{binding age}"  header="column 2" width="80" />             <datagridtextcolumn x:name="column3" binding="{binding sample}" header="column 3" width="80" />             <datagridtextcolumn x:name="column4" binding="{binding sample}" header="column 4" width="*" />         </datagrid.columns>     </datagrid> </grid> </window> 

output

if want, can set columndefinition width of grid, datagrid column:

<grid.columndefinitions>     <columndefinition width="{binding elementname=sampledatagrid, path=rowheaderwidth}" />     <columndefinition width="{binding elementname=column1, path=actualwidth}" />     <columndefinition width="{binding elementname=column2, path=actualwidth}" /> </grid.columndefinitions>    

also, need define same style grid header , datagrid.