{"id":9727,"date":"2022-11-08T22:23:27","date_gmt":"2022-11-08T22:23:27","guid":{"rendered":"https:\/\/putridparrot.com\/blog\/?p=9727"},"modified":"2022-11-09T14:49:57","modified_gmt":"2022-11-09T14:49:57","slug":"adaptivetrigger-working-in-maui-7-x","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/adaptivetrigger-working-in-maui-7-x\/","title":{"rendered":"AdaptiveTrigger working in MAUI 7.x"},"content":{"rendered":"

This is just a quick update to my post Responsive, Reactive, Adaptive design in MAUI<\/a>. The AdaptiveTrigger<\/em> now works, so we can create adaptive UI’s like this<\/p>\n

\r\n<?xml version="1.0" encoding="utf-8" ?>\r\n<ContentPage xmlns="http:\/\/schemas.microsoft.com\/dotnet\/2021\/maui"\r\n             xmlns:x="http:\/\/schemas.microsoft.com\/winfx\/2009\/xaml"\r\n             x:Class="AdaptiveTriggerTest.MainPage">\r\n    <VisualStateManager.VisualStateGroups>\r\n        <VisualStateGroup x:Name="Responsive">\r\n            <VisualState x:Name="Large">\r\n                <VisualState.StateTriggers>\r\n                    <AdaptiveTrigger MinWindowWidth="1200" \/>\r\n                <\/VisualState.StateTriggers>\r\n                <VisualState.Setters>\r\n                    <Setter Property="BackgroundColor" Value="Blue"\/>\r\n\r\n                    <Setter TargetName="MainLabel" Property="Label.TextColor" Value="Green"\/>\r\n                    <Setter TargetName="MainLabel" Property="Label.FontSize" Value="128"\/>\r\n                <\/VisualState.Setters>\r\n            <\/VisualState>\r\n            <VisualState x:Name="Default">\r\n                <VisualState.StateTriggers>\r\n                    <AdaptiveTrigger MinWindowWidth="0" \/>\r\n                <\/VisualState.StateTriggers>\r\n                <VisualState.Setters>\r\n                    <Setter Property="BackgroundColor" Value="Azure"\/>\r\n\r\n                    <Setter TargetName="MainLabel" Property="Label.TextColor" Value="Red"\/>\r\n                    <Setter TargetName="MainLabel" Property="Label.FontSize" Value="48"\/>\r\n                <\/VisualState.Setters>\r\n            <\/VisualState>\r\n        <\/VisualStateGroup>\r\n    <\/VisualStateManager.VisualStateGroups>\r\n\r\n    <VerticalStackLayout\r\n            Spacing="25"\r\n            Padding="30,0"\r\n            VerticalOptions="Center">\r\n\r\n        <Label\r\n                x:Name="MainLabel"\r\n                Text="Hello, World!"\r\n                SemanticProperties.HeadingLevel="Level1"\r\n                FontSize="32"\r\n                HorizontalOptions="Center" \/>\r\n    <\/VerticalStackLayout>\r\n<\/ContentPage>\r\n<\/pre>\n
The AdaptiveTrigger MinWindowWidth=”1200″<\/em> basically designates what the UI style etc. is for Window’s with a width >= 1200. The second AdaptiveTrigger<\/em> is for anything smaller.<\/p>\n","protected":false},"excerpt":{"rendered":"
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" […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[330],"tags":[],"class_list":["post-9727","post","type-post","status-publish","format-standard","hentry","category-maui"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/9727","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=9727"}],"version-history":[{"count":2,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/9727\/revisions"}],"predecessor-version":[{"id":9729,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/9727\/revisions\/9729"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=9727"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=9727"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=9727"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}