wpf - TabControl - Align TabItems correctly if free space dominates -

i have customized tabcontrol:

<window x:class="wpfapplication2.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">     <window.resources>       <style targettype="tabcontrol">          <setter property="background" value="transparent" />          <setter property="borderthickness" value="0" />          <setter property="tabstripplacement" value="bottom" />          <setter property="template">             <setter.value>                <controltemplate targettype="tabcontrol">                   <grid>                      <grid.rowdefinitions>                         <rowdefinition height="*"/>                         <rowdefinition height="auto"/>                      </grid.rowdefinitions>                       <grid grid.row="1" >                         <grid.columndefinitions>                            <columndefinition width="auto"/>                            <columndefinition width="*"/>                         </grid.columndefinitions>                          <tabpanel grid.column="0" panel.zindex="1" isitemshost="true" background="transparent" />                          <itemscontrol grid.column="1">                            <itemscontrol.items>                               <button height="50">dominates</button>                            </itemscontrol.items>                         </itemscontrol>                      </grid>                       <contentpresenter grid.row="0"  contentsource="selectedcontent" />                   </grid>                </controltemplate>             </setter.value>          </setter>       </style>        <style targettype="{x:type tabitem}">          <setter property="template">             <setter.value>                <controltemplate targettype="{x:type tabitem}">                   <border background="lightcyan" padding="20,0">                      <textblock snapstodevicepixels="true" text="{templatebinding header}" verticalalignment="stretch" horizontalalignment="stretch" />                   </border>                </controltemplate>             </setter.value>          </setter>       </style>    </window.resources>     <tabcontrol>       <tabitem header="test 123">          <textblock>1</textblock>       </tabitem>       <tabitem header="test 456">          <textblock>2</textblock>       </tabitem>    </tabcontrol> </window> 

beside tabitems other controls placed - higher tabitems. how can stretch tabitems , place textbox in middle (so fill area)? can adjust padding dynamically?

http://goo.gl/xcyoy3 red marked area should filled , textbox centered. possible?

thx :)

solution

<window x:class="wpfapplication2.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">     <window.resources>         <style targettype="tabcontrol">             <setter property="background" value="transparent" />             <setter property="borderthickness" value="0" />             <setter property="tabstripplacement" value="bottom" />             <setter property="template">                 <setter.value>                     <controltemplate targettype="tabcontrol">                         <grid>                             <grid.rowdefinitions>                                 <rowdefinition height="*"/>                                 <rowdefinition height="auto"/>                             </grid.rowdefinitions>                             <grid.columndefinitions>                                 <columndefinition width="auto"/>                                 <columndefinition width="*"/>                             </grid.columndefinitions>                             <contentpresenter grid.columnspan="2" grid.column="0" grid.row="0" contentsource="selectedcontent" />                             <tabpanel panel.zindex="1" grid.row="1"  grid.column="0" horizontalalignment="stretch" verticalalignment="stretch" isitemshost="true" background="transparent" />                             <itemscontrol grid.row="1" grid.column="1" verticalalignment="bottom">                                 <itemscontrol.itemcontainerstyle>                                     <style targettype="frameworkelement">                                         <setter property="horizontalalignment" value="stretch"></setter>                                     </style>                                 </itemscontrol.itemcontainerstyle>                                 <button background="lightgray" height="70" borderthickness="0">dominates</button>                             </itemscontrol>                         </grid>                     </controltemplate>                 </setter.value>             </setter>         </style>         <style targettype="{x:type tabitem}">             <setter property="template">                 <setter.value>                     <controltemplate targettype="{x:type tabitem}">                         <grid background="lightcyan" height="{binding relativesource={relativesource findancestor, ancestortype={x:type tabpanel}}, path=actualheight}">                             <textblock snapstodevicepixels="true" horizontalalignment="center" verticalalignment="center" margin="20,0" text="{templatebinding header}" ></textblock>                         </grid>                     </controltemplate>                 </setter.value>             </setter>         </style>     </window.resources>      <tabcontrol>         <tabitem header="test 123">             <textblock >1</textblock>         </tabitem>         <tabitem header="test 456">             <textblock >2</textblock>         </tabitem>     </tabcontrol> </window> 

i have edited template per image ..please run xaml code separately.

<window.resources> <style targettype="tabcontrol">         <setter property="background" value="transparent" />         <setter property="borderthickness" value="0" />         <setter property="tabstripplacement" value="bottom" />         <setter property="template">             <setter.value>                 <controltemplate targettype="tabcontrol">                     <grid>                         <grid.rowdefinitions>                             <rowdefinition height="*"/>                             <rowdefinition height="50"/>                         </grid.rowdefinitions>                         <grid.columndefinitions>                             <columndefinition width="auto"/>                             <columndefinition width="*"/>                         </grid.columndefinitions>                         <contentpresenter grid.columnspan="2" height="50" grid.row="0" horizontalalignment="center" verticalalignment="center"  contentsource="selectedcontent" />                         <grid grid.row="1"  grid.column="0" background="lightcyan">                             <tabpanel panel.zindex="1" horizontalalignment="center" verticalalignment="center" isitemshost="true" background="transparent" />                         </grid>                         <itemscontrol grid.row="1"  verticalalignment="bottom"  grid.column="1">                             <itemscontrol.itemcontainerstyle>                                 <style targettype="frameworkelement">                                     <setter property="horizontalalignment" value="stretch"></setter>                                     <setter property="height" value="50"></setter>                                 </style>                             </itemscontrol.itemcontainerstyle>                             <button background="lightgray"  borderthickness="0">dominates</button>                         </itemscontrol>                     </grid>                 </controltemplate>             </setter.value>         </setter>     </style>     <style targettype="{x:type tabitem}">         <setter property="template">             <setter.value>                 <controltemplate targettype="{x:type tabitem}">                     <grid background="lightcyan" >                         <textblock snapstodevicepixels="true" margin="5,0,5,0" >                         <contentpresenter x:name="contentsite"  horizontalalignment="center" verticalalignment="center"  contentsource="header"  recognizesaccesskey="true"/>                         </textblock>                     </grid>                 </controltemplate>             </setter.value>         </setter>     </style> </window.resources>   <tabcontrol>     <tabitem header="test 123">         <textblock >1</textblock>     </tabitem>     <tabitem header="test 456">         <textblock >2</textblock>     </tabitem> </tabcontrol> 

and output above code http://prntscr.com/2yc51f

update

<style targettype="tabcontrol">         <setter property="background" value="transparent" />         <setter property="borderthickness" value="0" />         <setter property="tabstripplacement" value="bottom" />         <setter property="template">             <setter.value>                 <controltemplate targettype="tabcontrol">                     <grid>                         <grid.rowdefinitions>                             <rowdefinition height="*"/>                             <rowdefinition height="50"/>                         </grid.rowdefinitions>                         <grid.columndefinitions>                             <columndefinition width="auto"/>                             <columndefinition width="*"/>                         </grid.columndefinitions>                         <contentpresenter grid.columnspan="2" height="50" grid.row="0" horizontalalignment="center" verticalalignment="center"  contentsource="selectedcontent" />                         <tabpanel panel.zindex="1" grid.row="1"  grid.column="0" horizontalalignment="center" verticalalignment="center" isitemshost="true" background="transparent" />                         <itemscontrol grid.row="1"  verticalalignment="bottom"  grid.column="1">                             <itemscontrol.itemcontainerstyle>                                 <style targettype="frameworkelement">                                     <setter property="horizontalalignment" value="stretch"></setter>                                     <setter property="height" value="50"></setter>                                 </style>                             </itemscontrol.itemcontainerstyle>                             <button background="lightgray"  borderthickness="0">dominates</button>                         </itemscontrol>                     </grid>                 </controltemplate>             </setter.value>         </setter>     </style>     <style targettype="{x:type tabitem}">         <setter property="template">             <setter.value>                 <controltemplate targettype="{x:type tabitem}">                     <grid background="lightcyan"  height="50">                         <textblock snapstodevicepixels="true" horizontalalignment="center" verticalalignment="center" margin="5,0,5,0"  text="{templatebinding header}" ></textblock>                     </grid>                 </controltemplate>             </setter.value>         </setter>     </style>