Expander is See Through

[Mark]

When the expander is expanded, it does not cover up the controls underneath.  Both the content of the expander and the controls "covered" by the expansion are visible. 

How can I "hide" controls on the form when the expander is expanded?  Is there a property on the expander that I'm not seeing?

[Hristo]

Hi,

I'm not sure I'm getting your case correctly. The Expander control is not a Popup and does not open over the standard content. When expanded it increases its Height and shifts the controls down or up.

However, the code snippet below hides the controls under the expander when expanded.

<Window x:Class="Expander.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <TextBlock Text="Text Under the Expander" Margin="10, 100, 10, 10"/>
        <telerik:RadExpander Header="Details" ExpandDirection="Down" VerticalContentAlignment="Top">
            <StackPanel Height="200" Background="Bisque" Opacity=".7">
                <TextBlock Text="Some Title"/>
                <TextBox Text="Enter value"/>
            </StackPanel>
        </telerik:RadExpander>
    </Grid>
</Window>

You could change the opacity of the StackPanel to 1 in order to hide the controls completely.
Hope this helps. Please let us know if you need more info on the topic or face other difficulties.

All the best,
Hristo
the Telerik team

[Mark]

Hristo

Even with your sample, the Expander is acting like a Popup.  It opens up over the standard content.  I would think this is a desired effect.  Pushing content up, down, left, or right, would seem very inappropriate.  So I'm not complaining.  I've seen other threads where pushing content was not desired.  Perhaps there's been an update.  Please let me know because I'd hate for the control to start working "properly" after an update.

Your example of setting the Background and Opacity works very well.

 

[Petar Mladenov]

Hi Mark,

 Hristo just showed how to use RadExpander in order to overlap controls.This could also be achieved with ZIndex logic.
 It does not act like a Popup if you change the order of TextBlock and Expander and set the Opacity to 1:

<Grid>
        <telerik:RadExpander Header="Details" ExpandDirection="Down" VerticalContentAlignment="Top">
            <StackPanel Height="200" Background="Bisque" Opacity="1">
                <TextBlock Text="Some Title" />
                <TextBox Text="Enter value" />
            </StackPanel>
        </telerik:RadExpander>
        <TextBlock Text="Text Under the Expander" Margin="10, 100, 10, 10" />

    </Grid>

If it was a Popup, it would have been over the TextBlock but it haven't.
Pushing content occurs when you place RadExpander in Column or Row with Auto Width/Height. This way when expanded, the other Columns/Rows get smaller.

Greetings,
Petar Mladenov
the Telerik team

[Mark]

Thanks for the explanation, Petar.

I have to say, though, that this is not the first time I've seen it mentioned that the control "pushes" content to make room for it's expander.  It does not do this by default.  It must be in a container (grid row/column).  It's container is what makes room for the expander by growing to fit (i.e. Height="Auto").

Users of your control get the wrong impression when even your support team says, "The Expander control is not a Popup and does not open over the standard content. When expanded it increases its Height and shifts the controls down or up."

It certainly does open up over/under standard content and cannot, by itself, perform they way it's described in that quote.  This is not meant to pick on Hristo, he solved my problem.  And, as I said, this is not the first time I've seen the control described in this manner.

Thanks
Mark

[Petar Mladenov]

Hi Mark,

 We understand your frustration.
 Indeed, RadExpander must be placed in GridColumns or GridRows or StackPanel

<StackPanel>
            <telerik:RadExpander>
                <Rectangle Width="200" Height="200" />
            </telerik:RadExpander>
            <telerik:RadButton Width="100" Height="100" />
        </StackPanel>

among with other controls in order to *push* them.
When we say that the Expander does not behave like a Popup we actually want to insist on the fact that there is no Popup in it's Template (important because Popup may lead to various binding, focus,clipping or other issues). Indeed we also have to underscore that the Popup behavior must be implemented by the user if he/she needs it.
Please excuse us for the inconvenience caused. We appreciate your feedback.

Greetings,
Petar Mladenov
the Telerik team

[Valerio]

Hi, I don't seem to be able to get the desired behavior (Radexpander expands over other controls that are visible underneath - see attachment). Here is my xaml:

Thanks, Valerio

    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="962">
        <Grid.RowDefinitions>
            <RowDefinition Height="50" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="1000*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>

        <StackPanel Orientation="Vertical" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,0,0" Grid.RowSpan="2" Grid.ColumnSpan="2" >
            <telerik:RadExpander x:Name="radExpander" FontSize="18" FontFamily="Segoe UI Light" Header="Selected Time Interval" Style="{StaticResource expanderItemStyle}" IsExpanded="False" VerticalContentAlignment="Top"
                                     telerik:AnimationManager.IsAnimationEnabled="{Binding ElementName=AnimationEnableCheckBox, Path=IsChecked}" Height="180">
                <StackPanel Orientation="Vertical" HorizontalAlignment="Stretch" Height="150" Margin="5,0,5,0" Background="AliceBlue" Opacity="1">
                        <TextBlock Text="Selected Time Interval" HorizontalAlignment="Center" FontSize="18" FontFamily="Segoe UI Light" Foreground="{StaticResource AccentBrush}" Height="38" Width="Auto" />
                        <my:TimeSelector x:Name="timeSelector" Margin="4,10,10,0" Height="81" Width="1028" />
                </StackPanel>
            </telerik:RadExpander>
        </StackPanel>

        <StackPanel Orientation="Vertical" Grid.Row="1" Margin="0,0,0,0">
            <TextBlock Text="Replication Groups" HorizontalAlignment="Center" FontSize="18" FontFamily="Segoe UI Light" Foreground="{StaticResource AccentBrush}" Margin="0,0,0,0" Height="38" Width="255" />
            <my:GroupsPieChart x:Name="groupsPieChart" Height="399" />
        </StackPanel>
...

[Martin Ivanov]

Hello Valerio,

To display the expander over all other controls you will need to define it after all elements in the container that holds it (in your case the Grid). For your scenario you can just switch the StackPanels that hold the pie chart's control and the expander.

<StackPanel Orientation="Vertical" Grid.Row="1" Margin="0,0,0,0">
    <TextBlock Text="Replication Groups" HorizontalAlignment="Center" FontSize="18" FontFamily="Segoe UI Light" Margin="0,0,0,0" Height="38" Width="255" />
    <Ellipse Fill="Red" Width="400" Height="400" />
    <!--<my:GroupsPieChart x:Name="groupsPieChart" Height="399" />-->
</StackPanel>

<StackPanel Orientation="Vertical" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,0,0" Grid.RowSpan="2" Grid.ColumnSpan="2" >
    <telerik:RadExpander x:Name="radExpander" FontSize="18" FontFamily="Segoe UI Light" Header="Selected Time Interval" IsExpanded="False" VerticalContentAlignment="Top"
                         telerik:AnimationManager.IsAnimationEnabled="{Binding ElementName=AnimationEnableCheckBox, Path=IsChecked}" Height="180">
        <StackPanel Orientation="Vertical" HorizontalAlignment="Stretch" Height="150" Margin="5,0,5,0" Background="AliceBlue" Opacity="1">
            <TextBlock Text="Selected Time Interval" HorizontalAlignment="Center" FontSize="18" FontFamily="Segoe UI Light" Height="38" Width="Auto" />
            <!--<my:TimeSelector x:Name="timeSelector" Margin="4,10,10,0" Height="81" Width="1028" />-->
        </StackPanel>
    </telerik:RadExpander>
</StackPanel>

This will ensure that the RadExpander control will be over the other elements when it is expanded.

Please let me know if this helps.

Regards,
Martin
Telerik

 

 

[Valerio]

Hi Martin,
It works! I would've never thought of solving it that way,

Thanks,
Valerio

[Valerio]

Hi Martin,
It works! Thank you for your valuable hint!

Valerio