使用 RelativePanel 与面板中心右对齐答案

【问题标题】：Align right with center of panel using RelativePanel使用 RelativePanel 与面板中心右对齐
【发布时间】：2017-07-23 09:22:22
【问题描述】：

我想将控件右侧与面板中心对齐，我该怎么做？

使用列定义不起作用。

RelativePanel 错误：当前上下文中不存在名称“MiddleSplitter”

<Grid x:Name="LayoutRoot">

    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition x:Name="MiddleSplitter"/> <!--get middle?-->
    </Grid.ColumnDefinitions>

    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState>
                <VisualState.StateTriggers>
                    <StateTrigger IsActive="True"/> <!--just for test-->
                </VisualState.StateTriggers>
                <VisualState.Setters>

                    <Setter Target="AppListBox.(RelativePanel.AlignRightWith)" Value="MiddleSplitter"/>

                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <ScrollViewer Grid.ColumnSpan="2">
        <RelativePanel Margin="5">

            <ListBox Name="AppListBox" Height="150" Margin="5"/>

        </RelativePanel>
    </ScrollViewer>
</Grid>

我有使用RelativePanel，这被简化为只显示有这个问题的控件（AppListBox），我不想使用其他类型的面板。

【问题讨论】：

标签： xaml uwp alignment relativepanel

【解决方案1】：

一个简单的解决方法是在你的RelativePanel 中添加一个real MiddleSplitter，而不是依赖它之外的东西。

您可以创建一个超轻量级的Line 元素，禁用它的命中测试并隐藏它。通过将RelativePanel.AlignHorizontalCenterWithPanel 设置为True，您将希望它保持在中间。我称它为同名 MiddleSplitter，所以不要忘记从您的 ColumnDefinition 中删除该名称。

<ScrollViewer Grid.ColumnSpan="2">
    <RelativePanel Margin="5">
        <Line x:Name="MiddleSplitter" IsHitTestVisible="False" Opacity="0" RelativePanel.AlignHorizontalCenterWithPanel="True" />

        <ListBox Name="AppListBox" Height="150" Margin="5"/>
    </RelativePanel>
</ScrollViewer>

【讨论】：

【解决方案2】：

AlignRightWith="name" 仅在 name 控件位于 RelativePanel 内时才有效。所以在你的情况下，你不能使用AlignRightWith="MiddleSplitter"

据我了解您的代码，您希望在两个不同的列中包含内容，但您想同时滚动这两个列。为此，您可以按照以下代码示例进行操作

<ScrollViewer>
    <Grid x:Name="LayoutRoot">

        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <RelativePanel Margin="5" Grid.Column="1">
            ....
        </RelativePanel>

        <RelativePanel Margin="5" Grid.Column="2">
            <TextBlock Text="My Text" Name="AppListBox" Height="150" Margin="5"/>
            ....
        </RelativePanel>
    </Grid>
</ScrollViewer>

【讨论】：