23.關於.NET MAUI Shell (二)

2022 iThome 鐵人賽

DAY 23

Software Development

30天學習.Net MAUI系列第 23 篇

14th鐵人賽

Felix阿甫

2022-10-08 23:45:42

1000 瀏覽

分享至

打開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>

我們試著加入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