Выровняйте по центру панели справа, используя RelativePanel

Question

Я хочу выровнять право управления по центру панели, как я могу это сделать?

Использование определений столбцов не работает.

Ошибка 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), Я не хочу использовать другой тип панелей.

Answer 1

Простое решение состоит в том, чтобы добавить реальный MiddleSplitter внутри вашего RelativePanelвместо того, чтобы полагаться на что-то вне этого.

Вы можете создать супер легкий 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>

Answer 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>