VisualState AdaptiveTrigger not firing

Question

i watched the session "From the Small Screen to the Big Screen: Building Universal Windows App Experiences with XAML" from the BUILD event. http://channel9.msdn.com/Events/Build/2015/2-679

I´d like to try the AdaptiveTrigger but it doesn´t fire with my minimal Windows 10 UWP app.

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="WindowSizeStates">
        <VisualState x:Name="WideState">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="800"/>
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="rect.Fill" Value="Beige" />
            </VisualState.Setters>
        </VisualState>
        <VisualState x:Name="NarrowState">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="0" />
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="rect.Fill" Value="White" />
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <RelativePanel>
        <Rectangle x:Name="rect" Width="100" Height="100" RelativePanel.AlignTopWithPanel="True" Fill="Beige"/>
    </RelativePanel>
</Grid>

But nothing happens. It seems that the trigger is simply not fired. Did i miss something?

Regards!

Answer 1

Yes it happens when you put the groups in the Page instead inside the first control. Try put inside:

<Grid...>
   <VisualStateManager.VisualStateGroups>

</Grid>

Apart if you want to make more complex adaptative triggers I made an article here: codeproject advanced view states