Open2024/01/21にコメント追加2

[.NET MAUI] レスポンシブデザイン

XAMLの記述をiPhone SEの解像度（1,334×750ピクセル）に合わせておきつつも、iPad miniの解像度（2,266 x 1,488ピクセル）にもあうようにしたい。

MAUIでレスポンシブデザインを実装するには<VisualStateManager>を使用する。ウィンドウサイズが一定値を超えた場合、XAMLの各コンロトールのプロパティを変化させる、という考え方。

レンタカー予約画面のGridは３分割でヘッダーエリア、タイトルエリア、コンテンツエリアとなっているため、これら３つの<Grid>に対して<VisualStateManager>を差し込んで定義していく。
ウィンドウサイズが555以上（iPhoneの横幅375を超えていれば適当な値でOK）であれば、という条件を<VisualState.StateTriggers>で指定し、条件にマッチした場合にGridのWidthRequestをiPadの横幅に合わせて744に変更する、という条件分岐を<VisualState.Setters>で指定する。

MainPage.xml

        <!-- ▼ヘッダーエリア -->
        <Grid Grid.Row="0" BackgroundColor="#d5e4f2" WidthRequest="375">
+            <VisualStateManager.VisualStateGroups>
+                <VisualStateGroupList>
+                    <VisualStateGroup>
+                        <VisualState Name="iPad">
+                            <VisualState.StateTriggers>
+                                <AdaptiveTrigger MinWindowWidth="555" />
+                            </VisualState.StateTriggers>
+                            <VisualState.Setters>
+                                <Setter Property="WidthRequest" Value="744" />
+                            </VisualState.Setters>
+                        </VisualState>
+                    </VisualStateGroup>
+                </VisualStateGroupList>
+            </VisualStateManager.VisualStateGroups>

単純作業とはいえ１個１個のコントロールに対してXMLを入れ子にしていくので、コードの見通しが悪くなる。HTML+CSSの柔軟なデザインが恋しい気分だ。

とはいえ、Entryなどの標準コントロールをすべてContentViewによる独自コントールに置き換えていけば、<VisualStateManager>は独自コントールのContentVIew側で一括して設定できるので、それほど無理はないかもしれない。

まだ微調整は必要だけど、試しにレンタカー予約画面をiPadに対応させてみた。

Gomita

XAMLのCSSでiPadの場合のみスタイルシートを読み込んでレスポンシブデザインできないか考えた。

C#でiPadがどうかを判定するのは簡単。

if (DeviceInfo.Current.Name.StartsWith("iPad mini"))
{
    ...
}

少し調べた限りは難しそう。。。

CSSとはいえHTMLのように柔軟ではなく、非常に限定的なスタイルしか変更できない
XAMLの各コントロールで個別に設定された値をCSS側で!importantで上書きできない
Resourcesフォルダ内の*.cssのスタイルシートを動的に読み込む方法がわからない
こちらにある通り、cssファイルの中身の文字列をStringReaderから読み込む必要あり？