Separate UI for iPhone and iPad in Xamarin.Forms using xaml

Question

I have been working on a Xamarin.Forms application that supports iOS and Android platforms. The UI has been build mostly using XAML in the Forms PCL project. I know it is possible through code using

if(Device.OS == TargetPlatform.iOS && Device.Idiom == TargetIdiom.Tablet)

How is it possible to build a new UI for iPad through XAML?

Answer 1

You can use the Idiom value OnIdiom in xaml:

<Grid VerticalOptions="FillAndExpand">
  <Grid.ColumnSpacing>
    <OnIdiom x:TypeArguments="x:Double"
             Phone="20"
             Tablet="40"/>
 </Grid.ColumnSpacing>
</Grid>

With this, you can have different values in the xaml for phones or tablets.

When your design for your page are very different for phone and tablets, you better implement two different pages and navigate to the right one, with the idom-code you post in your question:

if (Device.Idiom == TargetIdiom.Tablet || Device.Idiom == TargetIdiom.Desktop)
    await Navigation.PushAsync(new TabletPage());
else
    await Navigation.PushAsync(new Page());

Look at this blog post from James Montemagno, which describes your problem exactly.

*Edit: Switching between 2 ContentViews based on the idiom can be done in the exact same way:

XAML:

<ContentPage x:Name="MyPage"></ContentPage>

Code-behind:

if (Device.Idiom == TargetIdiom.Tablet || Device.Idiom == TargetIdiom.Desktop)
    MyPage.Content = new LargeDisplayContentView();
else
    MyPage.Content = new SmallDisplayContentView();