在Xamarin Forms中设置导航侧菜单背景图像

Question

In Xamarin forms I want to use an image ( png file ) I created as background for a side "hamburger" menu. For example, here is some menu:

Two questions:

1) What's the best image size to use for the menu background

2) How do I put a ListView that contains my menu options on top of the background image ?

I tried using the grid but wasn't successful at stacking them. Code below is a quick summary of how the MasterDetailPage is structured.

  //Menu
 <MasterDetailPage.Master>
 <ContentPage>
      <ContentPpage.Content>
       <AbsoluteLayout> //Also tried FlexLayout and RelativeLayout
        <Image Source="blah" Aspect="Fill"/>
        <Grid>
         <ListView/>
        </Grid>
       </AbsoluteLayout>
      </ContentPpage.Content>
     <ContentPage>
    </MasterDetailPage.Master>

//Page content
<MasterDetailPage.Detail>
 <ContentPage>
 ///Page content
 </ContentPage>
</MasterDetailPage.Detail>

The goal is to get the side menu looking something like this:

Answer 1

I just tried one sample solution. This is my master page :

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:local="using:MasterDetailPageNavigation"
         x:Class="MasterDetailPageNavigation.MasterPage"
         Padding="0,40,0,0"
         Icon="hamburger.png"
         Title="Personal Organiser">
<Grid>
        <Image Source="Default-Portrait.png" Aspect="AspectFill" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>
        <StackLayout Margin="0,20,0,0">
            <ListView x:Name="listView" x:FieldModifier="public" BackgroundColor="Transparent">
               <ListView.ItemsSource>
                    <x:Array Type="{x:Type local:MasterPageItem}">
                        <local:MasterPageItem Title="Contacts" IconSource="contacts.png" TargetType="{x:Type local:ContactsPage}" />
                        <local:MasterPageItem Title="TodoList" IconSource="todo.png" TargetType="{x:Type local:TodoListPage}" />
                        <local:MasterPageItem Title="Reminders" IconSource="reminders.png" TargetType="{x:Type local:ReminderPage}" />
                    </x:Array>
                </ListView.ItemsSource>
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <Grid Padding="5,10">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="30"/>
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Image Source="{Binding IconSource}" />
                                <Label Grid.Column="1" Text="{Binding Title}" />
                            </Grid>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
  </Grid>
</ContentPage>

There is a trick to have Grid as a parent. If you put 2 controls in same Cell it will overlap. Here my background image "Default-Portrait" will get overlapped by my StackLayout (listview) which has Background Color set as "Transparent".

For the Size of the Image, I would use multiple Size and put those images in the appropriate drawable-hdpi directory in android and iOS assets.

Let me know if you need any more clarifications.

This is a result: