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

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

Answers

  • seanydaseanyda GBMember ✭✭✭✭✭

    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.4984DanielWeigert.4984 USMember ✭✭

    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.

  • JoeMankeJoeManke USMember ✭✭✭✭✭

    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>
    
  • JohnHardmanJohnHardman GBUniversity mod

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

Sign In or Register to comment.