Use States for a Adaptive UI

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/>

...