XAML VisualStateManager and RelativePanel - xaml

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.