You can define the VisualStateGroup for the user control as well as the page root element. But then you have to register the user control as a layout aware control (if you are using layout aware page as a base, if not you have to call GoToState on that specific
control). You can try it without the Loaded and Unloaded to compare the result. These methods are inherited from the LayoutAwarePage and are used to register and unregister controls in the list of layout aware controls.
<controls:MyLayoutAwareControl Loaded="StartLayoutUpdates" Unloaded="StopLayoutUpdates"></controls:MyLayoutAwareControl>
And the user control would look something like this (for instance a control that displays a text in black in full and red in snapped view):
<UserControl
x:Class="MySolution.UserControls.MyLayoutAwareControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MySolution.UserControls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<Grid>
<TextBlock Name="MyTextControl" Width="400" FontSize="17" Foreground="Black" Text="Here is the Text Value"></TextBlock>
<VisualStateManager.VisualStateGroups>
<!-- Visual states reflect the application's view state -->
<VisualStateGroup x:Name="ApplicationViewStates">
<VisualState x:Name="FullScreenLandscape"/>
<VisualState x:Name="Filled"/>
<VisualState x:Name="FullScreenPortrait" />
<VisualState x:Name="Snapped">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="MyTextControl" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="Red"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="SharingMode"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</UserControl>
Hope it helps.
Can Bilgin
Blog
CompuSight
