Available Space - How to layout?

How-to Discussions
1

I’m trying to add vertical progress indicator next to and under some other elements. In the image below, it’s the vertical line, box and “11 Tests” all are gray.

file

Currently, I’m trying to add the vertical line. Using the inspector, I can see that the outer-most StackPanel does take up the vertical space that I expect it to. I was hoping that the <Rectangle Width="6" Fill="#aaa" Alignment="BottomCenter" Height="70%"/> in the example below would use 70% of the available space below the 2 <StackPanel Orientation="Horizontal" >. But it does not. In fact, it does not show up at all. If I add Layer="Background", then it will take up 70% of the entire available area (ignoring the 2 <StackPanel Orientation="Horizontal" >).

I’ve tried surrounding it with StackPanels and number of other things, but unless I specify a height or I add Layer="Background", it doesn’t have any height. Any idea what I’m doing wrong?

<StackPanel Clicked="{editSets}" Alignment="TopRight" Height="100%"  >
  <StackPanel Orientation="Horizontal" >
    <FadeText Value="High:"  TextColor="#aaa" Font="RobotoLight" FontSize="12" />
    <FadeText Value="{high}" TextColor="#aaa" Font="RobotoLight" FontSize="12" />
  </StackPanel>
  <StackPanel Orientation="Horizontal" >
    <FadeText Value="Low:" TextColor="#aaa" Font="RobotoLight" FontSize="12" />
    <FadeText Value="{low}"  TextColor="#aaa" Font="RobotoLight" FontSize="12" />
  </StackPanel>
  <Rectangle Width="6" Fill="#aaa" Alignment="BottomCenter" Height="70%"/>
</StackPanel>
2

Since the StackPanel can grow forever when you add in new children it effectively has unlimited height, which means that there’s nothing to calculate the 70% from for the Rectangle.

The layout you’re going for can instead be done with, for instance, a DockPanel or a Grid.