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:

• SplitView Control in Universal windows program - Part 1
• SplitView Control With Submenu - Part 2

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

Where:

• 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.

AdaptiveTrigger

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.

Example:



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.
   
   

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 in the Windows Desktop less than 720



Same application running in the Windows 10 mobile,