4

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>
Cfun
  • 8,442
  • 4
  • 30
  • 62
Tetsa Popovicova
  • 51
  • 6
  • Check this out: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/device-orientation?tabs=windows. – Michal Diviš Feb 08 '21 at 10:40
  • What Microsoft suggests is you override the `OnSizeAllocated` method in your page and set your `StackLayout`'s orientation accordingly. Sadly, there's no way to style for the orientation the same way it can be done with `OnIdiom` or `OnPlatform`. At least no way that I'm aware of. – Michal Diviš Feb 08 '21 at 10:42

1 Answers1

6

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
Cfun
  • 8,442
  • 4
  • 30
  • 62
  • I used the style example with an implicit style impacting 4 elements on the screen. Only the last f the four elements was affected by the style change. How can I get an implicit style controlled by visual state manager orientation? – jmichas Mar 20 '22 at 02:06
  • Worth mentioning that you need to add this to the native project: Xamarin.Forms.Forms.SetFlags("StateTriggers_Experimental"); – DevDave Apr 21 '23 at 15:50