XAML VisualStateManager和RelativePanel

Question

我正忙着为我的uwp项目做一个响应式设计。

这个想法是在PC上得到StackPanel_CommandBar下面的StackPanel_ListViews。 在移动设备上将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个ListViews的stackpanel。 StackPanel_CommandBar是一个包含CommandBar的stackpanel。

使用此代码我没有结果，使用上面和下面我发现一个循环错误。

我做错了什么，我怎么能像上面说的那样让它发挥作用？

感谢任何帮助。

Answer 1

我认为你的第二个StackPanel＆＃34; StackPanel_ListViews＆＃34;在这里犯了一个小错误。

您最初设置了RelativePanel.Below="StackPanel_CommandBar"，但是在渲染布局时，窗口的宽度最开始为0，这将导致与Setter冲突在你的<VisualState x:Name="Mobile">中，并抛出异常。你可以删除这个RelativePanel.Below="StackPanel_CommandBar"代码，它会正常工作。