How to scale the spacing between controls in a stack panel to fit a window?

Question

I am wanting to create a horizontal stackpanel (or something similar) that will scale the spacing of different sized controls so that the spacing between them is the same but they span the entire window. Psuedo-Code:

<!--Something Like This: -->
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Spacing="Max">
        <TextBlock Text="Thing that is number 1"/>
        <TextBlock Text="Thing 2"/>
        <TextBlock Text="Number 3"/>
        <TextBlock Text="Thing that 4"/>
</StackPanel>

I am using uno platform, which uses a sort of hybrid of winui and uwp if I understand correctly, and might make some things not work. https://platform.uno/docs/articles/api-differences.html#:~:text=Uno%20Platform%20strives%20to%20closely,is%20100%25%20compatible%20with%20Uno.

I haven't been able to find anything that works yet. I tried to get DockPanel to work but it didn't (both dockpanel and controls:dockpanel). From what it looks like from this site https://learn.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.stackpanel.spacing?view=winrt-22621, spacing only accepts a double, but I could very well be wrong. Any help is appreciated!

Answer 1

You should take a look at the UniformGrid control from the WindowsCommunityToolkit.

<Page
    x:Class="UniformGridExample.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UniformGridExample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:toolkit="using:CommunityToolkit.WinUI.UI.Controls"
    mc:Ignorable="d">
    <toolkit:UniformGrid
        Columns="3"
        FirstColumn="0"
        Orientation="Horizontal"
        Rows="1">
        <Border
            BorderBrush="HotPink"
            BorderThickness="1">
            <Button Content="1" />
        </Border>
        <Border
            BorderBrush="LightGreen"
            BorderThickness="1">
            <Button Content="2" />
        </Border>
        <Border
            BorderBrush="SkyBlue"
            BorderThickness="1">
            <Button Content="3" />
        </Border>
    </toolkit:UniformGrid>
</Page>

You also can see how it's implemented here.