How to make CompositeStateTrigger work with AdaptiveTrigger and DeviceFamilyStateTrigger UWP - xaml

Question

I am trying to make AdaptiveTrigger and DeviceFamilyStateTrigger work with CompositeStateTrigger.
Found this useful link which guided me but still unable to make it to work
I've created a sample project at GitHub to reproduce my issue here.
For reference, here's my XAML. What am I missing?
<Grid Background="AliceBlue" x:Name="gridRoot">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup >
<VisualState x:Name="narrow">
<VisualState.StateTriggers>
<triggers:CompositeStateTrigger Operator="And">
<mytrigger:AdaptiveTrigger MinWindowWidth="0" MaxWindowHeight="520" />
<triggers:DeviceFamilyStateTrigger DeviceFamily="Desktop" />
</triggers:CompositeStateTrigger>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="textBlock.Text" Value="Desktop is narrow" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="medium">
<VisualState.StateTriggers>
<triggers:CompositeStateTrigger Operator="And">
<mytrigger:AdaptiveTrigger MinWindowWidth="521" MaxWindowHeight="1199" />
<triggers:DeviceFamilyStateTrigger DeviceFamily="Desktop" />
</triggers:CompositeStateTrigger>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="textBlock.Text" Value="Desktop is medium width" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="wide">
<VisualState.StateTriggers>
<triggers:CompositeStateTrigger Operator="And">
<mytrigger:AdaptiveTrigger MinWindowWidth="1200"/>
<triggers:DeviceFamilyStateTrigger DeviceFamily="Desktop" />
</triggers:CompositeStateTrigger>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="textBlock.Text" Value="Desktop is wide" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="gridText">
<TextBlock x:Name="textBlock" FontSize="40" Text="My Text Block" Style="{StaticResource HeaderTextBlockStyle}" FontWeight="ExtraBold"/>
</Grid>
</Grid>

Answer 1

Your code is almost right. The problem here is that you've set wrong property in your AdaptiveTrigger. In the AdaptiveTrigger, we should set MinWindowWidth and MaxWindowWidth but not MaxWindowHeight.
So you can change you code like following and it should be able to work.
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="narrow">
<VisualState.StateTriggers>
<triggers:CompositeStateTrigger Operator="And">
<mytrigger:AdaptiveTrigger MaxWindowWidth="520" MinWindowWidth="0" />
<triggers:DeviceFamilyStateTrigger DeviceFamily="Desktop" />
</triggers:CompositeStateTrigger>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="textBlock.Text" Value="Desktop is narrow" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="medium">
<VisualState.StateTriggers>
<triggers:CompositeStateTrigger Operator="And">
<mytrigger:AdaptiveTrigger MaxWindowWidth="1199" MinWindowWidth="521" />
<triggers:DeviceFamilyStateTrigger DeviceFamily="Desktop" />
</triggers:CompositeStateTrigger>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="textBlock.Text" Value="Desktop is medium width" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="wide">
<VisualState.StateTriggers>
<triggers:CompositeStateTrigger Operator="And">
<mytrigger:AdaptiveTrigger MinWindowWidth="1200" />
<triggers:DeviceFamilyStateTrigger DeviceFamily="Desktop" />
</triggers:CompositeStateTrigger>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="textBlock.Text" Value="Desktop is wide" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>