This is a migrated thread and some comments may be shown as answers.

ZIndex for expander not working with most supported layouts?

1 Answer 342 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Adnan asked on 24 Dec 2016, 12:12 PM

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"
             Height="auto" Width="300">
                <ColumnDefinition x:Name="ButtonsColumns" Width="*"/>
                <ColumnDefinition Width="auto"/>
            <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>
            <telerik:RadExpander Grid.ZIndex="2" Grid.Column="1" Header="Advanced" VerticalAlignment="Stretch" ExpandDirection="Left" IsExpanded="False">
                    <telerik:RadButton Width="250"></telerik:RadButton>


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.

1 Answer, 1 is accepted

Sort by
Martin Ivanov
Telerik team
answered on 27 Dec 2016, 09:05 AM
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"/>
    <telerik:RadExpander Grid.ZIndex="2"                             
        <telerik:RadButton Width="260"/>

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

Telerik by Progress
Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
Asked by
Top achievements
Rank 1
Answers by
Martin Ivanov
Telerik team
Share this question