ZIndex for expander not working with most supported layouts?

[Adnan]

I am trying to set the ZIndex on the Expander where the overlapped layout is a UniformGrid as per the following code:

<UserControl x:Class="Project1.TestExpander"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
             Height="auto" Width="300">
    <Grid>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition x:Name="ButtonsColumns" Width="*"/>
                <ColumnDefinition Width="auto"/>
            </Grid.ColumnDefinitions>
            <UniformGrid Grid.ZIndex="1" Rows="2" Columns="4">
                <telerik:RadButton Content="TEST1"></telerik:RadButton>
                <telerik:RadButton Content="TEST2"></telerik:RadButton>
                <telerik:RadButton Content="TEST3"></telerik:RadButton>
                <telerik:RadButton Content="TEST4"></telerik:RadButton>
                <telerik:RadButton Content="TEST5"></telerik:RadButton>
                <telerik:RadButton Content="TEST6"></telerik:RadButton>
                <telerik:RadButton Content="TEST7"></telerik:RadButton>
                <telerik:RadButton Content="TEST8"></telerik:RadButton>
            </UniformGrid>
            <telerik:RadExpander Grid.ZIndex="2" Grid.Column="1" Header="Advanced" VerticalAlignment="Stretch" ExpandDirection="Left" IsExpanded="False">
                <Grid>
                    <telerik:RadButton Width="250"></telerik:RadButton>
                </Grid>
            </telerik:RadExpander>
        </Grid>
    </Grid>
</UserControl>

 

The problem is ZIndex property is not working. If you run the code above, when you expand the Expander, it will squeeze the buttons width until they disappear. The intended behavior using ZIndex property is to keep the buttons layout unaffected by the Expander animation, as a result, you can see the Expander content expanding over buttons but not squeezing the width.

NOTE: above code is working with canvas but it is not working with Grid, UniformGrid and StackPanel. Help Please.

Thanks in advance.

[Martin Ivanov]

Hello Adnan,

The reported behavior is expected. The RadExpander control resizes itself when expanding. Because its column's width is set to Auto, it will give the expander as much space as it needs, which is almost all space because the control is stretched. 

I guess you want the Content of the expander to be displayed above the buttons panel? If so, you will need to place both controls in the same panel. For example:

<Grid Width="300">
    <UniformGrid Grid.ZIndex="1" Rows="2" Columns="4"
                 Margin="0 0 30 0">
        <telerik:RadButton Content="TEST1"/>
        <telerik:RadButton Content="TEST2"/>
        <telerik:RadButton Content="TEST3"/>
        <telerik:RadButton Content="TEST4"/>
        <telerik:RadButton Content="TEST5"/>
        <telerik:RadButton Content="TEST6"/>
        <telerik:RadButton Content="TEST7"/>
        <telerik:RadButton Content="TEST8"/>
    </UniformGrid>
    <telerik:RadExpander Grid.ZIndex="2"
                         Header="Advanced"
                         VerticalAlignment="Stretch"
                         HorizontalAlignment="Right"
                         ExpandDirection="Left"
                         IsExpanded="False">
        <telerik:RadButton Width="260"/>
    </telerik:RadExpander>
</Grid>

As a side note, the ZIndex property will affect only the stack order of the elements, but not their arrangement in the panel.

Regards,
Martin
Telerik by Progress