XAML VisualStateManager 和 RelativePanel

Question

我正在寻找对我的 uwp 项目进行响应式设计。

这个想法是在 PC 上让我的 StackPanel_ListViews 低于 StackPanel_CommandBar。在移动设备上，让我的 StackPanel_CommandBar 低于 StackPanel_ListViews。

两个 StackPanel 都在 Pivot 内。

这是我的代码：

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="VisualStateGroup">
        <VisualState x:Name="Mobile">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="0"/>
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="StackPanel_CommandBar.(RelativePanel.Below)" Value="StackPanel_ListViews"/>
            </VisualState.Setters>
        </VisualState>
        <VisualState x:Name="Pc">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="800"/>
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="StackPanel_ListViews.(RelativePanel.Below)" Value="StackPanel_CommandBar"/>

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

<StackPanel>
    <controls:PageHeader x:Name="pageHeader" RelativePanel.AlignLeftWithPanel="True"
                     RelativePanel.AlignRightWithPanel="True"
                     RelativePanel.AlignTopWithPanel="True" Text="Tittle">

    </controls:PageHeader>

    <Pivot x:Name="MainPivot">
        <PivotItem>
            <RelativePanel>
                <StackPanel Orientation="Vertical" x:Name="StackPanel_CommandBar" RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignRightWithPanel="True">
                </StackPanel>
                <StackPanel Orientation="Vertical" x:Name="StackPanel_ListViews" RelativePanel.Below="StackPanel_CommandBar" RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignRightWithPanel="True">
                </StackPanel>
            </RelativePanel>
        </PivotItem>
    </Pivot>

</StackPanel>

StackPanel_ListViews 是一个包含 2 个 ListView 的堆栈面板。 StackPanel_CommandBar 是一个包含 CommandBar 的堆栈面板。

使用这段代码我没有结果，使用上面和下面的代码我得到一个循环错误。

我哪里做错了，我怎样才能让它像我上面说的那样工作？

感谢任何帮助。

Answer 1

我认为你在第二个 StackPanel "StackPanel_ListViews" 时犯了一个小错误。

你一开始设置了RelativePanel.Below="StackPanel_CommandBar"，但是布局渲染的时候，一开始window的宽度是0，这样会和[=12冲突=] 在你的 <VisualState x:Name="Mobile"> 中，并抛出异常。您可以删除此 RelativePanel.Below="StackPanel_CommandBar" 代码，它会正常工作。

XAML VisualStateManager 和 RelativePanel

XAML VisualStateManager and RelativePanel

xaml

visualstatemanager

uwp