CODEWITHSUNDEEP
c#xamlxamarin.forms
Peter Esenwa
Peter Esenwa

Reputation: 400

Xamarin MasterDetailPage with multiple section and different styles

I created a Xamarin.Forms MasterDetailPage successfully but I need something like this,

Design of MasterDetail with two sections having different designs

I thought having two ListView children like this

<ContentPage ...
             xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             Title="Master Main">
    <Grid VerticalOptions="Fill">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <ListView x:Name="MenuItemsListView"
                  SeparatorVisibility="None"
                  HasUnevenRows="False">
            <ListView.ItemTemplate>
            ...
            </ListView.ItemTemplate>
        </ListView>
        <ListView x:Name="otherItemsListView">
        ...
        </ListView>
    </Grid>
</ContentPage>

but that divides the height of the Grid equally no matter the RowDefinitions i set. I am out of ideas. Please help.

Upvotes: 0

Views: 352

Answers (2)

Alexander Uddfeldt
Alexander Uddfeldt

Reputation: 246

If you use two listviews they will have separate scrolls. I think you do not want this? What you could do is to use different item templates for different item types in your lists item source. Take a look at https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/templates/data-templates/selector if this like something you want.

Upvotes: 2

Andrew
Andrew

Reputation: 1438

If you want something in a grid to take a percentage of the screen, use star sizing. To get the effect you're going for, this might be something like:

<Grid.RowDefinitions>
     <RowDefinition Height="8*" />
     <RowDefinition Height="2*" />
</Grid.RowDefinitions>

In this example the first row takes up 80% of the grid and the second row takes 20%. Note that I could have also used .8 and .2 or 80 and 20 and still got the same effect. Take a look at the Xamarin docs on Grids for more information.

Upvotes: 1

Related Questions