Adaptive triggers in a universal app.

Adaptive triggers are part of the Universal Windows application and part of Windows 10.

With a universal app. you can begin writing an application which can target multiple Windows platforms/devices, for example mobile, tablet and desktop.

When writing UI code for a variety of devices you’ll come across the problem where, for example, a button on a desktop needs to be place elsewhere when used on a mobile phone and so on.

Adaptive triggers allow us to customize layout based upon the dimensions of the device we’re running on. But wait ! This statement is slightly misleading. The trigger actually has nothing to do with the device and everything to do with the Window size of the application on the device. So in reality an AdaptiveTrigger is more like a responsive design feature in that when the Window is expanded, it’s possible one layout is used and when the Window is reduce in size maybe another layout is used.

To define an AdaptiveTrigger we use the VisualStateManager and create StateTriggers, which contain our AdaptiveTrigger(s).

For example, let’s define VisualState and AdapterTriggers for a desktop with a minimum width of 1024 pixels and a phone with minimum width of 320 pixels and we’ll a the button display differently for each device.

Note: the x:Name is there just for descriptive purposes in this example.

<Grid>
   <VisualStateManager.VisualStateGroups>
      <VisualStateGroup>
         <VisualState x:Name="DeskTop">
            <VisualState.Setters>
               <Setter Target="button.(FrameworkElement.HorizntalAlignment)" Value="Left" />
            </VisualState.Setters>
            <VisualState.StateTriggers>
              <AdaptiveTrigger MinWindowWidth="1024" />
           </VisualState.StateTriggers>
         </VisualState>
         <VisualState x:Name="Phone">
            <VisualState.Setters>
               <Setter Target="button.(FrameworkElement.HorizntalAlignment)" Value="Right" />
            </VisualState.Setters>
            <VisualState.StateTriggers>
              <AdaptiveTrigger MinWindowWidth="320" />
           </VisualState.StateTriggers>
         </VisualState>
      </VisualStateGroup>
   </VisualStateManager.VisualStateGroups>
</Grid>