Is there a way of adding alternative XAML views for different screen sizes in Xamarin.Forms (like alternative layouts in Android)?

Question

Can I add different XAML views for different screens sizes as we do in Android?

Answer 1

It is possible to adding XAML in different screen size Xamarin forms like in Android.

Answer 2

Hi SajithDulanjaya-5501,

Welcome to our Microsoft Q&A platform!

You can create different ResourceDictionary for different screen size.

Here is an example of creating a "GeneralLayout".

First, create "GeneralLayout.xaml" using a Content View as the template and add the Style of the control in it.

<?xml version="1.0" encoding="UTF-8"?>  
<ResourceDictionary xmlns="http://xamarin.com/schemas/2014/forms"   
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
             x:Class="layout.AlternativeLayout.GeneralLayout">  
      
    <OnPlatform  x:TypeArguments="x:Double" iOS="20" Android="20" x:Key="PageSpacing" />  
    <OnPlatform  x:TypeArguments="Thickness" iOS="20" Android="20" x:Key="PagePadding" />  
  
    <Style TargetType="Button" x:Key="MyButton">  
        <Setter Property="HeightRequest" Value="40"/>  
        <Setter Property="FontSize" Value="15"/>  
        <Setter Property="CornerRadius" Value="20" />  
        <Setter Property="HorizontalOptions" Value="FillAndExpand" />  
    </Style>  
  
    <Style TargetType="Entry" x:Key="MyEntry">  
        <!--...-->  
    </Style>  
  
     <!--...-->  
  
</ResourceDictionary>  

Then modify the class as follows so that we can access the GeneralLayout as a singleton.

public partial class GeneralLayout : ResourceDictionary  
{  
    public static GeneralLayout SharedInstance { get; } = new GeneralLayout();  
    public GeneralLayout()  
    {  
        InitializeComponent();  
    }  
}  

Similarly, we can create other custom Layouts, such as SamllLayout, LargeLayout.

Now, we can use Xamarin.Essentials DeviceDisplay to get the device size and decide which ResourceDictionary to use according to the size of the device size.

var mainDisplayInfo = DeviceDisplay.MainDisplayInfo;  
var width = mainDisplayInfo.Width;  
var height = mainDisplayInfo.Height;  

App.xaml.cs

public App()  
{  
    InitializeComponent();  
    SetLayout();  
    MainPage = new MainPage();  
}  
  
void SetLayout()  
{  
    if (/*is small device*/))  
    {  
        dictionary.MergedDictionaries.Add(SamllLayout.SharedInstance);  
    }  
    else if(/*is general device*/)  
    {  
        dictionary.MergedDictionaries.Add(GeneralLayout.SharedInstance);  
    }  
    else if(/*is large device*/)  
    {  
        dictionary.MergedDictionaries.Add(LargeLayout.SharedInstance);  
    }  
}  

The "dictionary" in the code is the name of "ResourceDictionary" in App.xaml.

<Application.Resources>  
    <ResourceDictionary x:Name="dictionary"/>  
</Application.Resources>  

Regards,
Kyle

---

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.