为了账号安全,请及时绑定邮箱和手机立即绑定

汉堡菜单Xamarin表格(MasterDetailPage)

/ 猿问

汉堡菜单Xamarin表格(MasterDetailPage)

慕森卡 2019-10-21 15:33:01

我足够新来使用Xamarin,在我的Xamarin Forms项目中创建了一个Master-Detail页面,并在ListView中表示了我想要放置Title和Icon的菜单,对于图标图像,我必须在所有设备项目中插入每个图标?


而且我还有一个小问题,当我单击菜单项并导航到选定的“详细信息”页面时,汉堡菜单消失了


MainPageMaster.xaml


<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             x:Class="XXX"

             Title="Master">

  <StackLayout>

    <ListView x:Name="MenuItemsListView"

              SeparatorVisibility="None"

              HasUnevenRows="true"

              ItemsSource="{Binding MenuItems}">

      <ListView.Header>

        <Grid BackgroundColor="#03A9F4">

          <Grid.ColumnDefinitions>

            <ColumnDefinition Width="6"/>

            <ColumnDefinition Width="*"/>

            <ColumnDefinition Width="6"/>

          </Grid.ColumnDefinitions>

          <Grid.RowDefinitions>

            <RowDefinition Height="15"/>

            <RowDefinition Height="30"/>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="10"/>

          </Grid.RowDefinitions>

          <Label

              Grid.Column="1"

              Grid.Row="1"

              Text="B1 Term"

              HorizontalTextAlignment="Center"

              Style="{DynamicResource SubtitleStyle}"/>

        </Grid>

      </ListView.Header>

      <ListView.ItemTemplate>

        <DataTemplate>

          <ViewCell>

              <StackLayout VerticalOptions="FillAndExpand"

                             Orientation="Horizontal"

                             Padding="20,10,0,10"

                             Spacing="20">

                            <Image Source="{Binding Icon}"

                         WidthRequest="40"

                         HeightRequest="40"

                         VerticalOptions="Center" />

                            <Label Text="{Binding Title}"

            </StackLayout>

          </ViewCell>

        </DataTemplate>

      </ListView.ItemTemplate>

    </ListView>

  </StackLayout>

</ContentPage>


屏幕

http://img4.mukewang.com/5dad5f5a0001fad204950862.jpg

在此图像中,我的图标不可见,但我在Android项目中添加了图像



查看完整描述

3 回答

?
慕勒3428872

创建主从页面:

添加内容页面并更改代码,如下所示:


RootPage.xaml


<?xml version="1.0" encoding="utf-8"?>

<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms" 

              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

              xmlns:local="clr-namespace: your_NameSpace"

              x:Class="your_NameSpace.RootPage">

</MasterDetailPage>

RootPage.xaml.cs


[XamlCompilation(XamlCompilationOptions.Compile)]

public partial class RootPage : MasterDetailPage

{

    public RootPage()

    {                        

        InitializeComponent();

    }

}

创建其菜单页面:

添加另一个内容页面并更改代码,如下所示:


MenuPage.xaml(实际汉堡菜单的设计)


<?xml version="1.0" encoding="UTF-8"?>

<ContentPage BackgroundColor="White"

         xmlns="http://xamarin.com/schemas/2014/forms" 

         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 

         x:Class="your_NameSpace.MenuPage">

<ContentPage.Padding >

    <OnPlatform x:TypeArguments="Thickness" iOS=" 0 , 20 , 0 , 0" />

</ContentPage.Padding>  

<ContentPage.Content>

    <StackLayout BackgroundColor="White" Padding ="10 , 30 , 10, 10">

        <Button Text="Login" BackgroundColor="White" TextColor="DarkGray" HorizontalOptions="StartAndExpand" Command="{Binding GoHomeCommand}" />

        <BoxView HeightRequest="0.5" HorizontalOptions="FillAndExpand" BackgroundColor="Gray"/>            

        <Button Text="Search" BackgroundColor="White" TextColor="DarkGray" HorizontalOptions="StartAndExpand" Command="{Binding GoSecondCommand}" />

        <BoxView HeightRequest="0.5" HorizontalOptions="FillAndExpand" BackgroundColor="Gray"/>

        <Button Text="Browse" TextColor="DarkGray" BackgroundColor="White" HorizontalOptions="StartAndExpand" Command="{Binding GoThirdCommand}"/>

        <BoxView HeightRequest="0.5" HorizontalOptions="FillAndExpand" BackgroundColor="Gray"/>

    </StackLayout>

</ContentPage.Content>

MenuPage.xaml.cs


 [XamlCompilation(XamlCompilationOptions.Compile)]

public partial class MenuPage : ContentPage

{

    public MenuPage()

    {

        BindingContext = new MenuPageViewModel();

        this.Icon = "yourHamburgerIcon.png"; //only neeeded for ios

        InitializeComponent();

    }

}

其型号类别:

在此绑定菜单页面的按钮单击命令


MenuPageViewModel.cs


 public class MenuPageViewModel

{

    public ICommand GoHomeCommand { get; set; }

    public ICommand GoSecondCommand { get; set; }

    public ICommand GoThirdCommand { get; set; }

    public MenuPageViewModel()

    {

        GoHomeCommand = new Command(GoHome);

        GoSecondCommand = new Command(GoSecond);

        GoThirdCommand = new Command(GoThird);

    }


    void GoHome(object obj)

    {

        App.NavigationPage.Navigation.PopToRootAsync();

        App.MenuIsPresented = false;

    }


    void GoSecond(object obj)

    {

        App.NavigationPage.Navigation.PushAsync(new Home()); //the content page you wanna load on this click event 

        App.MenuIsPresented = false;

    }


    void GoThird(object obj)

    {

        App.NavigationPage.Navigation.PushAsync(new ClinicInformation());

        App.MenuIsPresented = false;

    }

}

通常在您的应用程序类中添加以下属性,您的应用程序类的名称为App.xaml和App.xaml.cs

将以下内容添加到您的App.xaml.cs中:


    public static NavigationPage NavigationPage { get; private set; }

    public static RootPage RootPage;

    public static bool MenuIsPresented

    {

        get

        {

            return RootPage.IsPresented;

        }

        set

        {

            RootPage.IsPresented = value;

        }

    }

这里RootPage是您的主从页面的静态实例,NavigationPage是您要更改以更改您的详细信息页面的详细信息页面,IsMenuPresentend是布尔值,如果为true则保持MenuPage打开,而false则保持不变。


完成所有这些操作后,在您的应用程序类中添加此函数,并在其App.Xaml.cs的构造函数中调用它


 private void CallMain()

 {

    var menuPage = new MenuPage();

    NavigationPage = new NavigationPage(new Home());

    RootPage = new RootPage();

    RootPage.Master = menuPage;

    RootPage.Detail = NavigationPage;

    MainPage = RootPage;

 }

在您的Android项目中,添加以下主题:


values / styles.xml


<?xml version="1.0" encoding="utf-8" ?>

<resources>

<style name="MyTheme" parent="MyTheme.Base">

</style>


<style name="DrawerArrowStyle" 

parent="@style/Widget.AppCompat.DrawerArrowToggle">

<item name="spinBars">true</item>

 <item name="color">#FFFFFF</item>

</style>


<style name="MyTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">

<item name="windowNoTitle">true</item>

<item name="windowActionBar">false</item>

<item name="colorPrimary">#003399</item>

<item name="colorPrimaryDark">#003399</item>

<item name="colorControlHighlight">#003399</item>

<item name="colorAccent">#012348</item>

<item name="drawerArrowStyle">@style/DrawerArrowStyle</item>

</style>


</resources>

创建一个名为values-v21的文件夹,并添加一个名为styles.xml的XML,并向其中添加以下代码:


 <?xml version="1.0" encoding="utf-8" ?>

 <resources>

 <style name="MyTheme" parent="MyTheme.Base">

 <item name="android:windowContentTransitions">true</item>

 <item name="android:windowAllowEnterTransitionOverlap">true</item>

 <item name="android:textAllCaps">false</item>

 <item name="android:windowAllowReturnTransitionOverlap">true</item>

 <item name="android:windowSharedElementEnterTransition">@android:transition/move</item>

 <item name="android:windowSharedElementExitTransition">@android:transition/move</item>

 </style>

 </resources>

并在所有Android活动中使用名称myTheme作为应用程序主题。


如果您有任何疑问,可以在这里输入汉堡菜单。


查看完整回答
反对 回复 2019-10-21
?
慕哥9229398

要在Android和iOS应用程序中显示Humberger菜单图标,可以使用Title = "☰"特殊字符。这将正确显示菜单图标。


<MasterDetailPage.Master>  

    <ContentPage Title = "☰" BackgroundColor="Red">  

        <StackLayout BackgroundColor = "#B2EC5D" >

            < ListView x:Name="navigationDrawerList">                   

            </ListView>  

        </StackLayout>  

    </ContentPage>  

</MasterDetailPage.Master> 


查看完整回答
反对 回复 2019-10-21
?
慕标5265247

您也可以尝试此操作以获取详细信息


//img4.mukewang.com/5dad5f8a0001ab8b00010001.jpghttps://xamarinexperience.blogspot.com/2019/02/hamburger-menu-in-xamarin-ios.html

查看完整回答
反对 回复 2019-10-21

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信