question

sphauck avatar image
0 Votes"
sphauck asked sphauck commented

Strategies and opinions for supporting phone and tablet form factors from same code base ?

So how is everyone else doing this?

I mean, you can have alternate views and use the same view models for sure but is that the easiest way to achieve the goal of a single code base and support both phone and tablet layouts ?

Opinions and strategies welcome and appreciated.

dotnet-xamarin
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

JarvanZhang-MSFT avatar image
0 Votes"
JarvanZhang-MSFT answered sphauck commented

Hello,​

Welcome to our Microsoft Q&A platform!

The Device.Idiom property can be used to alter layouts or functionality depending on the device the application is running on. Try use the property to define the views for different devices.

Check the code:

<StackLayout>
    <OnIdiom x:TypeArguments="View">
        <OnIdiom.Phone>
            <StackLayout>
                <Label Text="xxx"/>
                <Image Source="grid_" HeightRequest="25"/>
            </StackLayout>
        </OnIdiom.Phone>
        <OnIdiom.Tablet>
            <StackLayout>
                <Label Text="xxx"/>
            </StackLayout>
        </OnIdiom.Tablet>
    </OnIdiom>
</StackLayout>

Check the doc: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/platform/device#deviceidiom

Best Regards,

Jarvan Zhang



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.


· 5
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Yes and thanks!
I am aware of that but the layout is completely different so to keep things simple I want different views so the XAML doesn't get out of control.


0 Votes 0 ·

but the layout is completely different

If you want to show complete different views for the phone and tablet, try using a contentView to display the content and set controlTemplate according to the device's type.

<ContentView >
    <ContentView.ControlTemplate>
        <OnIdiom x:TypeArguments="ControlTemplate" Phone="{StaticResource template_1}" Tablet="{StaticResource template_2}">
        </OnIdiom>
    </ContentView.ControlTemplate>
</ContentView>

If there're many pages need to be customize like this, you could just create two different applicaton template and detect the device's idion to sepecify the mainPage.

public partial class App : Application
{
    public App()
    {
        InitializeComponent();

        if (DeviceInfo.Idiom == DeviceIdiom.Phone)
        {
            MainPage = new PhoneMainPage();
        }
        else if (DeviceInfo.Idiom == DeviceIdiom.Tablet)
        {
            MainPage = new TabletMainPage();
        }
    }
}
0 Votes 0 ·

That's exactly what I am doing at this time ... I have a "Views" folder then inside I have a "SFF" (small form factor) and "Tablet" (can also be desktop) and share the same view model between them ...

0 Votes 0 ·

Hi, sphauck. What's problem now? Could you share more details about the requirement?

0 Votes 0 ·
Show more comments