WPF problem with Visibiliy of Button when ancestor IsMouseOver

Question

I have a WPF grid that contains, among other things, a button.

The button is Hidden by default, and should only become visible when the mouse is Over the grid. (Functionally, the grid is a tab header, and the "disappearing" button is a closing button). I also rewrote the button template to have a custom feeling.

Now, the button becomes visible when my mouse enters the grid, but disappears as soon as the mouse enters the button. My intuition is that the Grid's IsMouseOver becomes False when the mouse moves on to the button. Is there a way around this?

       <ControlTemplate x:Key="CloseTabButtonTemplate">
            <Border Width="14" Height="14" Margin="3"
                    HorizontalAlignment="Right"
                    VerticalAlignment="Center"

                    BorderThickness="1"
                    CornerRadius="2,2,2,2">
                <TextBlock Text="x" VerticalAlignment="Center" HorizontalAlignment="Center"
                           FontSize="11" Padding="0" Margin="0,-2,0,0" Foreground="White"/>
                <Border.Style>

                    <Style TargetType="{x:Type Border}">
                        <Setter Property="Background" Value="#33DA3030"/>
                        <Setter Property="BorderBrush" Value="White"/>
                        <Setter Property="Visibility" Value="Hidden"/>
                        <Style.Triggers>                                
                            <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type Grid}},Path=IsMouseOver}" Value="True">
                                <Setter Property="Visibility" Value="Visible" />
                            </DataTrigger>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" Value="#FFDA3030"/>
                                <Setter Property="Visibility" Value="Visible" />
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </Border.Style>
            </Border>
        </ControlTemplate>          

<Button Grid.Column="2" HorizontalAlignment="Right" Template="{StaticResource CloseTabButtonTemplate}">x</Button>

Thanks!

Answer 1

I see no problems here. I've tested it with a simple window with a Grid:

<Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Title="Window1" Height="300" Width="300"
        >

    <Window.Resources>

        <ControlTemplate x:Key="CloseTabButtonTemplate">
            .... Your template as in the question ....
        </ControlTemplate>

    </Window.Resources>

    <Grid x:Name="MainGrid" Width="200" Height="200" Background="Transparent">

        <Button Template="{StaticResource CloseTabButtonTemplate}" />

    </Grid>
</Window>

Perhaps the parent grid is missing a Background color? As you see I have made my Grid Transparent. When I remove it, it won't show the Button.

Perhaps add a little more code?