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

Question: Multiple Expanders Fill Height

7 Answers 220 Views
Expander
This is a migrated thread and some comments may be shown as answers.
Agustin Rodriguez
Top achievements
Rank 1
Agustin Rodriguez asked on 13 Nov 2009, 09:55 PM
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}
.
------------------------------

7 Answers, 1 is accepted

Sort by
0
Agustin Rodriguez
Top achievements
Rank 1
answered on 13 Nov 2009, 10:07 PM
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.
0
Agustin Rodriguez
Top achievements
Rank 1
answered on 13 Nov 2009, 10:30 PM
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.
0
Tihomir Petkov
Telerik team
answered on 17 Nov 2009, 01:58 PM
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.
0
Legoless
Top achievements
Rank 1
answered on 28 May 2012, 10:08 PM
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
0
Viktor Tsvetkov
Telerik team
answered on 31 May 2012, 11:52 AM
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 >>

0
Legoless
Top achievements
Rank 1
answered on 31 May 2012, 06:06 PM
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
0
Viktor Tsvetkov
Telerik team
answered on 04 Jun 2012, 08:05 AM
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 >>

Tags
Expander
Asked by
Agustin Rodriguez
Top achievements
Rank 1
Answers by
Agustin Rodriguez
Top achievements
Rank 1
Tihomir Petkov
Telerik team
Legoless
Top achievements
Rank 1
Viktor Tsvetkov
Telerik team
Share this question
or