Skip to content

Instantly share code, notes, and snippets.

@naotaco

naotaco/VisualStateSample.xaml

Last active October 3, 2015 07:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save naotaco/f4d87b0d110e019faf7c to your computer and use it in GitHub Desktop.
Save naotaco/f4d87b0d110e019faf7c to your computer and use it in GitHub Desktop.
Download ZIP
A sample XAML code for VisualState
Raw
VisualStateSample.xaml
<Page
...
Loaded="Page_Loaded">
<Grid x:Name="LayoutRoot">
<Grid>
<Image x:Name="Image01" Source="your_source" />
</Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="WindowWidthStates">
<VisualState x:Name="WideState">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="720" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="Image01.(Grid.ColumnSpan)" Value="1"/>
<Setter Target="Image01.(Grid.Column)" Value="1"/>
<Setter Target="Image01.Visibility" Value="Visible"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="NarrowState">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="Image01.(Grid.ColumnSpan)" Value="3"/>
<Setter Target="Image01.(Grid.Column)" Value="0"/>
<Setter Target="Image01.Visibility" Value="Collapsed"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="WindowHeightStates">
<VisualState x:Name="TallState">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowHeight="720" />
</VisualState.StateTriggers>
</VisualState>
<VisualState x:Name="ShortState">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowHeight="0" />
</VisualState.StateTriggers>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</Page>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment