SplitView Control In Adaptive Triggers In Universal Windows Program - Part 3

Before reading this article, I highly recommend reading the previous part of the series:

In universal windows program one of the best feature is Adaptive UI, once you set the UI controls screen position, based on the screen resolution automatically controls get adjusted.

All the screen resolution handle in the XAML file itself, no need to write any extra coding in the code behind page.

The following are the four classes handling the screen resolution,

  1. VisualState Manager
  2. VisualState group
  3. AdaptiveTrigger
  4. Setter


  • Visualstate manager: It is managing the visual states and control and it contains more than one visualstate group.
  • Visualstate group: In this group we specified the UI state of the controls.
  • AdaptiveTrigger: Set the condition when visualstate group should change the UI control state.
  • Setter: Set the UI control changes.


In this trigger internally handle the OnSize changed event (no need implement onsize change event in code behind file), AdaptiveTigger invoked when the MinWidth or MinHeight greater than the assigned size.



Let us see how to handle the AdaptiveTrigger in the splitview control.

As we have seen Part 1, SplitView displaymode compactinline mode good for big screen & compactoverline mode good for small screen, We change this displaymode based on the screen resolution using AdaptiveTrigger.

  1. Define the VisualStateManager & VisualStateGroups.



  2. Declare the adaptive trigger.

  3. Set the UI changes in the setter property.

    Set the UI changes

Application width is greather than 720, Adaptive trigger, event to visual state and visual state assign the UI changes to control via setter property.

Application run in the Windows Desktop greater than 720,

Application run

Application run in the Windows Desktop less than 720


Same application running in the Windows 10 mobile,

Content view area

Up Next
    Ebook Download
    View all
    View all