Styling depending on screen orientation in Xamarin forms

Question

I am styling on phone and tablet but how can I add the option also for orientation? this is all for portrait but how can I add option for horizontal orientation?

 <Style TargetType="Grid" x:Key="DocType">
                        <Setter Property="HeightRequest">
                        <Setter.Value>
                            <OnIdiom Phone="50" Tablet="80" />
                        </Setter.Value>
                    </Setter>
                 <Setter Property="BackgroundColor" Value="#F4F5F7"/>
             </Style>

Answer 1

You can use OrientationStateTrigger with VisualStateManager here is an example:

<Grid>
     <VisualStateManager.VisualStateGroups>
          <VisualStateGroup>
               <VisualState
                    x:Name="Landscape">
                    <VisualState.StateTriggers>
                         <OrientationStateTrigger Orientation="Landscape" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                         <Setter Property="BackgroundColor" Value="Blue" />
                    </VisualState.Setters>
               </VisualState>
               <VisualState
                    x:Name="Portrait">
                    <VisualState.StateTriggers>
                         <OrientationStateTrigger Orientation="Portrait" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                         <Setter Property="BackgroundColor" Value="Red" />
                    </VisualState.Setters>
                </VisualState>
           </VisualStateGroup>
      </VisualStateManager.VisualStateGroups> 
</Grid>

Source

EDIT

VisualStateManager inside a style, combined with OnIdiom

<Style TargetType="Grid" x:Key="DocType">
    <Setter Property="HeightRequest">
        <Setter.Value>
            <OnIdiom Phone="50" Tablet="80" />
        </Setter.Value>
    </Setter>
    
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup>
               <VisualState x:Name="Landscape">
                    <VisualState.StateTriggers>
                         <OrientationStateTrigger Orientation="Landscape" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                                    <Setter Property="BackgroundColor">
                                        <Setter.Value>
                                            <OnIdiom Phone="Blue" Tablet="Green" />
                                        </Setter.Value>
                                    </Setter>
                    </VisualState.Setters>
               </VisualState>
               
               <VisualState x:Name="Portrait">
                    <VisualState.StateTriggers>
                         <OrientationStateTrigger Orientation="Portrait" />
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                                    <Setter Property="BackgroundColor">
                                        <Setter.Value>
                                            <OnIdiom Phone="Yellow" Tablet="Purple" />
                                        </Setter.Value>
                                    </Setter>
                    </VisualState.Setters>
                </VisualState>
           </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

in this example:

Mode	Tablet	Phone
Landscape	Green	Blue
Portrait	Purple	Yellow