Panel.ZIndex is not working on the two different Grids.

Question

Aim: When the mouse is over on a button then the button height should become double and the button should be displayed on top of other controls. Controls can be present in 'N'number of panels in a screen.

I am using VS 2010, I have a main grid with 2 Rows. Each row have 2 grids. Each grid have buttons. For example Grid 1 yellow have color buttons, Grid 2 have blue color buttons. I have written the following style for the buttons.

<Style TargetType="{x:Type Buttons}"> 
    <Style.Triggers> 
        <Trigger Property="IsMouseOver" Value="True"> 
            <Setter Property="RenderTransform">
                <Setter.Value>
                    <ScaleTransform ScaleX="1" ScaleY="2" />
                </Setter.Value>
            </Setter>
            <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/> 
            <Setter Property="Panel.ZIndex" Value="99999"/> 
        </Trigger> 
    </Style.Triggers> 
</Style>

Problem: When the mouse is over on a yellow color button in the Grid 1. But the yellow color button is not above the blue color buttons on the Grid 2. Panel.ZIndex is not working on the two different Grids.

Please let me know how to solve this issue.

Answer 1

It sounds like the problem is that Grid 1 is behind Grid 2. If they are both children of the same main grid then you could use the same trick you're using for Button and set the ZIndex of a Grid to 99999 when the mouse is over it:

<Style TargetType="Grid">
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Panel.ZIndex" Value="99999"/>
        </Trigger>
    </Style.Triggers>
</Style>

Answer 2

Still i m facing same prolem when i check the same with Tab Control.

1. Control placed on the Tab Control hides under other control when it expands out side the Tab Control.

2. Control placed on the Tab control goes under the Tab Item Header when it expands.

Please check the Green color buttons in the attached solution here.