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不然側欄不會自己收合回去



留言

這個網誌中的熱門文章

何謂淨重(Net Weight)、皮重(Tare Weight)與毛重(Gross Weight)

Architecture(架構) 和 Framework(框架) 有何不同?_軟體設計前的事前規劃的藍圖概念

(2021年度)駕訓學科筆試準備題庫歸納分析_法規是非題