Define different States for different Resolutions

• 0 epx, Name e.g. VisualeState0000min
• 500 epx, Name e.g. VisualeState0500min
• 800 epx, Name e.g. VisualeState0800min
• 1000 epx, Name e.g. VisualeState1000min

epx = Effective Pixels.

Change one ore more properties

• FontSize
• Control-Locations in Grids
• Stretch (None, Fill, Uniform, UniformToFill)
• Widths & Heights
• …

Change State with C#-Code

public MainPage()
{
  this.InitializeComponent();

  this.SizeChanged += (s, e) =>
  {
    var state = "VisualeState0000min";
    if(e.NewSize.Width > 500)
      state = "VisualeState0500min";
    else if(e.NewSize.Width > 800)
      state = "VisualeState0800min";
    else if(e.NewSize.Width > 1000)
      state = "VisualeState1000min";

    VisualStateManager.GoToState(this, state, true);
  }
}

Change State with Adaptive Trigger

<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisualStateGroup">
 <VisualState x:Name="VisualState0000min">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowsWidth="0" />
 <VisualState.StateTriggers/>
<VisualState x:Name="VisualState0500min">
 <VisualState.StateTriggers>
  <AdaptiveTrigger MinWindowsWidth="501" />
 <VisualState.StateTriggers/>
  <VisualState x:Name="VisualState0800min">
 <VisualState.StateTriggers>
  <AdaptiveTrigger MinWindowsWidth="801" />
 <VisualState.StateTriggers/>
  <VisualState x:Name="VisualState1000min">
 <VisualState.StateTriggers>
  <AdaptiveTrigger MinWindowsWidth="1001" />
<VisualState.StateTriggers/>

...