Building Adaptative Layout with RelativePanel and VisualStateManager - win-universal-app

Question

I try to use VisualStateManager inside a user control embedded in a flipview. but with the code below does not work despite it really look like the one mentioned 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

The problem here is related to the Conflicting relationships with RelativePanel in your layout.
If you set multiple relationships that target the same edge of an element, you might have conflicting relationships in your layout as a result. When this happens, the relationships are applied in the following order of priority:
Panel alignment relationships (AlignTopWithPanel, AlignLeftWithPanel, …) are applied first.
Sibling alignment relationships (AlignTopWith, AlignLeftWith, …) are applied second.
Sibling positional relationships (Above, Below, RightOf, LeftOf) are applied last.
The panel-center alignment properties (AlignVerticalCenterWith, AlignHorizontalCenterWithPanel, ...) are typically used independently of other constraints and are applied if there is no conflict.
The HorizontalAlignment and VerticalAlignment properties on UI elements are applied after relationship properties are evaluated and applied. These properties control the placement of the element within the available size for the element, if the desired size is smaller than the available size.
So the priority of AlignTopWith is higher than Below. And in your code, you've set RelativePanel.AlignTopWith to imageBorder in descriptionPanel and textPanel. Therefore the settings like descriptionPanel.(RelativePanel.Below) in VisualState won't work.
To fix this issue, I'd suggest you delete the attached properties of RelativePanel in your descriptionPanel and textPanel and just set these attached properties in VisualState without using AlignTopWith.
As I'm not sure what your desired layout is, here I just use two visual states for example:
<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>