xamarin - 汉堡包菜单 Xamarin Forms (MasterDetailPage)

标签 xamarin xamarin.forms xamarin.android xamarin.ios

我是新手，可以使用 Xamarin，在我的 Xamarin Forms 项目中，我创建了一个主从页面，在代表菜单的 ListView 中，我想放置标题和图标，对于图标图像，我必须将每个图标插入所有设备项目？

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

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}"
                         FontSize="Medium"
                         VerticalOptions="Center"
                         TextColor="Black"/>
            </StackLayout>
          </ViewCell>
        </DataTemplate>
      </ListView.ItemTemplate>
    </ListView>
  </StackLayout>
</ContentPage>

文件.cs

[XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class MainPageMaster : ContentPage
    {
        public ListView ListView;

        public MainPageMaster()
        {
            InitializeComponent();

            BindingContext = new MainPageMasterViewModel();
            ListView = MenuItemsListView;
        }

        class MainPageMasterViewModel : INotifyPropertyChanged
        {
            public ObservableCollection<MainPageMenuItem> MenuItems { get; set; }

            public MainPageMasterViewModel()
            {
                MenuItems = new ObservableCollection<MainPageMenuItem>(new[]
                {
                    new MainPageMenuItem { Id = 0, Icon="ic_menu_home.png",Title = "Home", TargetType = typeof(MainPageDetail) },
                    new MainPageMenuItem { Id = 1, Title = "Elenco Clienti", TargetType = typeof(ElencoClientiPage) },
                    new MainPageMenuItem { Id = 2, Title = "Logout", TargetType = typeof(LogOut) }
                });
            }

            #region INotifyPropertyChanged Implementation
            public event PropertyChangedEventHandler PropertyChanged;
            void OnPropertyChanged([CallerMemberName] string propertyName = "")
            {
                if (PropertyChanged == null)
                    return;

                PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
            }
            #endregion
        }
    }

屏幕

enter image description here

在这张图片中，我的图标不可见，但我在 Android 项目中添加了一张图片

最佳答案

  • 创建主从页面:

添加一个内容页面，修改代码如下:

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();
    }
}
  • 它的模型类:

这里是绑定(bind)菜单页的按钮点击命令的地方

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 是 bool 值，当 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 作为应用主题。

至此，您的汉堡包菜单已经完成，如果您有任何疑问，请随时发表评论。

祝你好运!

快乐编码。

关于xamarin - 汉堡包菜单 Xamarin Forms (MasterDetailPage)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49169049/

上一篇：pdf - 使用 imagemagick 无损旋转 PDF 文件

下一篇：macros - 在intellij中创建宏

相关文章：

xaml - Visual Studio 2017 XAML 验证中的 Xamarin 表单

android - 绑定(bind) TimePicker 和 DatePicker - MVVMCross (Mono For Android)

c# - Xamarin Forms - 如何在 ListView 中显示/绑定(bind)列表？

c# - Xamarin Forms ListView 性能

security - 在 Xamarin Forms 中为 rest API 存储 client_id 和 client_secret 的位置

android - 如何在 xamarin forms/Android 中正确使用 SVG 图像？

android - 未声明 android.support.design.widget.CoordinatorLayout

c# - 将数据绑定(bind)到 xamarin 中的子 Listview 元素

c# - 将 "Android.Views.ViewGroup"添加到 Xamarin XAML 页面

xaml - 按钮内的 Xamarin Forms 子控件

©2024 IT工具网  联系我们