Visual states with AdaptiveTrigger do not work

Question

I have ListView inside of PivotItem. My data template is UserControl which contains a couple of visual states with adaptive trigger. The problem is that my visual states do not work. What is wrong?

part of my ListView markup:

<ListView.ItemTemplate>
          <DataTemplate x:DataType="models:RecommendedAnime">
               <controls:RecomendationControl/>
          </DataTemplate>
</ListView.ItemTemplate>

my UserControl xaml:

<UserControl
x:Class="MyAnimelistRT.Controls.RecomendationControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:system="using:System"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="WindowStates">
        <VisualState x:Name="NarrowState">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="0" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="ImageCover.(RelativePanel.Below)" Value="TextBlockCover" />
                <Setter Target="ListViewRecomendations.(RelativePanel.Below)" Value="ImageCover" />
            </VisualState.Setters>
        </VisualState>
        <VisualState x:Name="WideState">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="500" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="TextBlockCover.(RelativePanel.RightOf)" Value="ImageCover" />
                <Setter Target="ListViewRecomendations.(RelativePanel.RightOf)" Value="ImageCover" />
                <Setter Target="ListViewRecomendations.(RelativePanel.Below)" Value="TextBlockCover" />
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

<RelativePanel>
    <TextBlock x:Name="TextBlockCover" Style="{StaticResource SubheaderTextBlockStyle}" Text="{x:Bind Item.Title,Mode=OneWay}" Margin="4,0,0,0"/>
    <Image x:Name="ImageCover" HorizontalAlignment="Left" Source="{x:Bind Item.ImageUrl,Mode=OneWay}" Stretch="None"/>
    <ListView x:Name="ListViewRecomendations" ItemsSource="{x:Bind Item.Recomendations,Mode=OneWay}" SelectionMode="None" IsItemClickEnabled="False">
        <ListView.ItemTemplate>
            <DataTemplate x:DataType="system:String">
                <TextBlock Style="{StaticResource BodyTextBlockStyle}" Text="{x:Bind}"/>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</RelativePanel>

My UserControl code-behind:

public sealed partial class RecomendationControl
{
    public RecommendedAnime Item => (RecommendedAnime) DataContext;

    public RecomendationControl()
    {
        InitializeComponent();
        DataContextChanged += (s, e) => Bindings.Update();
    }
}

Tomáš Bezouška Tomáš Bezouška · Accepted Answer · 2016-01-10T13:57:28

It's just a hunch, but can you try wrapping everything inside the UserControl inside a Grid? I remember I had a problem like this as well and putting it all (including the VisualStateManager) inside a grid helped.

Visual states with AdaptiveTrigger do not work

2 Answers