XAML VisualStateManager 및 RelativePanel

Question

내 uwp 프로젝트에서 반응 형 설계를하기 위해 loocking하고 있습니다.

아이디어는 PC에서 내 StackPanel_ListViews를 StackPanel_CommandBar 아래에 가져옵니다. 그리고 모바일에서 StackPanel_ListViews 아래에있는 내 StackPanel_CommandBar를 가져옵니다.

두 StackPanel 모두 피벗 안에 있습니다.

<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는 StackPanel의 2 개의 ListView가 포함되어 있습니다 :

이 내 코드입니다. StackPanel_CommandBar는 스택 패널에 CommandBar가 포함되어 있습니다.

위의 코드를 사용하면 위와 아래에서 순환 오류가 발생합니다.

내가 잘못하고있는 것, 내가 위에서 말한대로 어떻게 작동시킬 수 있습니까?

도움을 주시면 감사하겠습니다.

Answer 1

두 번째 StackPanel "StackPanel_ListViews"로 작은 실수를 저지른 것 같습니다.

은 당신이 처음에 RelativePanel.Below="StackPanel_CommandBar"을 설정하지만, 레이아웃이 렌더링 될 때, 맨 처음에, 윈도우의 폭이 당신의 <VisualState x:Name="Mobile">에 Setter과의 충돌을 야기하고, 예외가 발생합니다, 0했습니다. 이 RelativePanel.Below="StackPanel_CommandBar" 코드를 삭제하면 정상적으로 작동합니다.