How to cover expand to another controls wpf

Question

I have a code snippet like below. I want to click the test button to show the expander, and let the expander cover the TextBlock and ComboBox in the same row. I have tried somebody's solution to set ZIndex, but doesn't work. Anyone can help?

 <Window.Resources>
    <Storyboard x:Key="show" TargetProperty="Height">
        <DoubleAnimation Storyboard.TargetName="TestRec"  Duration="0:0:0.3" From="0" To="300"/>
    </Storyboard>
</Window.Resources>
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Button Content="showRectangle" Click="Button_Click"/>
    <TextBlock Text="Test TextBlock" Grid.Row="1"/>
    <ComboBox Grid.Column="1" Grid.Row="1" SelectedIndex="0">
        <ComboBoxItem Content="A"/>
        <ComboBoxItem Content="B"/>
        <ComboBoxItem Content="C"/>
        <ComboBoxItem Content="D"/>
    </ComboBox>
    <Grid Grid.Row="1" Grid.ColumnSpan="2" x:Name="TestRec" Height="0">
        <Expander Header="abc" IsExpanded="True">
            <Expander.Content>
                <ListView ItemsSource="{Binding List}">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding}"/>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </Expander.Content>
        </Expander>
    </Grid>
</Grid>


 private void Button_Click(object sender, RoutedEventArgs e)
    {
        this.BeginStoryboard(FindResource("show") as Storyboard);
    }

Answer 1

Set the background of the expander to White.

<Expander Header="abc" IsExpanded="True" Background="White">

Answer 2

That the solution to be reliable, I suggest you hide them in the Storyboard. Set for the controls names, in this case used TestTextBlock and TestComboBox:

<Window x:Class="MyProject.MainWindow"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"

...

<Storyboard x:Key="show">
    <DoubleAnimation Storyboard.TargetName="TestRec" 
                     Storyboard.TargetProperty="Height"
                     Duration="0:0:0.3" 
                     From="0" 
                     To="300" />

    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TestTextBlock"
                                   Storyboard.TargetProperty="Opacity">

        <DiscreteObjectKeyFrame KeyTime="0:0:0">
            <DiscreteObjectKeyFrame.Value>
                <sys:Double>0.0</sys:Double>
            </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
    </ObjectAnimationUsingKeyFrames>

    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TestComboBox"
                                   Storyboard.TargetProperty="Opacity">

        <DiscreteObjectKeyFrame KeyTime="0:0:0">
            <DiscreteObjectKeyFrame.Value>
                <sys:Double>0.0</sys:Double>
            </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
    </ObjectAnimationUsingKeyFrames>
</Storyboard>

In this case it is also possible use DoubleAnimation if you will use the Opacity property. And according to another Storyboard you will show them by setting Opacity to 1.0.

Answer 3

Additional to @Bizz, you can set a style for your Expander, if pc is not in highcontrast mode, set Background to white.

<Style.Triggers>
    <DataTrigger Binding="{Binding Source={x:Static SystemParameters.HighContrast}}" Value="False">
        <Setter Property="Background" Value="White" />
    </DataTrigger>
    <DataTrigger Binding="{Binding Source={x:Static SystemParameters.HighContrast}}" Value="True">
          <Setter Property="Background" Value="{Binding Source={x:Static SystemColors.ActiveBorderBrush}}"/>
    </DataTrigger>
</Style.Triggers>