Zindex issue while automating WPF application

Below is a simple XAML code.

<Grid.ColumnDefinitions>
<ColumnDefinition MaxWidth="400" MinWidth="250" Width="250" />
<!--Column 0-->
<ColumnDefinition Width="2" />
<!--Column 1-->
<ColumnDefinition Width="*" />
<!--Column 2-->
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="67" />
<!--Row 0-->
<RowDefinition Height="30" />
<!--Row 1-->
<RowDefinition Height="*" />
<!--Row 2-->
<RowDefinition Height="57" />
<!--Row 3-->
</Grid.RowDefinitions>
<!-- Resize Border-->
<Frame x:Name="ResizeBorders" Grid.RowSpan="4" Grid.ColumnSpan="3" Panel.ZIndex="100"/>
<Button Name="button1" Grid.Column="2" Grid.Row="1"></Button>

A user tries to automate his/her button in the application. If you record action on the button using Codeduitest builder you will notice that it actually records action on a Pane control instead of Button.

Let’s try to figure out what can be the problem here. If you notice the above code Frame has a Zindex = 100 which is greater than any other controls in the application. Internal the UIA implementation does a hit test based on Zindex. Hence if the user tries to get element from point (by clicking or doing Win + I) he/she gets pane (which is a Frame inside the XAML) instead of button. To fix this the user needs to make the Zindex of the button control greater than Zindex of frame.

Below code should work fine

<Grid.ColumnDefinitions>
<ColumnDefinition MaxWidth="400" MinWidth="250" Width="250" />
<!--Column 0-->
<ColumnDefinition Width="2" />
<!--Column 1-->
<ColumnDefinition Width="*" />
<!--Column 2-->
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="67" />
<!--Row 0-->
<RowDefinition Height="30" />
<!--Row 1-->
<RowDefinition Height="*" />
<!--Row 2-->
<RowDefinition Height="57" />
<!--Row 3-->
</Grid.RowDefinitions>
<!-- Resize Border-->
<Frame x:Name="ResizeBorders" Grid.RowSpan="4" Grid.ColumnSpan="3" Panel.ZIndex="100"/>
<Button Name="button1" Grid.Column="2" Grid.Row="1" Panel.ZIndex="101"></Button>