XAML with dynamic margin height - xaml

Question

I'm looking for something like a dynamic margin or flexible space in XAML but couldn't find something.
This XAML:
<HubSection VerticalContentAlignment="Stretch">
<DataTemplate>
<Grid>
<TextBlock Text="Products>" Foreground="#FF464646" FontSize="36" Margin="0,-50,0,0"></TextBlock>
<StackPanel VerticalAlignment="Center">
<Button Background="#FF00AEFF" Width="260" Height="60" Content="Button1"></Button>
<Button Background="#FFFF8000" Width="260" Height="60" Content="Button2"></Button>
<Button Background="#FFDE0101" Width="260" Height="60" Content="Button3"></Button>
<Button Background="#FF6300DA" Width="260" Height="60" Content="Button4"></Button>
<Button Background="#FF973E00" Width="260" Height="60" Content="Button5"></Button>
<Button Background="#FF00AA1F" Width="260" Height="60" Content="Button6"></Button>
</StackPanel>
</Grid>
</DataTemplate>
</HubSection>
Gives me:
But the buttons should have margins between them to fill the space according to the available screen height.
Something like this:
Is there something like a dynamic margin height?

Answer 1

Make it grid and it will work like a charm.
<HubSection VerticalContentAlignment="Stretch">
<DataTemplate>
<Grid VerticalAlignment="Stretch" Background="Yellow">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="Products>" Foreground="#FF464646" FontSize="36" Grid.Row="0"></TextBlock>
<Grid VerticalAlignment="Stretch" Background="Pink" Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Button Background="#FF00AA1F" Width="260" Height="60" Content="Button6" Grid.Row="6"></Button>
</Grid>
<Grid Grid.Row="1">
<Button Background="#FF00AEFF" Width="260" Height="60" Content="Button1" ></Button>
</Grid>
<Grid Grid.Row="2">
<Button Background="#FFFF8000" Width="260" Height="60" Content="Button2" Grid.Row="2"></Button>
</Grid>
<Grid Grid.Row="3">
<Button Background="#FFDE0101" Width="260" Height="60" Content="Button3" Grid.Row="3"></Button>
</Grid>
<Grid Grid.Row="4">
<Button Background="#FF6300DA" Width="260" Height="60" Content="Button4" Grid.Row="4"></Button>
</Grid>
<Grid Grid.Row="5">
<Button Background="#FF973E00" Width="260" Height="60" Content="Button5" Grid.Row="5"></Button>
</Grid>
</Grid>
</Grid>
</DataTemplate>
</HubSection>
This will solve your problem. I have added colors just that you know which grid is using which space.

Answer 2

If you do not want to hardcode the XAML and keep the XAML clean, be able to add items, I have created the SpaceChildrenBehavior
<Grid Background="AliceBlue" >
<i:Interaction.Behaviors>
<local:SpaceChildrenBehavior/>
</i:Interaction.Behaviors>
<Button Margin="0,10,0,0" Background="#FF00AEFF" Width="260" Height="60" Content="Button1"></Button>
<Button Background="#FFFF8000" Width="260" Height="60" Content="Button2"></Button>
<Button Background="#FFDE0101" Width="260" Height="60" Content="Button3"></Button>
<Button Background="#FF6300DA" Width="260" Height="60" Content="Button4"></Button>
<Button Background="#FF973E00" Width="260" Height="60" Content="Button5"></Button>
<Button Background="#FF00AA1F" Width="260" Height="60" Content="Button6"></Button>
</Grid>
This is the XAML (really clean)
and the behaviour
public class SpaceChildrenBehavior : DependencyObject, IBehavior
{
public DependencyObject AssociatedObject { get; private set; }
public Grid AssociatedGrid;
EventHandler<object> layoutupdated= null;
public void Attach(DependencyObject associatedObject)
{
AssociatedObject = associatedObject;
AssociatedGrid = associatedObject as Grid;
layoutupdated = async (s, e) =>
{
if (AssociatedGrid.ActualHeight > 0)
{
AssociatedGrid.LayoutUpdated -= layoutupdated;
await Task.Delay(100);
AssociatedGrid.RowDefinitions.Clear();
int i = -1;
foreach (var child in AssociatedGrid.Children)
{
AssociatedGrid.RowDefinitions.Add(new RowDefinition()
{ Height = new GridLength(1, GridUnitType.Star) });
Grid.SetRow(child as FrameworkElement, ++i);
}
AssociatedGrid.LayoutUpdated += layoutupdated;
}
};
AssociatedGrid.LayoutUpdated += layoutupdated;
}
public void Detach()
{
AssociatedGrid.LayoutUpdated -= layoutupdated;
}
}
Now is dynamic, you can add more items and it will adapt the grid rows