This is just a quick update to my post Responsive, Reactive, Adaptive design in MAUI. The AdaptiveTrigger now works, so we can create adaptive UI’s like this
<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="AdaptiveTriggerTest.MainPage"> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="Responsive"> <VisualState x:Name="Large"> <VisualState.StateTriggers> <AdaptiveTrigger MinWindowWidth="1200" /> </VisualState.StateTriggers> <VisualState.Setters> <Setter Property="BackgroundColor" Value="Blue"/> <Setter TargetName="MainLabel" Property="Label.TextColor" Value="Green"/> <Setter TargetName="MainLabel" Property="Label.FontSize" Value="128"/> </VisualState.Setters> </VisualState> <VisualState x:Name="Default"> <VisualState.StateTriggers> <AdaptiveTrigger MinWindowWidth="0" /> </VisualState.StateTriggers> <VisualState.Setters> <Setter Property="BackgroundColor" Value="Azure"/> <Setter TargetName="MainLabel" Property="Label.TextColor" Value="Red"/> <Setter TargetName="MainLabel" Property="Label.FontSize" Value="48"/> </VisualState.Setters> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <VerticalStackLayout Spacing="25" Padding="30,0" VerticalOptions="Center"> <Label x:Name="MainLabel" Text="Hello, World!" SemanticProperties.HeadingLevel="Level1" FontSize="32" HorizontalOptions="Center" /> </VerticalStackLayout> </ContentPage>
The AdaptiveTrigger MinWindowWidth=”1200″ basically designates what the UI style etc. is for Window’s with a width >= 1200. The second AdaptiveTrigger is for anything smaller.