Question: Multiple Expanders Fill Height

8 posts, 0 answers
  1. Agustin Rodriguez
    Agustin Rodriguez avatar
    5 posts
    Member since:
    Oct 2009

    Posted 13 Nov 2009 Link to this post

    Is there a way to have the content of an expander fill all available space and push any expanders to the bottom or top of the window.  So far I tried using StackPanels, DockPanels, Grids but I just have not been able to get the desired effect.  Any recommendations would be appreciated.

    behavior example,

    All Collapsed
    ===================
    Expander1 - {collapsed}
    Expander2 - {collapsed}
    Expander3 - {collapsed}
    .
    .
    . { blank}
    .
    .
    ------------------------------


    Expander 1 Expanded
    ===================
    Expander1 - {expanded}
    .
    .
    . { expander content}
    .
    .
    Expander2 - {collapsed}
    Expander3 - {collapsed}
    ------------------------------

    Expander 2 Expanded
    ===================
    Expander1 - {collapsed}
    Expander2 - {expanded}
    .
    .
    . {expander content}
    .
    .
    Expander3 - {collapsed}
    ------------------------------

    Expander 3 Expanded
    ===================
    Expander1 - {collapsed}
    Expander2 - {collapsed}
    Expander3 - {expanded}
    .
    .
    . {expander content}
    .
    .
    ------------------------------


    All Expanded
    ===================
    Expander1 - {expanded}
    .
    . {expander content}
    .
    Expander2 - {expanded}
    .
    . {expander content}
    .
    Expander3 - {expanded}
    .
    . {expander content}
    .
    ------------------------------

  2. Agustin Rodriguez
    Agustin Rodriguez avatar
    5 posts
    Member since:
    Oct 2009

    Posted 13 Nov 2009 Link to this post

    Here is the overall XAML structure I was playing with, again, the main goal is to have the content of the expanders fill the available window space when expanded.  Thanks again for advice.


    <Window x:Class="TelerikExpanderTest.Window1" 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
            xmlns:telc="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls" 
        Title="Window1" Height="300" Width="300">  
        <DockPanel Background="Black" LastChildFill="False">  
            <telc:RadExpander DockPanel.Dock="Top">  
                <DockPanel Background="Red">  
                    <TextBlock Text="Expander1" /> 
                </DockPanel>   
            </telc:RadExpander> 
            <telc:RadExpander DockPanel.Dock="Top" > 
                <DockPanel Background="Green">  
                    <TextBlock Text="Expander2" /> 
                </DockPanel> 
            </telc:RadExpander> 
            <telc:RadExpander DockPanel.Dock="Top" > 
                <DockPanel Background="Blue">  
                    <TextBlock Text="Expander3" /> 
                </DockPanel> 
            </telc:RadExpander> 
        </DockPanel> 
    </Window> 


    I have tried to use VerticalAlignment and VerticalContentAlignment but I cannot get the content to expand.
  3. UI for WPF is Visual Studio 2017 Ready
  4. Agustin Rodriguez
    Agustin Rodriguez avatar
    5 posts
    Member since:
    Oct 2009

    Posted 13 Nov 2009 Link to this post

    Well now I just feel silly, the control I really want to use is the RadPanalBar control.... it is exactly what I need...  I guess it does help to read the API's

    Thank you for your time.
  5. Tihomir Petkov
    Admin
    Tihomir Petkov avatar
    576 posts

    Posted 17 Nov 2009 Link to this post

    Hello Agustin,

    No problem. Let me know if you have other questions.

    Greetings,
    Tihomir Petkov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  6. Legoless
    Legoless avatar
    9 posts
    Member since:
    Mar 2012

    Posted 28 May 2012 Link to this post

    Hello,

    I want to create a similar effect, but the PanelBar has a problem - same with using multiple RadExpanders. The content of the expander does not take into consideration the space of the container. If I have content larger than the whole space for PanelBar, it pushes the expanders of the viewable position.

    Lets say I want to have a panelbar, that contains GridView. We all know how great GridView is, and it supports scrolling without a problem. But lets say I put the 2 GridViews with 1 million records into two PanelBar items. When I start this, both GridViews are rendered to their full height into the panelbar and it is awfully slow - thats easy to explain, 1 million records is just too much for the GridView to handle, its not a problem. So we would want a scrolling feature, which GridView supports nicely. But how to make the GridView to actually to resize to the available space in the PanelBar? So I figure, maybe PanelBar is not the right thing..

    I tried with a different structure: Grid and 2 Expanders. The closest effect I could get is to position two Expanders in 2-row grid. If the grid rows are set to *, meaning it fits the available space, both expanders with gridviews are displayed correctly with scrollbars. But the problem is that two rows mean 50% and 50% space for each gridview. But if one is collapsed, I want the other expander to take full available space.
    So I set first row to Auto, but this also means the first expander will take all space needed to render the first GridView, again rendering all 1 million records.

    So my question is, is it even possible to create such a scenario with Telerik WPF controls? So that 2 expanded rows take 50%, 50% space, single expanded rows take all available space except for header of the second row, so I can expand that one too?

    If it is possible, how?

    Thank you,

    Dal Rupnik
  7. Viktor Tsvetkov
    Admin
    Viktor Tsvetkov avatar
    382 posts

    Posted 31 May 2012 Link to this post

    Hello Dal,

    You can add handlers for the Collapsed and Expanded events of the expanders and to change the corresponding row's Height to Auto and * accordingly. Could you try this approach and tell me if it works for you?

    Greetings,
    Viktor Tsvetkov
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  8. Legoless
    Legoless avatar
    9 posts
    Member since:
    Mar 2012

    Posted 31 May 2012 Link to this post

    Hello Viktor,

    thank you for your answer. I already know the logic how would I solve this problem in code, but I wanted to do this in XAML, because I am using a DataTemplate which is bound to an object. So for this solution I would probably have to extend the behavior of your RadExpander to allow custom handlers for Collapsed and Expanded? And write my own control? Is that what you meant? I will try of course if there is no other way.

    Thank you,

    Dal
  9. Viktor Tsvetkov
    Admin
    Viktor Tsvetkov avatar
    382 posts

    Posted 04 Jun 2012 Link to this post

    Hello Dal,

    Currently this is the way of achieving what you need in your scenario.

    Regards,
    Viktor Tsvetkov
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Back to Top
UI for WPF is Visual Studio 2017 Ready