Zenn
Open4

[.NET MAUI] XAML画面構成

XAML
MAUI
GomitaGomita

iPhone SEの解像度に合わせて、横幅1334px、縦幅750pxでGridを使ってレイアウト。
XAMLでのWidth Height単位はピクセルの半分？これはなぜ？？
Gridは３分割でヘッダーエリア、タイトルエリア、コンテンツエリアとし、コンテンツエリアはHeightを*指定にしてScrollViewにより縦スクロール可能にする。

MainPage.xml
<Grid RowSpacing="0" ColumnSpacing="0" MaximumHeightRequest="667">
  <Grid.RowDefinitions>
    <RowDefinition Height="30" />
    <RowDefinition Height="50" />
    <RowDefinition Height="*" />
  </Grid.RowDefinitions>
  <Grid Grid.Row="0" BackgroundColor="#d5e4f2" WidthRequest="375">
    <!-- ▼ヘッダーエリア -->
  </Grid>
  <Grid Grid.Row="1" BackgroundColor="#ebf1de" WidthRequest="375">
    <!-- ▼タイトルエリア -->
  </Grid>
  <ScrollView Grid.Row="2" BackgroundColor="#ebf1de" MaximumWidthRequest="375">
    <VerticalStackLayout Margin="6">
      <!-- ▼コンテンツエリア -->
    </VerticalStackLayout>
  </ScrollView>
 </Grid>
GomitaGomita

iOSシミュレーターで実行した結果

「レンタカー予約」はダミーの画面です。

iPhone SE 3rd generation

iPad mini 6th generation

GomitaGomita

MAUI標準でついてくる紫色のHomeと表示された部分は「Shell.NavBarIsVisible="False"」で消せる。

MainPage.xaml
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyProto.MainPage"
             Shell.NavBarIsVisible="False">
GomitaGomita

一番外側のGridでMaxHeightRequest="667"とすることでiPhoneに最適化した画面となり、iPadで起動した場合は中央に寄せて表示される。iPadで起動した場合に縦方向は領域いっぱいに広げたければ、MaxHeightRequestを取るだけ。

MainPage.xml
+    <Grid RowSpacing="0" ColumnSpacing="0">
-    <Grid RowSpacing="0" ColumnSpacing="0" MaximumHeightRequest="667">