How to evenly space children in a RelativePanel in Universal app - xaml

Question

I have a UserControl that contains a RelativePanel. I'm using a RelativePanel because I need this UserControl to be displayed at the top of the screen when I'm on a narrow state (phone app) and displayed along the left edge of the screen when it is in a wider screen.
The children are buttons with images which I use as a toolbar for navigation. The problem is that I cannot find a way to evenly space the buttons in the RelativePanel. The buttons appear stuck to each other left-aligned.
I tried using a Grid, and it worked, but I was forced to create two user controls, one for the top menu and one for the left edge menu, because the VisualStateManager does not allow me to change ColumnDefinitions to RowDefinitions.
The advantage of a RelativePanel is that I can do it with one user control, avoiding code duplication.
Here is the XAML:
<UserControl
x:Class="Innobec.Mobile.Apps.CityScope.UserControls.TopHorizontalToolBar"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Innobec.Mobile.Apps.CityScope.UserControls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="80"
d:DesignWidth="400">
<RelativePanel x:Name="MainPanel">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="WindowStates">
<VisualState x:Name="WideState">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="660"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="newsButton.(RelativePanel.Below)" Value="pinButton"/>
<Setter Target="weatherButton.(RelativePanel.Below)" Value="newsButton"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="NarrowState">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="1"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="newsButton.(RelativePanel.RightOf)" Value="pinButton"/>
<Setter Target="weatherButton.(RelativePanel.RightOf)" Value="newsButton"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Button x:Name="pinButton" Background="Red" VerticalAlignment="Center" Click="pinButton_Click" Style="{StaticResource TopHorizontalToolBarButtonStyle}">
<Image Source="/Assets/Top-Pin-Icon-60px.png" Stretch="None"/>
</Button>
<Button x:Name="newsButton" Background="Red" VerticalAlignment="Center" Click="newsButton_Click" Style="{StaticResource TopHorizontalToolBarButtonStyle}">
<Image Source="/Assets/Top-News-Icon-60px.png" Stretch="None"/>
</Button>
<Button x:Name="weatherButton" Background="Red" VerticalAlignment="Center" Click="weatherButton_Click" Style="{StaticResource TopHorizontalToolBarButtonStyle}">
<Image Source="/Assets/Top-Weather-Icon-60px.png" Stretch="None"/>
</Button>
</RelativePanel>
Is there a control that I can place inside the RelativePanel that will evenly space the children? Please note that I'm new to XAML so it may be possible, it's just that I haven't figured it out yet.

Answer 1

One option is to dynamically change the sizes of the RelativePanel's children in the code behind using the RelativePanel's SizeChanged event. You could even keep it fairly dynamic by doing something like this:
private void RelativePanel_SizeChanged(object sender, SizeChangedEventArgs e)
{
RelativePanel panel = sender as RelativePanel;
if(panel != null)
{
double childCount = panel.Children.Count;
for (int i = 0; i < panel.Children.Count; i++)
{
FrameworkElement child = panel.Children[i] as FrameworkElement;
if (child != null)
{
if(spacedHorizontally)
{
child.Height = panel.ActualHeight;
child.Width = panel.ActualWidth / childCount;
}
else
{
child.Height = panel.ActualHeight / childCount;
child.Width = panel.ActualWidth;
}
}
}
}
}
This would evenly space out the children either Horizontally or Vertically (using the spacedHorizontally bool in my example) and stretch the children in the other direction.