Custom trigger with user interaction mode in Universal Windows App

In Windows 10 Universal Windows App, we have few classes which helps the developers to create there own custom triggers.  These custom triggers helps the developers to change the state of the Visual state of the App based on certain conditions like App size changes and change the controls to fit in to the app’s layout and need to change the controls sizes when the user uses the app in either mouse mode or touch mode and so on. Creating  the custom triggers involves inheriting a class from StateTriggerBase class.

In this sample I have created a Custom trigger which triggers when the user changes his interaction mode. The app displays which mode the user is interacting, means if the user is in Mouse Mode or he is in Touch Mode.

Download the Source code from GitHub : https://github.com/ArunSuryaPrakash/UserInteractionMode

lets see how to create the custom triggers using the following steps.

Step 1: Create a class and inherit form the StateTriggerBase class.

Step 2: Create a event which gets triggers when the user’s app size changes. I have used this event just because i have to notify user the when the interaction mode changes so it can be identified using this event only.

Step 3: Create a property which gets changed or triggered from the custom trigger class and assign an value to it.

Step 4: On your size change event check for the mode of interaction, and change the visual state as per the interaction mode.

you can get to know the user interaction mode by using the following API.

UIViewSettings.GetForCurrentView().UserInteractionMode

Step 5: Now as per  the User interaction mode change the state using the SetActive method of the StateTriggerBase class.

public class UserInteractionTrigger : StateTriggerBase
{
private bool isInMouseMode;

public UserInteractionTrigger()
{
Window.Current.SizeChanged += SizeChanged;
}

public bool IsInMouseMode
{
get { return this.isInMouseMode; }
set
{
this.isInMouseMode = value;
}
}

private async void SizeChanged(object sender, WindowSizeChangedEventArgs e)
{
await Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () =>
{
if (UIViewSettings.GetForCurrentView().UserInteractionMode == Windows.UI.ViewManagement.UserInteractionMode.Mouse)
{
SetActive(this.IsInMouseMode);
}
else
{
SetActive(!this.IsInMouseMode);
}
});
}
}

Step 6: Now in your XAML create the Visual state and change it as per the user interaction mode.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>

<VisualState x:Name="TouchMode">
<VisualState.StateTriggers>
<local:UserInteractionTrigger IsInMouseMode="False" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="StatusText.Text" Value="You are in Touch Mode" />
</VisualState.Setters>
</VisualState>

<VisualState x:Name="MouseMode">
<VisualState.StateTriggers>
<local:UserInteractionTrigger IsInMouseMode="True" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="StatusText.Text" Value="You are in Mouse Mode" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>

<StackPanel Orientation="Horizontal"
HorizontalAlignment="Center"
VerticalAlignment="Center">

<TextBlock x:Name="StatusText"
Text=""
FontSize="24" FontWeight="Light" />
</StackPanel>
</Grid>

Step 7: Run the App.

Hope this might have helped.