汉堡菜单 Xamarin 表单 (MasterDetailPage) [英] Hamburger Menu Xamarin Forms (MasterDetailPage)
问题描述
我是新来的，可以使用 Xamarin，在我的 Xamarin Forms 项目中，我创建了一个主从页面，在 ListView 中代表了我想要放置标题和图标的菜单，对于图标图像，我必须将每个图标插入所有设备项目?
I'm new enough to use Xamarin, in my Xamarin Forms project I created a Master-Detail Page and in the ListView that represents the menu I wanted to put Title and Icon, for icon images I have to insert each icon in all device projects?
而且我还有一个小问题，当我点击菜单项并导航到所选的详细信息页面时，汉堡菜单消失了
And I also have a small problem, when I click on a menu item and navigate to the selected Detail page, the hamburger menu disappears
MainPageMaster.xaml
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
}
}
屏幕
在这张图片中，我的图标不可见，但我在 Android 项目中添加了一张图片
In this image, my icon isn't visible but I add an image in Android project
推荐答案
- 创建主从页面:
添加一个内容页面，修改代码如下:
Add a content page and change the code as follows :
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();
}
}
- 创建其菜单页面:
添加另一个内容页面并更改代码如下:
Add another content page and change the code as follows :
MenuPage.xaml(实际汉堡菜单的设计)
MenuPage.xaml (Design of the actual hamburger menu)
<?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();
}
}
- 它的模型类:
这里是菜单页的按钮点击命令绑定在
This is where the button click commands of the menu page are bound in
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:
Add the following to your 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 关闭时相同.
Here RootPage is a static instance of your master-detail page, NavigationPage is your detail page that you change to change your detail page, IsMenuPresentend is the bool than when true keeps the MenuPage open and when false closes the same.
做完这一切之后，在你的应用程序类中添加这个函数，并在你的 App.Xaml.cs 的构造函数中调用它
After doing all this add this function in your application class and call it in its constructor of your 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 项目中添加以下主题:
In your Android project add the following theme:
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 并向其添加以下代码:
Create a folder named values-v21 and add an XML named styles.xml and add the following code to it :
<?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>
并使用名称 myTheme 作为您所有 Android 活动中的应用主题.
And use the name myTheme as the app theme in all your Android activities.
你的汉堡菜单已经完成，如果您有任何疑问，请随时发表评论.
There you go your hamburger menu is complete in case you have any queries feel free to comment.
祝你好运！
快乐编码.
这篇关于汉堡菜单 Xamarin 表单 (MasterDetailPage)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
