汉堡菜单Xamarin表格(MasterDetailPage) [英] Hamburger Menu Xamarin Forms (MasterDetailPage)
问题描述
我足够新来使用Xamarin，在我的Xamarin Forms项目中，我创建了一个Master-Detail页面，在ListView中，该菜单代表了我想要放置Title和Icon的菜单，对于图标图像，我必须在其中插入每个图标所有设备项目?
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>
并在所有Android活动中使用名称myTheme作为应用程序主题.
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屋！
