WPF + Expander in Items control with user control. Fit available space

Question

I have this scenario where I am not able to fit the UI to fill the space. I will try and explain the scenario.

I have a Primary User control that has an items control. This Item control has items which are expander. Each expander uses a User control (child). This user based on the data will either be a textbox or will be a list box. The data in the textbox / listbox in secondary UC is retrieved from a database asynchronously at run time

What I want is when I have multiple items in the items control I would see multiple expanders header. When expanded if the Secondary usercontrol is supposed to show a text box then I want it to expand till the height of the text box ( + some margin). The other sibling expanders should remain collapsed and visible.

But when the Secondary User control is supposed to show a list box. I want the expander to only expanded to available space and the inner list box to have a scroll bar if needed. The sibling expanders should be collapsed and headers visible. The expanded expander content should only occupy the available space.

What is happening though is if I have long list of values when I click an expander it just goes down and is not does not fit the available space. It just pushes everything down and does not fit the available space.If the items are less it just expands to the available height of items. This is not desired. In any case if it is a list box it should occupy the available space (whether it has items or not).

I have tried Stack Panel and Dock Panel as ItemsPanelTemplate. Stack Panel just pushes the list down and sibling expanders are no longer visible. The stack panel also is not smooth when I am clicking on the expander. It just creates flickering animation. In case or Dock Panel it is smooth experience as far as UI is concerned when I expand, but it always only shows one item (irrespective of how many items you have, I only see one expander)

The behavior I want is as below :

Assumption Expander 1 & 3 contains listbox whereas Expander 2 has a textbox

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}
.
.
. { blank}
.
 ------------------------------

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


Note : at any given time frame only one expander would be expanded, others collapsed.

Below is my code. Any suggestions would be of great help.

Regards, Girija Shankar

<UserControl x:Class="FilterWKPS.UserControl1"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d"
             xmlns:local="clr-namespace:Sample"
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
        <ItemsControl ItemsSource="{Binding FuncData}" 
                                                ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Auto">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Vertical"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Expander Header="{Binding Caption}"
                                                        ExpandDirection="Down" HorizontalAlignment="Left" IsExpanded="{Binding ShowHide}">
                        <Expander.HeaderTemplate>
                            <DataTemplate>
                                <TextBlock Foreground="Black" Text="{Binding RelativeSource={RelativeSource AncestorType=Expander}, Path=Header}"
                                                                Width="{Binding RelativeSource={RelativeSource AncestorType=Expander}, Path=ActualWidth}">
                                </TextBlock>
                            </DataTemplate>
                        </Expander.HeaderTemplate>
                        <local:UCFunc DataContext="{Binding DataContext.FuncVM, RelativeSource={RelativeSource AncestorType={x:Type Grid}}}"/>
                    </Expander>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>
</UserControl>

Rakshith B Rakshith B · Accepted Answer · 2016-05-17T06:04:44

Set VerticalAlignment to top inside the expander control in contentpresenter tag. This solved my problem.

 <ContentPresenter **VerticalAlignment="Top"** x:Name="ExpanderContent" ContentSource="Content" />

WPF + Expander in Items control with user control. Fit available space

2 Answers