RelativePanelとVisualStateManagerによるアダプティブレイアウトの構築

Question

私はフリップビューに埋め込まれたユーザーコントロール内でVisualStateManagerを使用しようとしています。しかし、以下のコードは、それにもかかわらず、動作しないと、本当にここでの問題は、あなたのレイアウトでRelativePanelでConflicting relationshipsに関連している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

で述べたもののように見えます。

要素の同じエッジを対象とする複数のリレーションシップを設定すると、結果としてレイアウトに矛盾する関係が生じることがあります。このような場合、関係は、次の優先順位で適用されます

• パネル配向関係（AlignTopWithPanel、AlignLeftWithPanelは、...）は、最初に適用されます。
• 兄弟配置の関係（AlignTopWith,AlignLeftWith、...）が2番目に適用されます。
• 兄弟の位置関係（Above,,、LeftOf）が最後に適用されます。

パネル中央配向性（AlignVerticalCenterWith、AlignHorizontalCenterWithPanel、...）は、典型的には、独立して他の制約の使用され、競合がない場合に適用されます。

UI要素のプロパティは、関係プロパティが評価されて適用された後に適用されます。これらのプロパティは、目的のサイズが使用可能なサイズよりも小さい場合、要素の使用可能なサイズ内の要素の配置を制御します。

したがって、AlignTopWithの優先度は、Belowより高いです。あなたのコードでは、RelativePanel.AlignTopWithをimageBorderに設定しました。descriptionPanelとtextPanelです。したがって、descriptionPanel.(RelativePanel.Below)の設定はVisualStateには機能しません。この問題を解決するには

、私はあなたがあなたのdescriptionPanelとtextPanelにRelativePanelの添付プロパティを削除し、ちょうどAlignTopWithを使用せずにVisualStateでこれらの添付プロパティを設定をお勧めしたいです。

私はあなたの希望のレイアウトは、ここで私はちょうど例えば2つの視覚的な状態を使用しているかわからないんだけどとして：

<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>