Skip to main content

Working with Responsive Helpers

Overview​

Grial’s Responsive Helpers are Xaml Extensions that provide fine-grained control of visual elements properties values depending on device current orientation. These values can also vary depending on the device type.

The following example hides the Grid when the device rotates to landscape:

<Grid IsVisible="{ grial:OnOrientationBool Landscape=false, Portrait=true }">
    ...

Usage​

The general syntax is:

    <VisualElement Property="{ grial:OnOrientation<Type> <ResponsiveCase>=value }" />

Where <Type> can be either Int, Double, Color, String, Bool, CornerRadius, SizeRequest, Thickness, GridLength, RowDefinitions, ColumnDefinitions or LayoutOptions.

And <ResponsiveCase> can be:

  • Default
    • Applies when there is not a specific match.
  • Portrait
    • Applies only when the device (cellphone or tablet) is in portrait orientation and there is not a more specific match.
  • Landscape
    • Applies only when the device (cellphone or tablet) is in landscape orientation and there is not a more specific match.
  • PortraitPhone
    • Applies only when the device is a phone and is in portrait orientation.
  • PortraitTablet
    • Applies only when the device is a tablet and is in portrait orientation.
  • PortraitDesktop
    • Applies only when the device is a desktop and is in portrait orientation.
  • LandscapePhone
    • Applies only when the device is a phone and is in landscape orientation.
  • LandscapeTablet
    • Applies only when the device is a tablet and is in landscape orientation.
  • LandscapeDesktop
    • Applies only when the device is a desktop and is in landscape orientation.

Responsive helpers can be applied to multiple properties on the same element:

<Label
    Text="{ 
        grial:OnOrientationString 
            Portrait=IsPortrait, 
            Landscape=IsLandscape
        }" 
    TextColor="{ 
        grial:OnOrientationColor
            Default=Red,
            PortraitDesktop=Green 
        }"
    Rotation="{ 
        grial:OnOrientationInt 
            Default=0, 
            Landscape=90 
        }"
    IsVisible="{ 
        grial:OnOrientationBool 
            Default=true, 
            PortraitDesktop=false 
        }"
/>

And also be combined with .NET MAUI native OnPlatform:

<Label 
    Text="Funny label!" 
    FontSize="{ grial:OnOrientationDouble 
        Portrait={OnPlatform iOS=20, Android=15}, 
        Landscape={OnPlatform iOS=30, Android=25} 
    }" 
/>

For more examples check this Grial page: ResponsiveHelpersPage.xaml.

Layout Direction​

Grial provide another responsive helper based on the layout direction of the device (right-to-left or left-to-right). For more information check here.