Question

I have a grid with 4 columns. In the first column is a Canvas with a ZIndex of 99 and inside that is an expander. The expand direction is set to RIGHT. When I click on the header, the expander expands OVER TOP of column 2…which is exactly what I want. I’m trying to replicate this (only the opposite direction) inside column 4, so that when expanded, it will show over column 3. Even though I’ve marked the ExpandDirection of the second expander to “Left”, it still expands to the right, and off the screen.

Here is the working expander:

<Canvas Grid.Column="0" Panel.ZIndex="99" Grid.RowSpan="4" VerticalAlignment="Stretch" Margin="0,5"> 
    <Expander ExpandDirection="Right" Style="{DynamicResource OptionsExpanderStyle}" VerticalAlignment="Stretch" Height="{Binding ActualHeight, RelativeSource={RelativeSource AncestorType={x:Type Canvas}}}">
        <Border BorderBrush="Black" BorderThickness="0,0,2,0">
            <Grid Background="White">

            </Grid>
        </Border>
    </Expander>
</Canvas>

Here is the broken expander:

<Canvas x:Name="rightCanvas" Panel.ZIndex="99" Grid.RowSpan="4" Grid.Column="3" Margin="0,5">
    <Expander ExpandDirection="Left" Style="{DynamicResource OptionsExpanderStyle}" HorizontalAlignment="Right" VerticalAlignment="Stretch" Height="{Binding ActualHeight, RelativeSource={RelativeSource AncestorType={x:Type Canvas}}}">
        <Border BorderBrush="Black" BorderThickness="2,0,0,0">
            <Grid Background="White" Width="150">

            </Grid>
        </Border>
    </Expander>
</Canvas>

Answer 1

Do not use canvas.

Try something like that:

<Grid>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <TextBlock Background="LightBlue"
            TextAlignment="Center" Text="Left Column"/>
        <TextBlock Grid.Column="1" Background="LightCoral" 
            TextAlignment="Center" Text="Right Column"/>
    </Grid>
    <Expander Background="LightGray" ExpandDirection="Right"
        Header="LeftMenu" VerticalAlignment="Top" HorizontalAlignment="Left">
        <StackPanel Width="200">
            <TextBlock Text="Some menu stuff"/>
            <TextBlock Text="Some more"/>
        </StackPanel>   
    </Expander>
    <Expander Background="LightGray" ExpandDirection="Left"
        Header="RightMenu" VerticalAlignment="Top" HorizontalAlignment="Right">
        <StackPanel Width="200" >
            <TextBlock Text="Some menu stuff"/>
            <TextBlock Text="Some more"/>
        </StackPanel>
    </Expander>
</Grid>