Datagrid mouseover header image overlapping - wpf

Question

I have image to display when I do mouseover on column header. But imp thing is it should be display below columnheader area.
I am able to create that but's it's overlapping with below cell. Here is image.
Here is my code:
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="Height" Value="26" />
<Setter Property="Width" Value="126" />
<Setter Property="Foreground" Value="{DynamicResource ContrastWhiteBrush}" />
<Setter Property="Background" Value="{DynamicResource ContentToGreyedOutBrush}" />
<Setter Property="Template" Value="{StaticResource ColumnHeaderControlTemplate}" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{DynamicResource GridHeaderMouseOverBrush}" />
</Trigger>
<Trigger Property="prism:DataGridProperties.IsMouseOverGridCellColumnHeader" Value="True">
<Setter Property="Background" Value="{DynamicResource GridHeaderMouseOverBrush}" />
</Trigger>
</Style.Triggers>
<ControlTemplate x:Key="ColumnHeaderControlTemplate" TargetType="{x:Type DataGridColumnHeader}" >
<AdornerDecorator>
<Grid Background="{TemplateBinding Background}" x:Name="dgColumnHeader" Panel.ZIndex="10001">
<ad:Interaction.Behaviors>
<GridColumnHeaderControl:GridAdornerBehavior AdornerTemplate="{StaticResource AdornerDataTemplate}" Panel.ZIndex="19999">
<ad:Interaction.Triggers>
<ad:EventTrigger SourceName="dgColumnHeader" EventName="MouseEnter">
<ad:InvokeCommandAction CommandName="ShowAdornerCommand"/>
</ad:EventTrigger>
<ad:EventTrigger SourceName="dgColumnHeader" EventName="MouseLeave">
<ad:InvokeCommandAction CommandName="HideAdornerCommand"/>
</ad:EventTrigger>
</ad:Interaction.Triggers>
</GridColumnHeaderControl:GridAdornerBehavior>
</ad:Interaction.Behaviors>
<Border x:Name="border" BorderBrush="Black" BorderThickness="0,0,1,1" Grid.ColumnSpan="1">
<Rectangle Width="116" Margin="3,3,3,3" HorizontalAlignment="Center" RadiusX="7" RadiusY="7" x:Name="PART_Rectangle" Fill="{DynamicResource ContentOutofFocusBrush}"></Rectangle>
</Border>
<ContentPresenter x:Name="content" HorizontalAlignment="Center" VerticalAlignment="Center" Content="{TemplateBinding Content}" />
</Grid>
</AdornerDecorator>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="PART_Rectangle" Property="Fill" Value="{DynamicResource ActiveItemBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<DataTemplate x:Key="AdornerDataTemplate">
<Grid HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,13,0,0" Grid.ZIndex="99">
<Button Content="X" Width="28" Height="26" Panel.ZIndex="10002" Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ctrls:RhinoDataGrid}}, Path=RemoveSelectedColumnCommand}">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Foreground" Value="Red"/>
<Setter Property="Background" Value="{DynamicResource GridHeaderMouseOverBrush}"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="FontWeight" Value="Heavy"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Border Background="{TemplateBinding Background}" CornerRadius="0,0,12,12" BorderThickness="1,0,1,1" BorderBrush="Black">
<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>
</Grid>
</DataTemplate>
Some how my rowheader is working. my row header width is 36 and close button width is 28 with left margin 26. and some how image is no overlapping there with cell
Pls help me to fix.
Thanks
Dee

Answer 1

The height of the header is 26
<Setter Property="Height" Value="26" />
How do you expect it to display an image with a height > 26 ?

Answer 2

In order to show your “Close” button on top of the other control, you have to add “Popup” control and add “Close” button as its child. You can define maximum one child, which can be any UIElement.
You should define Event trigger for DatagridColumnHeader’s mouse over event and set “IsOpen = true” of popup control.
e.g.
<Popup Name="myPopup">
<TextBlock Name="myPopupText"
Background="LightBlue"
Foreground="Blue">
Popup Text
</TextBlock>
</Popup>
You can also set below properties to get the expected result.
AllowsTransparency="True"
Placement="Relative"
PlacementTarget="{Binding ElementName=Border}" /* your control name */
HorizontalOffset="0"
VerticalOffset="60"
PopupAnimation="Fade"