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