Question

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

孩子们是带有图像的按钮，我将其用作导航工具栏。问题是我无法找到一种方法来均匀地分隔RelativePanel中的按钮。按钮看起来彼此左对齐。

我尝试使用Grid，但它有效，但我被迫创建了两个用户控件，一个用于顶层菜单，另一个用于左边缘菜单，因为VisualStateManager不允许我将ColumnDefinitions更改为RowDefinitions。 / p>

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内部，可以均匀地隔开孩子们？请注意，我是XAML的新手，所以它可能是，我只是觉得我还没想到它。

Answer 1

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

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

这样可以在水平或垂直方向上均匀地隔开子项（在我的示例中使用spacedHorizontally bool）并将子项拉伸到另一个方向。

如何在Universal app中的RelativePanel中均匀分隔子项

1 个答案: