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

Question

在 Xamarin 表单中，我想使用我创建的图像（png 文件）作为侧面 "hamburger" 菜单的背景。例如，这里有一些菜单：

两个问题：

1) 用于菜单背景的最佳图像尺寸是多少

2) 如何将包含我的菜单选项的 ListView 放在背景图像之上？

我尝试使用网格，但未能成功堆叠它们。下面的代码简要总结了 MasterDetailPage 的结构。

  //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>

目标是让侧边菜单看起来像这样：

Answer 1

我刚刚尝试了一种示例解决方案。这是我的主页：

<?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>

将 Grid 作为父级是有技巧的。如果将 2 个控件放在同一个单元格中，它将重叠。在这里，我的背景图像 "Default-Portrait" 将与我的 StackLayout（列表视图）重叠，后者的背景颜色设置为 "Transparent"。

对于图像的大小，我会使用多个大小并将这些图像放在 android 和 iOS 资产中适当的 drawable-hdpi 目录中。

如果您需要更多说明，请告诉我。

这是一个结果：

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

Set navigation side menu background image in Xamarin Forms

c#

user-interface

xamarin

xamarin.forms

mobile-development