Xamarin手機應用開發(一)_MasterDetail漢堡選單的介面開發

 

如何做到側邊漢堡選單跳出側欄列表來進行主畫面切換

開發環境  vs2019

Win10作業系統

專案中新建一目錄Pages

新增三個ContentPage的新項目

各自取名為HomePage、MenuPage、CustomerPage

新增一個MasterDeatil項目命名為MasterPage 

MasterPage 的xaml介面程式

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

<?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:d="http://xamarin.com/schemas/2014/forms/design" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:pages="clr-namespace:ECommerseApp.Pages" mc:Ignorable="d" x:Class="ECommerseApp.Pages.MasterPage"> <MasterDetailPage.Master> <ContentPage Title="Master"> <StackLayout Padding="5"> <Button Text="Home" x:Name="btnHome" Clicked="btnHome_Clicked"/> <Button Text="Menu" x:Name="btnMenu" Clicked="btnMenu_Clicked"/> <Button Text="Customer" x:Name="btnCustomer" Clicked="btnCustomer_Clicked"/> </StackLayout> </ContentPage> </MasterDetailPage.Master> <MasterDetailPage.Detail> <NavigationPage> <x:Arguments> <pages:HomePage></pages:HomePage> </x:Arguments> </NavigationPage> </MasterDetailPage.Detail> </MasterDetailPage>

.xaml.cs程式碼

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using Xamarin.Forms; using Xamarin.Forms.Xaml; namespace ECommerseApp.Pages { [XamlCompilation(XamlCompilationOptions.Compile)] public partial class MasterPage : MasterDetailPage { public MasterPage() { InitializeComponent(); } private void btnHome_Clicked(object sender, EventArgs e) { Detail = new NavigationPage(new HomePage()); IsPresented = false; } private void btnMenu_Clicked(object sender, EventArgs e) { Detail = new NavigationPage(new MenuPage()); IsPresented = false; } private void btnCustomer_Clicked(object sender, EventArgs e) { Detail = new NavigationPage(new CustomerPage()); IsPresented = false; } } }

IsPresented要記得在每一次側欄Button Click完後Turn false不然側欄不會自己收合回去