ZIndex for expander not working with most supported layouts?

2 posts, 0 answers
  1. Adnan
    Adnan avatar
    15 posts
    Member since:
    Sep 2013

    Posted 24 Dec 2016 Link to this post

    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.

  2. Martin Ivanov
    Martin Ivanov avatar
    2391 posts

    Posted 27 Dec 2016 Link to this post

    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.
Back to Top