c# - Style at User Control strange behavior -

such strange thing happens here. i'm using wpf xaml, , created user control, kind textbox image in right upper corner.

here xaml code of control:

<usercontrol x:class="stirnradprogramm.classes.controls.textboxwithimage"          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"          xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"           xmlns:d="http://schemas.microsoft.com/expression/blend/2008"           xmlns:local="clr-namespace:stirnradprogramm.classes.controls"          x:name="parent"> <grid datacontext="{binding elementname=parent}" margin="0">     <grid.columndefinitions>         <columndefinition width="1*"/>         <columndefinition width="15"/>     </grid.columndefinitions>     <grid.rowdefinitions>         <rowdefinition height="15"/>         <rowdefinition height="1*"/>     </grid.rowdefinitions>     <textbox  grid.column="0" grid.row="0" grid.rowspan="2" grid.columnspan="2" keydown="textbox_keydown" ></textbox>     <stackpanel grid.column="1" margin="0,3,3,0">         <image grid.column="1" margin="0,2,0,0" grid.row="0" mousedown="image_mousedown" >             <image.style>                 <style targettype="image">                     <style.triggers>                         <datatrigger binding="{binding path=state}" value="true">                             <setter property="source" value="{binding lockedimgpath}"></setter>                         </datatrigger>                         <datatrigger binding="{binding path=state}" value="false">                             <setter property="source" value="{binding unlockedimgpath}"></setter>                         </datatrigger>                     </style.triggers>                 </style>             </image.style>         </image>     </stackpanel> </grid> 

now i'm using in main window:

<grid>     <grid.columndefinitions>         <columndefinition width="1*"/>         <columndefinition width="1*"/>     </grid.columndefinitions>     <grid.rowdefinitions>         <rowdefinition height="1*"></rowdefinition>     </grid.rowdefinitions>     <tbwi:textboxwithimage style="{staticresource textboxwithimagestyle}" height="27" margin="3" state="{binding lockpressed}" grid.column="0" grid.row="1" />     <textbox style="{staticresource textboxstyle}" grid.column="1" grid.row="1"></textbox> </grid> 

as see, i'm using here 2 different styles:

<style targettype="tbwi:textboxwithimage" x:key="textboxwithimagestyle">     <setter property="height" value="27"></setter>     <setter property="margin" value="3"></setter>     <setter property="verticalcontentalignment" value="center"></setter> </style> <style targettype="textbox" x:key="textboxstyle">     <setter property="height" value="27"></setter>     <setter property="margin" value="3"></setter>     <setter property="verticalcontentalignment" value="center"></setter> </style> 

styles seems same, visual result different:

and more interesting, when throw away style user control , write margin , height property manually, result expecting, same size:

<tbwi:textboxwithimage  height="27" margin="3" state="{binding lockpressed}" grid.column="0" grid.row="1" /> 

did faced behavior? appreciate help.

remove verticalcontentalignment setter or set value of stretch in style:

<style targettype="tbwi:textboxwithimage" x:key="textboxwithimagestyle">     <setter property="height" value="27"></setter>     <setter property="margin" value="3"></setter>     <setter property="verticalcontentalignment" value="stretch"></setter> </style> 

...and set verticalcontentalignment of textbox in usercontrol center:

<textbox  grid.column="0" grid.row="0" grid.rowspan="2" grid.columnspan="2" verticalcontentalignment="center"></textbox> 

the difference textbox stretches fill available space whereas grid in usercontrol doesn't if set verticalcontentalignment property of usercontrol else stretch.