Is it possible to have expanders show on top of the grid

Question

I would like to use vertical aligned expanders (in a left column) besides a grid of panels. When the expander expands, it should show over the panels, not push it aside.

Edit: After testing the example code i notice, it is possible the way I would like. But unfortunatly it's not that simple to apply the example to this my project. Here's the example of the grid and expanders as I wanted to use them. But without the example code.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="0.50*"/>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="0.50*"/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="40"/>
        <RowDefinition Height="60"/>
        <RowDefinition Height="100"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <StackPanel Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="3" Orientation="Horizontal" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Aqua">
        <TextBlock HorizontalAlignment="Center" FontSize="32" Text="Fixed height"></TextBlock>
    </StackPanel>
    <StackPanel Grid.Row="1" Grid.Column="1" Grid.RowSpan="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Azure">
        <TextBlock HorizontalAlignment="Center" FontSize="32" Text="50% left"></TextBlock>
    </StackPanel>
    <GridSplitter Grid.Row="1" Grid.Column="2" Grid.RowSpan="4" Width="1" HorizontalAlignment="Stretch" />
    <DockPanel LastChildFill="True" Grid.Row="1" Grid.Column="3" Grid.RowSpan="4" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Blue">
        <TextBlock HorizontalAlignment="Center" FontSize="32" Text="50% right"></TextBlock>
    </DockPanel>
    <Expander ExpandDirection="Right" Grid.Row="0" Grid.RowSpan="2">
        <Expander.Header>
            <TextBlock Text="Control1" VerticalAlignment="Top">
                <TextBlock.LayoutTransform>
                    <RotateTransform Angle="-90"/>
                </TextBlock.LayoutTransform>
            </TextBlock>
        </Expander.Header>
        <StackPanel Orientation="Vertical">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="Input1" Margin="5"></TextBlock>
                <TextBox Name="tbxInput1" Width="100" Margin="5"></TextBox>
            </StackPanel>
        </StackPanel>
    </Expander>
    <Expander ExpandDirection="Right" Grid.Row="2" Margin="0,0,0,-44" IsExpanded="{Binding IsSettingsExpanded}">
        <Expander.Header>
            <TextBlock Text="Control2">
                <TextBlock.LayoutTransform>
                    <RotateTransform Angle="-90"/>
                </TextBlock.LayoutTransform>
            </TextBlock>
        </Expander.Header>
        <StackPanel Orientation="Vertical">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="Input2" Margin="5"></TextBlock>
                <TextBox Name="tbxInput2" Width="130" Margin="5"></TextBox>
            </StackPanel>
        </StackPanel>
    </Expander>
</Grid>

Answer 1

One idea is to put the Expander on top of the panels, with a small margin on the panels so that the Expander doesn't obstruct them. Here's an example:

<Grid>
    <UniformGrid
        Rows="2" Columns="2"
        Margin="24,0,0,0"
        >
        <StackPanel Background="Blue" />
        <StackPanel Background="Red" />
        <StackPanel Background="Yellow" />
        <StackPanel Background="Green" />
    </UniformGrid>
    <Expander
        ExpandDirection="Right"
        HorizontalAlignment="Left"
        >
        <Grid Background="White">
            <TextBlock Text="Content" />
        </Grid>
    </Expander>
</Grid>

From this example, you can apply it to your case in the following way:

<Grid>
    <Grid Margin="24,0,0,0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="0.50*"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="0.50*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="40"/>
            <RowDefinition Height="60"/>
            <RowDefinition Height="100"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <StackPanel Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="3" Orientation="Horizontal" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Aqua">
            <TextBlock HorizontalAlignment="Center" FontSize="32" Text="Fixed height"></TextBlock>
        </StackPanel>
        <StackPanel Grid.Row="1" Grid.Column="1" Grid.RowSpan="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Azure">
            <TextBlock HorizontalAlignment="Center" FontSize="32" Text="50% left"></TextBlock>
        </StackPanel>
        <GridSplitter Grid.Row="1" Grid.Column="2" Grid.RowSpan="4" Width="1" HorizontalAlignment="Stretch" />
        <DockPanel LastChildFill="True" Grid.Row="1" Grid.Column="3" Grid.RowSpan="4" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Blue">
            <TextBlock HorizontalAlignment="Center" FontSize="32" Text="50% right"></TextBlock>
        </DockPanel>
    </Grid>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Expander ExpandDirection="Right" HorizontalAlignment="Left" Grid.Row="0">
            <Expander.Header>
                <TextBlock Text="Control1" VerticalAlignment="Top">
                    <TextBlock.LayoutTransform>
                        <RotateTransform Angle="-90"/>
                    </TextBlock.LayoutTransform>
                </TextBlock>
            </Expander.Header>
            <StackPanel Orientation="Vertical" Background="White">
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="Input1" Margin="5"></TextBlock>
                    <TextBox Name="tbxInput1" Width="100" Margin="5"></TextBox>
                </StackPanel>
            </StackPanel>
        </Expander>
        <Expander ExpandDirection="Right" HorizontalAlignment="Left" Grid.Row="1" IsExpanded="{Binding IsSettingsExpanded}">
            <Expander.Header>
                <TextBlock Text="Control2">
                    <TextBlock.LayoutTransform>
                        <RotateTransform Angle="-90"/>
                    </TextBlock.LayoutTransform>
                </TextBlock>
            </Expander.Header>
            <StackPanel Orientation="Vertical" Background="White">
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="Input2" Margin="5"></TextBlock>
                    <TextBox Name="tbxInput2" Width="130" Margin="5"></TextBox>
                </StackPanel>
            </StackPanel>
        </Expander>
    </Grid>
</Grid>