iT邦幫忙

2022 iThome 鐵人賽

DAY 23
0
Software Development

30天學習.Net MAUI系列 第 23

23.關於.NET MAUI Shell (二)

  • 分享至 

  • xImage
  •  

打開Todo\AppShell.xaml,我們就能看到我們使用的AppShell

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="Todo.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:Todo"
    Shell.FlyoutBehavior="Disabled">
    <TabBar x:Name="Tabs">
        <Tab Title="Home">
            <ShellContent
                Title="Home"
                ContentTemplate="{DataTemplate local:MainPage}"
                Route="MainPage" 
            />
        </Tab>
        <Tab Title="Todo">
            <ShellContent ContentTemplate="{DataTemplate local:TodoPage}" Route="TodoPage" />
        </Tab>
        <Tab Title="User">
            <ShellContent ContentTemplate="{DataTemplate local:UserPage}" Route="UserPage" />
        </Tab>
    </TabBar>
    
</Shell>

這邊我們使用了Tabbar,並且裡面有3個Tab,所以我們共有3個分頁

<TabBar x:Name="Tabs">
        <Tab Title="Home">
            <ShellContent
                Title="Home"
                ContentTemplate="{DataTemplate local:MainPage}"
                Route="MainPage" 
            />
        </Tab>
        <Tab Title="Todo">
            <ShellContent ContentTemplate="{DataTemplate local:TodoPage}" Route="TodoPage" />
        </Tab>
        <Tab Title="User">
            <ShellContent ContentTemplate="{DataTemplate local:UserPage}" Route="UserPage" />
        </Tab>
    </TabBar>

https://ithelp.ithome.com.tw/upload/images/20221008/201089318zVyNtB2Um.png

我們試著加入Flyout

    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <Tab Title="Home">
            <ShellContent
                Title="Home"
                ContentTemplate="{DataTemplate local:MainPage}"
                Route="MainPage" 
            />
        </Tab>
        <Tab Title="Todo">
            <ShellContent ContentTemplate="{DataTemplate local:TodoPage}" Route="TodoPage" />
        </Tab>
        <Tab Title="User">
            <ShellContent ContentTemplate="{DataTemplate local:UserPage}" Route="UserPage" />
        </Tab>
    </FlyoutItem>

並且修改Shell屬性

<Shell
    x:Class="Todo.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:Todo"
    FlyoutWidth="200"
    FlyoutIcon="flyouticon.png">

也就是

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="Todo.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:Todo"
    FlyoutWidth="200"
    FlyoutIcon="flyouticon.png">
    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
        <Tab Title="Home">
            <ShellContent
                Title="Home"
                ContentTemplate="{DataTemplate local:MainPage}"
                Route="MainPage" 
            />
        </Tab>
        <Tab Title="Todo">
            <ShellContent ContentTemplate="{DataTemplate local:TodoPage}" Route="TodoPage" />
        </Tab>
        <Tab Title="User">
            <ShellContent ContentTemplate="{DataTemplate local:UserPage}" Route="UserPage" />
        </Tab>
    </FlyoutItem>
    <TabBar x:Name="Tabs">
        <Tab Title="Home">
            <ShellContent
                Title="Home"
                ContentTemplate="{DataTemplate local:MainPage}"
                Route="MainPage" 
            />
        </Tab>
        <Tab Title="Todo">
            <ShellContent ContentTemplate="{DataTemplate local:TodoPage}" Route="TodoPage" />
        </Tab>
        <Tab Title="User">
            <ShellContent ContentTemplate="{DataTemplate local:UserPage}" Route="UserPage" />
        </Tab>
    </TabBar>

</Shell>

打開app
https://ithelp.ithome.com.tw/upload/images/20221008/20108931wKVwxxcSPr.png
https://ithelp.ithome.com.tw/upload/images/20221008/20108931V8LPfxMN2K.png


上一篇
22.關於.NET MAUI Shell (一)
下一篇
24.MAUI使用firebase進行Auth (一)
系列文
30天學習.Net MAUI30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
yhanshuang
iT邦新手 5 級 ‧ 2023-11-13 11:39:20

您好,
在您頭幾天的文章中提到FlyoutPage、TabbedPage,與 .NET MAUI Shell 應用程式不相容
我原本以為您的意思是不要在MAUI使用,但今天看到您使用了FlyoutPage,是我誤解了什麼嗎?

我要留言

立即登入留言