Custom Visual States & Page in UWP

Nathan Sokalski 4,121 Reputation points
2020-06-15T16:10:34.82+00:00

I am working on converting my UWP apps to dual screen. This will obviously involve modifying the layout when the user rotates the device, switches between single & dual screen, or resizes the app. I figured the best way to do this would be with Visual States. I have used Visual States when creating Custom Controls or using a ControlTemplate, but I have never created my own custom VisualStateGroup. I have placed the following VisualStateGroup in the root Grid of my Page (based on what I have found it cannot be placed in the root element, which is why it is in the root Grid instead of the Page): 

<VisualStateManager.VisualStateGroups>
 <VisualStateGroup x:Name="DualScreenLayoutStates" CurrentStateChanged="DualScreenLayoutStates_CurrentStateChanged">
 <VisualState x:Name="MainPageUnknownState"/>
 <VisualState x:Name="MainPagePortraitState"/>
 <VisualState x:Name="MainPageLandscapeState"/>
 <VisualState x:Name="MainPageWideState"/>
 <VisualState x:Name="MainPageTallState"/>
 </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

I have found the following properties, events, and methods that I expect to need:

VisualStateGroup.CurrentState

VisualStateGroup.CurrentStateChanged

VisualStateManager.GoToState

I call VisualStateManager.GoToState in all of the following events:

Page.Loaded

SimpleOrientationSensor (this is an event that is used to detect when the device is rotated)

Page.SizeChanged

However, CurrentStateChanged is not always called (even the first time, which is probably the most important, since the user will not be frequently rotating the device, switching between single & double screen, or resizing the app, but the app will obviously always get opened). I realize that CurrentStateChanged is not expected to be called every time I call GoToState, which is why I want to make the initial state MainPageUnknownState and include Page.Loaded as one of the places I call it (so that I can be sure that CurrentStateChanged when the Page first opens). Can anybody help me here? Thanks.

Universal Windows Platform (UWP)