Dynamic Heights and Scrolling based on available space in a stackpanel - wpf

Question

This is hard to explain:
I have two lists that, each can contain a large number of items, and they are placed one on top of the other so like this:
<StackPanel>
<List Name="ListOne"/>
<List Name="ListTwo"/>
</StackPanel>
ListOne has a little bit of a margin at the bottom to make it look neat.
The stack panel is contained within another control that has a fixed height. Say there is enough room for 8 items between the two lists before it overflows.
What I want is that when there is 8 items between the two lists there is no scroll bars, even if there is an uneven spread like 7-1 , 4-4, 3-5 etc. and once there is more than 8 elements then a scroll bar appears but only where it's needed.
For example if ListOne has 5 elements and ListTwo has 4 elements then ListOne has a scroll bar and they are both the same height, where as if it's 6-3 then ListOne has a scroll bar and takes up as much room as it can while still giving ListTwo enough room to display without needing a scrollbar.
Any idea how that would be possible? Not sure if that makes much sense but I'm having difficulty explaining it. Will reply quickly if you leave a comment. Thanks in advance.

Answer 1

OK so I have something that appears to work to a decent level using an attached property.
using System.Linq;
using System.Windows;
using System.Windows.Controls;
namespace Sus.Common.UI
{
public class PanelHeightManagerExtension
{
public static readonly DependencyProperty ManageHeightsProperty =
DependencyProperty.RegisterAttached("ManageHeights",
typeof(bool),
typeof(PanelHeightManagerExtension),
new UIPropertyMetadata(false, OnManageHeightsChanged));
public static bool GetManageHeights(DependencyObject obj)
{
return (bool)obj.GetValue(ManageHeightsProperty);
}
public static void SetManageHeights(DependencyObject obj, bool value)
{
obj.SetValue(ManageHeightsProperty, value);
}
private static void OnManageHeightsChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var element = ((Panel)d);
element.Loaded += (sender, args) => Update((Panel)sender);
}
private static void Update(Panel panel)
{
var children = panel.Children.OfType<FrameworkElement>().OrderBy(x=>x.ActualHeight).ToList();
var remainingHeight = panel.DesiredSize.Height;
for (int i = 0; i < children.Count; i++)
{
if (children[i].ActualHeight > remainingHeight / (children.Count - i))
{
remainingHeight -= children[i].MaxHeight = remainingHeight / (children.Count - i);
}
else
{
remainingHeight -= children[i].ActualHeight;
children[i].MaxHeight = children[i].ActualHeight;
}
}
}
}
}
And you just add the attached property as follows:
<Grid ui:PanelHeightManagerExtension.ManageHeights="True">
Still open to better answers

Answer 2

StackPanel will give its children all the space they want, so as you can see ListOne can push ListTwo out of view if it contains enough items.
You can wrap the StackPanel in a ScrollViewer, but i would suggest you to use a Grid instead
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<ListBox x:Name="ListOne"/>
<ListBox x:Name="ListTwo" Grid.Row="1"/>
</Grid>