c# - WPF TabItem HeaderTemplate -

sample code:

 <tabcontrol>     <tabitem>         <tabitem.header>             <stackpanel orientation="horizontal" margin="5">                 <image source="/wpftutorialsamples;component/images/bullet_blue.png" />                 <textblock text="blue" foreground="blue" />             </stackpanel>         </tabitem.header>         <label content="content goes here..." />     </tabitem>     <tabitem>         <tabitem.header>             <stackpanel orientation="horizontal" margin="5">                 <textblock text="red" foreground="red" />             </stackpanel>         </tabitem.header>     </tabitem>     <tabitem>         <tabitem.header>             <stackpanel orientation="horizontal" margin="5">                 <rectangle fill="red" width="20" height="16" />             </stackpanel>         </tabitem.header>     </tabitem> </tabcontrol> 

as can see, tabitem header stackpanel different content:

<tabitem.header>     <stackpanel orientation="horizontal" margin="5">      </stackpanel> </tabitem.header> 

how can put in template don't have duplicate stackpanel code?

trying this:

<tabcontrol>     <tabcontrol.resources>         <style targettype="tabitem">         <setter property="headertemplate">             <setter.value>             <datatemplate>             <stackpanel orientation="horizontal" margin="5">                 <contentpresenter content="{templatebinding contentcontrol.content}"                             contentstringformat="{templatebinding contentcontrol.contentstringformat}"                               contenttemplate="{templatebinding contentcontrol.contenttemplate}"                              horizontalalignment="{templatebinding control.horizontalcontentalignment}"                              recognizesaccesskey="true"                              snapstodevicepixels="{templatebinding uielement.snapstodevicepixels}"                               verticalalignment="{templatebinding control.verticalcontentalignment}">                 </contentpresenter>             </stackpanel>             </datatemplate>             </setter.value>         </setter>         </style>     </tabcontrol.resources>     <tabitem>         <tabitem.header>             <!-- ??? -->             <textblock text="x" />             <textblock text="y" />         </tabitem.header> </tabcontrol> 

results in:

• "the property 'header' set more once."
• "the object 'object' has child , cannot add 'textblock'. 'object' can accept 1 child."

the thing tree headers have common margin="5". in second , third tab stackpanel irrelavant, because has 1 child. can achive either using headertemplate or itemcontainerstyle:

<tabcontrol>     <tabcontrol.itemcontainerstyle>         <style targettype="tabitem">             <setter property="padding" value="5" />         </style>     </tabcontrol.itemcontainerstyle>      <tabitem>         <tabitem.header>             <stackpanel orientation="horizontal">                 <image source="/wpftutorialsamples;component/images/bullet_blue.png" />                 <textblock text="blue" foreground="blue" />             </stackpanel>         </tabitem.header>         <label content="content goes here..." />     </tabitem>     <tabitem>         <tabitem.header>             <textblock text="red" foreground="red" />         </tabitem.header>     </tabitem>     <tabitem>         <tabitem.header>             <rectangle fill="red" width="20" height="16" />         </tabitem.header>     </tabitem> </tabcontrol> 

now don't repeat anything.

you extract properties of stackpanel style avoid repeating them:

    <tabitem.header>         <stackpanel style="{staticresource tabheaderpanel}">             <image source="/wpftutorialsamples;component/images/bullet_blue.png" />             <textblock text="blue" foreground="blue" />         </stackpanel>     </tabitem.header>      <tabitem.header>         <stackpanel style="{staticresource tabheaderpanel}">             <textblock text="red" foreground="red" />         </stackpanel>     </tabitem.header>      <tabitem.header>         <stackpanel style="{staticresource tabheaderpanel}">             <rectangle fill="red" width="20" height="16" />         </stackpanel>     </tabitem.header> 

if want more code reuse, should consider mvvm-like approach:

<tabcontrol itemssource="{binding tabs}">     <tabcontrol.itemcontainerstyle>         <style targettype="tabitem">             <setter property="headertemplate">                 <setter.value>                     <datatemplate datatype="local:tabviewmodel">                          <stackpanel orientation="horizontal" margin="5">                             <image x:name="icon" source="{binding icon, converter={staticresource uritobitmapsourceconverter}}" />                             <rectangle x:name="colorrect" height="16" width="16" fill="{binding color}" visibility="collapsed" />                             <textblock text="{binding title}" foreground="{binding color}"/>                         </stackpanel>                          <datatemplate.triggers>                             <datatrigger binding="{binding icon}" value="{x:null}">                                 <setter targetname="icon" property="visibility" value="collapsed" />                                 <setter targetname="colorrect" property="visibility" value="visible" />                             </datatrigger>                         </datatemplate.triggers>                     </datatemplate>                 </setter.value>             </setter>         </style>     </tabcontrol.itemcontainerstyle> </tabcontrol> 

if can't use single datatemplate headers, can use headertemplateselector