XAML VisualStateManager and RelativePanel

Question

I am loocking to do a responsive desing on my uwp project.

The idea is on PC get my StackPanel_ListViews below the StackPanel_CommandBar. And on mobile get my StackPanel_CommandBar below the StackPanel_ListViews.

Both StackPanels are inside of a Pivot.

This is my code:

<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 is a stackpanel contains 2 ListViews. StackPanel_CommandBar is a stackpanel contains a CommandBar.

Using this code I have no results, and using a above and below I am geting a circular error.

What I am doing wrong, how I can get it work as I say above?

Any help is appreciated.

Answer 1

I think you've made a tiny mistake here by your second StackPanel "StackPanel_ListViews".

You've set RelativePanel.Below="StackPanel_CommandBar" at first, but when the layout is rendered, at the very beginning, the window's width is 0, this will cause conflicts with the Setter in your <VisualState x:Name="Mobile">, and throw an exception. You can just remove this RelativePanel.Below="StackPanel_CommandBar" code and it will works fine.