Expander is See Through

10 posts, 0 answers
  1. Mark
    Mark avatar
    6 posts
    Member since:
    Jun 2012

    Posted 30 Jul 2012 Link to this post

    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?
  2. Hristo
    Admin
    Hristo avatar
    352 posts

    Posted 31 Jul 2012 Link to this post

    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"
            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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. UI for WPF is Visual Studio 2017 Ready
  4. Mark
    Mark avatar
    6 posts
    Member since:
    Jun 2012

    Posted 31 Jul 2012 Link to this post

    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.

     
  5. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 03 Aug 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  6. Mark
    Mark avatar
    6 posts
    Member since:
    Jun 2012

    Posted 03 Aug 2012 Link to this post

    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
  7. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 07 Aug 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  8. Valerio
    Valerio avatar
    9 posts
    Member since:
    Sep 2014

    Posted 18 Nov 2014 in reply to Petar Mladenov Link to this post

    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>
    ...

  9. Martin
    Admin
    Martin avatar
    1099 posts

    Posted 20 Nov 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  10. Valerio
    Valerio avatar
    9 posts
    Member since:
    Sep 2014

    Posted 20 Nov 2014 in reply to Martin Link to this post

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

    Thanks,
    Valerio
  11. Valerio
    Valerio avatar
    9 posts
    Member since:
    Sep 2014

    Posted 20 Nov 2014 in reply to Martin Link to this post

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

    Valerio
Back to Top
UI for WPF is Visual Studio 2017 Ready