Available Space - How to layout?

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>

Hi!

Looks like the StackPanels might be causing the issues, since the stack and will always use the needed space for its content.

I think you should try making it with <RangeControl /> instead. Please have a look at this example:

<App>

	<RangeControl ux:Class="ProgressBar" >
		<Panel Margin="4" ClipToBounds="true">
			<Rectangle Width="10">
				<Stroke Color="Black" />
			</Rectangle>
			<Rectangle Color="#0cf">
				<Translation Y="1" RelativeTo="Size" ux:Name="_progressTrans" />
			</Rectangle>
		</Panel>
		<ProgressAnimation>
			<Change _progressTrans.Y="0" Duration="1" />
		</ProgressAnimation>
	</RangeControl>

	<DockPanel>
		<JavaScript>
			var Observable = require("FuseJS/Observable");

			var progress = Observable(50);

			module.exports = {
				progress:progress
			};

		</JavaScript>
		<ProgressBar Dock="Right" Value="{progress}" Minimum="0" Maximum="100" />
		<Panel Dock="Fill">
			<Slider Value="{progress}" Minimum="0" Maximum="100" />
		</Panel>
	</DockPanel>
</App>