Erstellen eines adaptiven Layouts mit RelativePanel und VisualStateManager

Question

Ich versuche VisualStateManager in einem Benutzersteuerelement zu verwenden, das in einem Flipview eingebettet ist. aber mit dem Code unten funktioniert nicht obwohl es sieht wirklich wie die erwähnte in 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

Das Problem hier bezogen wird auf die Conflicting relationships mit RelativePanel in Ihrem Layout.

Wenn Sie mehrere Beziehungen festlegen, die auf die gleiche Kante eines Elements ausgerichtet sind, haben Sie möglicherweise in Ihrem Layout widersprüchliche Beziehungen als Ergebnis. Wenn dies geschieht, werden die Beziehungen in der folgenden Reihenfolge ihrer Priorität angewendet:

• Beziehungen Ausrichtung Panel (AlignTopWithPanel, AlignLeftWithPanel, ...) werden zuerst angewendet.
• Geschwisterausrichtung Beziehungen (AlignTopWith, AlignLeftWith, ...) werden Sekunde angewendet.
• Geschwisterpositionsbeziehungen (Above, Below, RightOf, LeftOf) werden zuletzt angewendet.

Die tafel zentrierte Ausrichtung Eigenschaften (AlignVerticalCenterWith, AlignHorizontalCenterWithPanel, ...) sind in der Regel unabhängig von anderen Einschränkungen verwendet und angewendet werden, wenn es keinen Konflikt gibt.

Die Eigenschaften HorizontalAlignment und VerticalAlignment auf UI-Elementen werden angewendet, nachdem Beziehungseigenschaften ausgewertet und angewendet wurden. Diese Eigenschaften steuern die Platzierung des Elements innerhalb der verfügbaren Größe für das Element, wenn die gewünschte Größe kleiner als die verfügbare Größe ist.

Die Priorität von AlignTopWith ist also höher als Below. Und in Ihrem Code haben Sie RelativePanel.AlignTopWith zu imageBorder in descriptionPanel und textPanel festgelegt. Daher funktionieren die Einstellungen wie descriptionPanel.(RelativePanel.Below) in VisualState nicht.

um dieses Problem zu beheben, ich würde vorschlagen, dass Sie die anhängenden Eigenschaften von RelativePanel in Ihren descriptionPanel und textPanel und einfach eingestellt löschen diese angefügten Eigenschaften in VisualState ohne AlignTopWith zu verwenden.

Wie ich bin nicht sicher, was das gewünschte Layout, hier habe ich nur zwei optische Zustände verwenden, zB:

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