How to make a different Layout for Phone / Tablet in one View

DanielWeigert.4984

Hello,
I pretty new in Xamarin Forms and I would like to do some kind of layouting.
I would like to use one ContentView to display different Controls on Phone / Tablet.

So basically the whole Layout should change if I e.g. using a Tablet.

Is there a way to handle this in XF?

Best regards,
Daniel

seanyda

You need to take advantage of the OnSizeAllocated event.

Check out these docs:
https://docs.microsoft.com/en-gb/xamarin/xamarin-forms/user-interface/layouts/device-orientation?tabs=vswin

DanielWeigert.4984

Well I am aware of this event.

Basicall what I would like to accomplish is to display a ListView in different Styles and Layouts.

So for example:
I have a Datatemplate for a ListView.
In this Datatemplate is a Grid with 2 Rows.

So on my Phone this is perfectly fine, but if I switch on the Tablet I would like to have the same Datatemplate but only with 1 Row.

This would be possible with Stacklayouts I know but I would like to use a Grid because it is faster and easier to work with in my opinion.

JoeManke

Use the <OnIdiom> tags.

<DataTemplate>
    <ViewCell>
        <OnIdiom x:TypeArguments="View">
            <OnIdiom.Phone>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                </Grid>
            </OnIdiom.Phone>
            <OnIdiom.Tablet>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                </Grid>
            </OnIdiom.Tablet>
        </OnIdiom>
    </ViewCell>
</DataTemplate>

JohnHardman

See https://forums.xamarin.com/discussion/comment/323048#Comment_323048 re. using OnSizeAllocated rather than OnIdiom