How to design separate layouts or functionality between Phone & Tablets?

Technology CommunityCategory: XamarinHow to design separate layouts or functionality between Phone & Tablets?
VietMX Staff asked 3 years ago

Xamarin.Forms provides Device.Idiom enumeration through which we can tweak the design/layout/functionality between Phone & Tablet. TargetIdiom enum provides following values to differentiate among various devices: Phone, Tablet, Desktop, TV, Unsupported.

Consider:

<Grid VerticalOptions="FillAndExpand">
   <Grid.ColumnSpacing>
      <OnIdiom x:TypeArguments="x:Double" Phone="20" Tablet="40"/>
   </Grid.ColumnSpacing>  
   <Grid.Padding>
      <OnIdiom x:TypeArguments="Thickness" Phone="10, 10, 10, 0" Tablet="20, 20, 20, 0"/>
   </Grid.Padding>
  <!-- Grid Content -->
</Grid>

//In Code:
if (Device.Idiom == TargetIdiom.Phone) {
    // layout views vertically
} else {
    // layout views horizontally tablet or desktop
}