DrawerLayout: How to make this Custom Layout

Question

I want to make these in a DrawerLayout but unable to find the right approach.

WANT THESE LAYOUTS

and

I have tried and been thinking about this. Should I use

1 - List

Problem: How to add separator and group things.

2 - List + Grid

3 - TableView

I am posting code below. I am not experienced and don't think its the right approach. Give me some directions Please.

CODE

        <ListView.Header>
            <Grid BackgroundColor="Transparent">
                <Grid.RowDefinitions>
                    <RowDefinition Height="150" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Grid>
                    <Image Source="bg.jpg" Aspect="AspectFill" />
                    <StackLayout Padding="11,110,0,20" >
                        <Label  Text="AppName" TextColor="White" FontSize="Medium"  Style="{DynamicResource SubtitleStyle}"/>
                    </StackLayout>
                </Grid>
            </Grid>
        </ListView.Header>

        <ListView.ItemsSource>
            <x:Array Type="{x:Type local:MasterPageItem}">
                <local:MasterPageItem Title="All Tasks" IconSource="ic_date_range_black_48dp.png" TargetType="{x:Type local:ContactsPage}" Color="Black" />
                <local:MasterPageItem Title="Today" IconSource="ic_date_range_black_48dp.png" TargetType="{x:Type local:TodoListPage}" Color="Black"/>
                <local:MasterPageItem Title="Completed" IconSource="ic_check_black_48dp.png" TargetType="{x:Type local:ReminderPage}" Color="Green"/>
                <local:MasterPageItem Title="InComplete" IconSource="ic_close_black_48dp.png" TargetType="{x:Type local:ReminderPage}" Color="Red"/>
                <local:MasterPageItem Title="My List" IconSource="ic_date_range_black_48dp.png" TargetType="{x:Type local:ReminderPage}" Color="Black"/>
            </x:Array>
        </ListView.ItemsSource>
        <ListView.ItemTemplate>
            <DataTemplate>

                <ViewCell>
                    <Grid Padding="5,10">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="30" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="30" />
                        </Grid.ColumnDefinitions>
                        <Image Source="{Binding IconSource}" VerticalOptions="Center"/>
                        <Label Grid.Column="1" Text="{Binding Title}" TextColor="{Binding Color}" FontSize="Medium" VerticalOptions="Center"/>
                        <Label Grid.Column="2" Text="5" TextColor="Black" FontSize="Medium" VerticalOptions="Center"/>
                    </Grid>

                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>


    </ListView>

    <BoxView VerticalOptions="Center" HorizontalOptions="FillAndExpand" HeightRequest="1" Color="#5b5d68"></BoxView>

    <Grid Padding="5,10" BackgroundColor="#e8e8e8">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="30" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="60" />
            <RowDefinition Height="60" />
        </Grid.RowDefinitions>

        <Image Grid.Column="0" Grid.Row="0" Source="ic_date_range_black_48dp.png" VerticalOptions="Center"/>
        <Label Grid.Column="1" Grid.Row="0" Text="Create List" TextColor="Gray" FontSize="Medium" VerticalOptions="Center"/>
        <Image Grid.Column="0" Grid.Row="1" Source="ic_date_range_black_48dp.png" VerticalOptions="Center"/>
        <Label Grid.Column="1" Grid.Row="1" Text="Settings" TextColor="Gray" FontSize="Medium" VerticalOptions="Center"/>
    </Grid>

</StackLayout>

RESULT

Thanks

Answer 1

I think you need to set the ItemsSource of listview in code.
For example:

    public ListView ListView;
    public MasterPage1()
    {
        InitializeComponent();
        ListView = ItemListview;
        List<List<MasterPageItem>> masterPageItemGroup = new List<List<MasterPageItem>>(){
        new List<MasterPageItem>(){
            new MasterPageItem() { Title = "All Tasks", IconSource = "ic_date_range_black_48dp.png", Color = "Black" }
        },
        new List<MasterPageItem>(){
             new MasterPageItem() { Title="Today", IconSource="ic_date_range_black_48dp.png",  Color="Black" },
              new MasterPageItem() { Title = "Completed", IconSource = "ic_check_black_48dp.png", Color = "Green" },
               new MasterPageItem() { Title = "InComplete", IconSource = "ic_close_black_48dp.png", Color = "Red" },
        },
        new List<MasterPageItem>(){
            new MasterPageItem() { Title="My List", IconSource="ic_date_range_black_48dp.png" , Color="Black" }
        },
        };
        ListView.ItemsSource = masterPageItemGroup;
    }

Then set IsGroupingEnabled value to true in xaml. And if you want to hide group header, you also need to set HasUnevenRows to true and use the ListView.GroupHeaderTemplate. In the GroupHeaderTemplate create a ViewCell and set Height to 0.
Here is the xaml:

<ListView x:Name="ItemListview" IsGroupingEnabled="true" HasUnevenRows="True">
    <ListView.Header>
        <Grid BackgroundColor="Transparent">
            <Grid.RowDefinitions>
                <RowDefinition Height="150" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Grid>
                <Image Source="bg.jpg" Aspect="AspectFill" />
                <StackLayout Padding="11,110,0,20" >
                    <Label  Text="AppName" TextColor="White" FontSize="Medium"  Style="{DynamicResource SubtitleStyle}"/>
                </StackLayout>
            </Grid>
        </Grid>
    </ListView.Header>         
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Grid Padding="5,10">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="30" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="30" />
                    </Grid.ColumnDefinitions>
                    <Image Source="{Binding IconSource}" VerticalOptions="Center"/>
                    <Label Grid.Column="1" Text="{Binding Title}" TextColor="{Binding Color}" FontSize="Medium" VerticalOptions="Center"/>
                    <Label Grid.Column="2" Text="5" TextColor="Black" FontSize="Medium" VerticalOptions="Center"/>
                </Grid>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>

    <ListView.GroupHeaderTemplate>
        <DataTemplate>
            <ViewCell Height="0">
                <Grid/>
            </ViewCell>
        </DataTemplate>
    </ListView.GroupHeaderTemplate>
</ListView>

The result is:

Update:

How can I remove/hide line above All Tasks?. This shouldn't be there.

It seems that it could not be removed. But the is a workaround. If you remove the <RowDefinition Height="*" /> in your ListView.Header, the line will be hidden by bg.jpg.
The result: