title: Dynamic Heights and Scrolling based on available space in a stackpanel
body: <p>This is hard to explain:</p>
  
  <p>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:</p>
  
  <pre><code>&lt;StackPanel&gt;
     &lt;List Name="ListOne"/&gt;
     &lt;List Name="ListTwo"/&gt;
  &lt;/StackPanel&gt;
  </code></pre>
  
  <p>ListOne has a little bit of a margin at the bottom to make it look neat.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>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.</p>