mchSamples-MAUI/ch02_DesigningViews/ex_ResponsivePage/Resources/Styles/MyStyles.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ResourceDictionary xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:mytriggers="clr-namespace:ex_ResponsivePage"
             xmlns:views="clr-namespace:ex_ResponsivePage.Views">

    <Style x:Key="MyBackgroundTrigger"
           TargetType="Page">
        <Setter Property="VisualStateManager.VisualStateGroups">
            <VisualStateGroupList>
                <VisualStateGroup>
                    <VisualState x:Name="Portrait">
                        <VisualState.StateTriggers>
                            <OrientationStateTrigger Orientation="Portrait" />
                        </VisualState.StateTriggers>
                        <VisualState.Setters>
                            <Setter Property="BackgroundColor"
                                    Value="DarkSalmon" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="Landscape">
                        <VisualState.StateTriggers>
                            <OrientationStateTrigger Orientation="Landscape" />
                        </VisualState.StateTriggers>
                        <VisualState.Setters>
                            <Setter Property="BackgroundColor"
                                    Value="DarkOrchid" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateGroupList>
        </Setter>
    </Style>

    <ControlTemplate x:Key="portraitLayout">
        <views:PortraitView/>
    </ControlTemplate>

    <ControlTemplate x:Key="landscapeLayout">
        <views:LandscapeView/>
    </ControlTemplate>

    <Style x:Key="ByIdiomTrigger"
           TargetType="ContentView">
        <Setter Property="VisualStateManager.VisualStateGroups">
            <VisualStateGroupList>
                <VisualStateGroup>
                    <VisualState x:Name="Portrait">
                        <VisualState.StateTriggers>
                            <mytriggers:IdiomStateTrigger Idiom="Phone" />
                        </VisualState.StateTriggers>
                        <VisualState.Setters>
                            <Setter Property="ControlTemplate"
                                    Value="{StaticResource portraitLayout}" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="Landscape">
                        <VisualState.StateTriggers>
                            <mytriggers:IdiomStateTrigger Idiom="Tablet" />
                        </VisualState.StateTriggers>
                        <VisualState.Setters>
                            <Setter Property="ControlTemplate"
                                    Value="{StaticResource landscapeLayout}" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateGroupList>
        </Setter>
    </Style>

    <Style x:Key="MyOrientationTrigger"
           TargetType="ContentView">
        <Setter Property="VisualStateManager.VisualStateGroups">
            <VisualStateGroupList>
                <VisualStateGroup>
                    <VisualState x:Name="Portrait">
                        <VisualState.StateTriggers>
                            <OrientationStateTrigger Orientation="Portrait" />
                        </VisualState.StateTriggers>
                        <VisualState.Setters>
                            <Setter Property="ControlTemplate"
                                    Value="{StaticResource portraitLayout}" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="Landscape">
                        <VisualState.StateTriggers>
                            <OrientationStateTrigger Orientation="Landscape" />
                        </VisualState.StateTriggers>
                        <VisualState.Setters>
                            <Setter Property="ControlTemplate"
                                    Value="{StaticResource landscapeLayout}" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateGroupList>
        </Setter>
    </Style>

    <Style x:Key="FlyoutTrigger"
           TargetType="Page">
        <Setter Property="VisualStateManager.VisualStateGroups">
            <VisualStateGroupList>
                <VisualStateGroup>
                    <VisualState x:Name="Portrait">
                        <VisualState.StateTriggers>
                            <OrientationStateTrigger Orientation="Portrait" />
                        </VisualState.StateTriggers>
                        <VisualState.Setters>
                            <Setter Property="Shell.FlyoutBehavior"
                                    Value="Flyout"/>
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="Landscape">
                        <VisualState.StateTriggers>
                            <OrientationStateTrigger Orientation="Landscape" />
                        </VisualState.StateTriggers>
                        <VisualState.Setters>
                            <Setter Property="Shell.FlyoutBehavior"
                                    Value="Locked"/>
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateGroupList>
        </Setter>
    </Style>

    <Style x:Key="ByOrientationAndIdiomTrigger"
           TargetType="ContentView">
        <Setter Property="VisualStateManager.VisualStateGroups">
            <VisualStateGroupList>
                <VisualStateGroup>
                    <VisualState x:Name="PhonePortrait">
                        <VisualState.StateTriggers>
                            <mytriggers:IdiomAndOrientationStateTrigger Idiom="Phone" Orientation="Portrait" />
                        </VisualState.StateTriggers>
                        <VisualState.Setters>
                            <Setter Property="ControlTemplate"
                                    Value="{StaticResource portraitLayout}" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="PhoneLandscape">
                        <VisualState.StateTriggers>
                            <mytriggers:IdiomAndOrientationStateTrigger Idiom="Phone" Orientation="Landscape" />
                        </VisualState.StateTriggers>
                        <VisualState.Setters>
                            <Setter Property="ControlTemplate"
                                    Value="{StaticResource landscapeLayout}" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="TabletLandscape">
                        <VisualState.StateTriggers>
                            <mytriggers:IdiomAndOrientationStateTrigger Idiom="Tablet" Orientation="Unknown" />
                        </VisualState.StateTriggers>
                        <VisualState.Setters>
                            <Setter Property="ControlTemplate"
                                    Value="{StaticResource landscapeLayout}" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateGroupList>
        </Setter>
    </Style>

</ResourceDictionary>