VisualState AdaptiveTrigger not working

Question

I watched the “From the small screen to the big screen: creating universal Windows applications using XAML” session from the BUILD event. http://channel9.msdn.com/Events/Build/2015/2-679

I would like to try AdaptiveTrigger, but it does not work with my minimal Windows 10 UWP application.

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

Hello!

Answer 1

Yes, this happens when you put groups on a page instead of the first control. Try entering:

 <Grid...> <VisualStateManager.VisualStateGroups> </Grid> 

Also, if you want to create more complex adaptive triggers, I made an article here: advanced codeproject view states