使用RelativePanel和VisualStateManager構建適應性佈局

Question

我嘗試在嵌入在flipview中的用戶控件內使用VisualStateManager。但與下面的代碼並不儘管它的工作真的看起來像Building adaptive layout with RelativePanel

<UserControl 
     x:Class="JintekiArchives.Views.CardDetailsControl" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:local="using:JintekiArchives" 
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
     mc:Ignorable="d" 
     d:DesignHeight="300" 
     d:DesignWidth="400"> 

     <Grid> 
      <VisualStateManager.VisualStateGroups> 
       <VisualStateGroup x:Name="AdaptiveVisualStateGroup"> 
        <VisualState x:Name="VisualStateNarrow"> 
         <VisualState.StateTriggers> 
          <AdaptiveTrigger MinWindowWidth="0" /> 
         </VisualState.StateTriggers> 
         <VisualState.Setters> 
          <Setter Target="descriptionPanel.(RelativePanel.Below)" Value="imageBorder" /> 
          <Setter Target="textPanel.(RelativePanel.Below)" Value="descriptionPanel" /> 
         </VisualState.Setters> 
        </VisualState> 
        <VisualState x:Name="VisualStateNormal"> 
         <VisualState.StateTriggers> 
          <AdaptiveTrigger MinWindowWidth="521" /> 
         </VisualState.StateTriggers> 
         <VisualState.Setters> 
          <Setter Target="descriptionPanel.(RelativePanel.Below)" Value="imageBorder" /> 
          <Setter Target="textPanel.(RelativePanel.Below)" Value="descriptionPanel" /> 
         </VisualState.Setters> 
        </VisualState> 
        <VisualState x:Name="VisualStateWide"> 
         <VisualState.StateTriggers> 
          <AdaptiveTrigger MinWindowWidth="1200" /> 
         </VisualState.StateTriggers> 
         <VisualState.Setters> 
          <Setter Target="descriptionPanel.(RelativePanel.RightOf)" Value="imageBorder" /> 
          <Setter Target="textPanel.(RelativePanel.RightOf)" Value="descriptionPanel" /> 
         </VisualState.Setters> 
        </VisualState> 
       </VisualStateGroup> 
      </VisualStateManager.VisualStateGroups> 

      <RelativePanel Margin="20"> 
       <RelativePanel.Background> 
        <ImageBrush x:Name="backgroundGrid" ImageSource="{Binding FactionImage}" Opacity="0.1" /> 
       </RelativePanel.Background> 
       <StackPanel x:Name="titlePanel" Orientation="Horizontal" Margin="24" 
         RelativePanel.AlignTopWithPanel="True" 
         RelativePanel.AlignLeftWithPanel="True" 
         RelativePanel.AlignRightWithPanel="True"> 
        <TextBlock FontSize="48" FontWeight="SemiBold" Text="{Binding Title}"></TextBlock> 
       </StackPanel> 
       <StackPanel Name="imageBorder" Width="300" Height="420" Margin="24, 24" 
         RelativePanel.Below="titlePanel" 
         RelativePanel.AlignLeftWithPanel="True" 
         RelativePanel.AlignRightWithPanel="false"> 
        <Image Source="{Binding ImageSrc}" Stretch="None"/> 
       </StackPanel> 
       <StackPanel Name="descriptionPanel" Orientation="Vertical" Margin="24, 24" 
         RelativePanel.AlignTopWith="imageBorder" 
         RelativePanel.RightOf="imageBorder"> 
        <StackPanel Orientation="Horizontal" Margin="5"> 
         <TextBlock> 
          <Run FontWeight="Bold" Text="Faction : "></Run> 
          <Run Text="{Binding Faction}"></Run> 
         </TextBlock> 
        </StackPanel> 
        <StackPanel Orientation="Horizontal" Margin="5"> 
         <TextBlock> 
          <Run FontWeight="Bold" Text="Set : "></Run> 
          <Run Text="{Binding Set}"></Run> 
         </TextBlock> 
        </StackPanel> 
        <StackPanel Orientation="Horizontal" Margin="5"> 
         <TextBlock> 
          <Run FontWeight="Bold" Text="Type : "></Run> 
          <Run Text="{Binding Type}"></Run> 
         </TextBlock> 
        </StackPanel> 
       </StackPanel> 
       <StackPanel Name="textPanel" Orientation="Vertical" Margin="24,24" 
         RelativePanel.AlignTopWith="imageBorder" 
         RelativePanel.RightOf="descriptionPanel"> 
        <StackPanel Orientation="Horizontal" Margin="5"> 
         <TextBlock Width="600" TextWrapping="Wrap" TextTrimming="WordEllipsis" Text="{Binding Text}"></TextBlock> 
        </StackPanel> 
        <StackPanel Orientation="Horizontal" Margin="5"> 
         <TextBlock Width="600" TextWrapping="Wrap" TextTrimming="WordEllipsis" FontStyle="Italic" Text="{Binding Flavor}"> 
         </TextBlock> 
        </StackPanel> 
        <StackPanel Padding="5" Orientation="Horizontal" Margin="5"> 
         <TextBlock> 
          <Run Text="Illustrated by "></Run> 
          <Run Text="{Binding Illustrator}"></Run> 
         </TextBlock> 
        </StackPanel> 
       </StackPanel> 
      </RelativePanel> 
     </Grid> 
    </UserControl> 

Answer 1

提到的這裏的問題是在你的佈局有關Conflicting relationships與RelativePanel。

如果您設置多個定位元素的相同邊的關係，那麼結果可能會導致佈局中存在衝突的關係。發生這種情況時，該關係在以下優先順序應用：

• 面板排列關係（AlignTopWithPanel，AlignLeftWithPanel，...）會首先應用。
• 第二次應用同級隊列關係（AlignTopWith,AlignLeftWith，...）。
• 最後應用同胞位置關係（Above,Below,RightOf,LeftOf）。

的面板中心取向性（AlignVerticalCenterWith，AlignHorizontalCenterWithPanel，...）通常用於獨立於其它約束條件，並且如果沒有衝突被應用。

對UI元素的HorizontalAlignment和VerticalAlignment屬性在關係屬性被評估和應用後應用。如果所需大小小於可用大小，則這些屬性控制元素在可用大小內的位置。

因此AlignTopWith的優先級高於Below。在您的代碼中，您已將RelativePanel.AlignTopWith設置爲imageBorder,descriptionPanel和textPanel。因此，像descriptionPanel.(RelativePanel.Below)這樣的設置在VisualState中將不起作用。

要解決這個問題，我建議你在刪除VisualState的RelativePanel的附加屬性在descriptionPanel和textPanel，只是設置這些附加屬性，而無需使用AlignTopWith。

由於我不知道你想要的佈局是什麼，在這裏我只用兩個可視狀態，例如：

<VisualStateManager.VisualStateGroups> 
    <VisualStateGroup x:Name="AdaptiveVisualStateGroup"> 
     <VisualState x:Name="VisualStateNarrow"> 
      <VisualState.StateTriggers> 
       <AdaptiveTrigger MinWindowWidth="0" /> 
      </VisualState.StateTriggers> 
      <VisualState.Setters> 
       <Setter Target="descriptionPanel.(RelativePanel.Below)" Value="imageBorder" /> 
       <Setter Target="textPanel.(RelativePanel.Below)" Value="descriptionPanel" /> 
      </VisualState.Setters> 
     </VisualState> 
     <VisualState x:Name="VisualStateWide"> 
      <VisualState.StateTriggers> 
       <AdaptiveTrigger MinWindowWidth="1200" /> 
      </VisualState.StateTriggers> 
      <VisualState.Setters> 
       <Setter Target="descriptionPanel.(RelativePanel.Below)" Value="titlePanel" /> 
       <Setter Target="descriptionPanel.(RelativePanel.RightOf)" Value="imageBorder" /> 
       <Setter Target="textPanel.(RelativePanel.Below)" Value="titlePanel" /> 
       <Setter Target="textPanel.(RelativePanel.RightOf)" Value="descriptionPanel" /> 
      </VisualState.Setters> 
     </VisualState> 
    </VisualStateGroup> 
</VisualStateManager.VisualStateGroups>