如何在通用应用程序的 RelativePanel 中均匀 space children

Question

我有一个包含 RelativePanel 的 UserControl。我正在使用 RelativePanel，因为当我处于窄状态（phone 应用程序）时，我需要将此 UserControl 显示在屏幕顶部，并在它处于窄状态时沿屏幕左边缘显示更宽的屏幕。

children 是带图像的按钮，我将其用作导航工具栏。问题是我找不到一种方法来均匀 space RelativePanel 中的按钮。这些按钮似乎相互粘在一起 left-aligned。

我尝试使用 Grid，它成功了，但我被迫创建了两个用户控件，一个用于顶部菜单，一个用于左边缘菜单，因为 VisualStateManager 不允许我将 ColumnDefinitions 更改为 RowDefinitions .

RelativePanel 的优点是我可以用一个用户控件来完成，避免了代码重复。

这是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>

是否可以在 RelativePanel 中放置一个控件，它会均匀 space children？请注意，我是 XAML 的新手，所以这可能是可能的，只是我还没有弄清楚。

Answer 1

一种选择是使用 RelativePanel 的 SizeChanged 事件在后面的代码中动态更改 RelativePanel 的大小 children。你甚至可以通过做这样的事情来保持它相当动态：

  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;
                    }
                }
            }
        }
    }

这将在水平或垂直方向上均匀地 space 输出 children（在我的示例中使用 spacedHorizontally 布尔值）并向另一个方向拉伸 children .

如何在通用应用程序的 RelativePanel 中均匀 space children

How to evenly space children in a RelativePanel in Universal app

xaml

win-universal-app