Mauiのpage周りの状況整理【Preview 14版】
ぷらむらいす(PlumRice)注意：RC1になって仕様が変わりました。ここのコードでは動かないのが多数あります。
この記事は、ContentPage、FlyoutPage、NavigationPage、TabbedPageについて取り上げたもの。
また、Preview 14で発表された、MenuFlyoutItemについても触れています。
ぷらむらいす(PlumRice)ContentPage
- 公式ドキュメント : ContentPage - .NET MAUI | Microsoft Docs
基本形のページとなる。この後説明するPageたちでも使う。
特に状況に制限なく使用することが出来る。
<ContentPage Title="test1">
<ContentPage.Content>
<StackLayout>
<Label Text="Hello Message" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
FlyoutPage
- 公式ドキュメント : FlyoutPage - .NET MAUI | Microsoft Docs
使用に際して、初回ページ呼び出し時(Application継承クラスからのMainPageを付ける時)に、必ず最初に呼び出すようにしなければならない。
実装例１
ただFlyoutPageが付いているだけ。
<FlyoutPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MauiApp1_memo"
x:Class="MauiApp1_memo.Page.MainPage"
Title="main page"
FlyoutLayoutBehavior="Popover">
<FlyoutPage.Flyout>
<local:FlyoutMenuPage x:Name="flyoutPage"/>
</FlyoutPage.Flyout>
<FlyoutPage.Detail>
<NavigationPage>
<x:Arguments>
<local:ContactsPage />
</x:Arguments>
</NavigationPage>
</FlyoutPage.Detail>
</FlyoutPage>
実装例２
ただFlyoutPageとTabbedPageが付いているバージョン。
iosのTwitterがこんな感じのデザインだったよねぇー。
ただし…この実装方法。WindowsとAndroidで、なんか動作違う。コードの中のNavigationPageを付けた状態でWindowsは動かすと、上の部分に変な空間が出来る(バクか仕様かは分からない、多分仕様？なお、NavigationPageを外すとWindowsでもいい感じ？に動くので安心？できる)。
<FlyoutPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MauiApp1_memo"
x:Class="MauiApp1_memo.Page.MainPage"
Title="test1"
FlyoutLayoutBehavior="Popover">
<FlyoutPage.Flyout>
<local:FlyoutMenuPage/>
</FlyoutPage.Flyout>
<FlyoutPage.Detail>
<NavigationPage>
<x:Arguments>
<TabbedPage>
<ContentPage Title="test1">
<ContentPage.Content>
<StackLayout>
<Label Text="Hello1 Message" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
<ContentPage Title="test2">
<ContentPage.Content>
<StackLayout>
<Label Text="Hello2 Message" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
</TabbedPage>
</x:Arguments>
</NavigationPage>
</FlyoutPage.Detail>
</FlyoutPage>
TabbedPage
- maui公式ドキュメント : TabbedPage - .NET MAUI | Microsoft Docs
特にrootページでなくてはいけないとかいう制限はない。
実装例１
<TabbedPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MauiApp1_memo"
x:Class="MauiApp1_memo.Page.MainPage">
<ContentPage Title="test1">
<ContentPage.Content>
<StackLayout>
<Label Text="Hello1 Message" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
<ContentPage Title="test2">
<ContentPage.Content>
<StackLayout>
<Label Text="Hello2 Message" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" />
</StackLayout>
</ContentPage.Content>
</ContentPage>
</TabbedPage>
MenuBarItems (Windows mac専用機能)
一般的なウィンドウにメニューを付けるための機能。
MenuBarItemsを持ったContentPageをShellかNavigationPageから呼び出す必要がある。
実装例１
NavigationPageから呼び出すバージョン。
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MauiApp1_memo"
x:Class="MauiApp1_memo.Page.MainPage"
Title="main page">
<ContentPage.MenuBarItems>
<MenuBarItem Text="File">
<MenuFlyoutItem Text="Quit" Command="{Binding QuitCommand}"/>
</MenuBarItem>
<MenuBarItem Text="list_1">
<MenuFlyoutSubItem Text="list">
<MenuFlyoutItem Text="item1"/>
<MenuFlyoutItem Text="item2"/>
</MenuFlyoutSubItem>
<MenuFlyoutItem Text="Add button" Command="{Binding AddLocationCommand}"/>
</MenuBarItem>
</ContentPage.MenuBarItems>
<ScrollView>
<StackLayout x:Name="scorll_box">
<Label Text="test"></Label>
</StackLayout>
</ScrollView>
</ContentPage>
実装例２
Shellから呼び出すバージョン。
今回は記載が面倒なのと、公式がいい感じにサンプル用意して説明しているので、リンクだけ載せておく。
Github「 davidortinau / WeatherTwentyOne 」WeatherTwentyOne/src/WeatherTwentyOne/App.xaml
ぷらむらいす(PlumRice)こっちにも追記。
注意：RC1になって仕様が変わりました。ここのコードでは動かないのが多数あります。
とりあえず、なんかmaui公式もまだドキュメント整備中な感があってので、ドキュメントに書いてあるのに、動かないものとかあるので、これ以上は述べないで置きます。