はじめに
.NET MAUI のレイアウト パネルは、さまざまなデバイス全体でアプリケーションの一貫したユーザー インターフェイスを作成するのに役立ちます。
多くのコンピューターとデバイスにデプロイする予定のチップ計算機アプリケーションをビルドするとします。 各デバイスには、さまざまな画面のサイズとピクセルの密度がある可能性があります。 あなたの目標は、すべてのデバイス上でアプリケーションの外観をできるだけ同じようにすることです。 画面のサイズごとにビューのサイズと位置を手動で計算することは避けたいと考えています。 .NET MAUI には、これらの計算を自動的に行うレイアウト管理システムが含まれています。 子ビューのサイズと位置を自動的に管理する、レイアウト パネル内にビューを配置します。 パネルでは、さまざまなデバイス全体で一貫したユーザー インターフェイスをより簡単に作成することができます。
このモジュールでは、さまざまなデバイス全体で同じような外観の .NET MAUI アプリケーションを構築します。 まず、ビューの推奨されるサイズと位置を設定します。 次に、StackLayout を使用して、ビューを縦方向に並び替えます。 次に、Grid を使用して、ビューを行と列に配置します。 モジュールの終了までには、.NET MAUI アプリケーションは、すべてのデバイスの種類と画面のサイズについて一貫した外観になります。
学習の目的
このモジュールでは、次のことを行います。
- アプリ内のユーザー インターフェイス要素を並び替え、サイズを変更します。
StackLayoutを使用して、縦方向または横方向のリストにビューを表示します。Gridを使用して、行と列にビューを表示します。
前提条件
- .NET MAUI ワークロードがインストールされている Visual Studio 2022
- 省略可能:.NET MAUI 拡張機能を含む Visual Studio Code と、.NET MAUI ワークロードを含む .NET SDK がインストールされていること
- C# と .NET を熟知していること
.NET MAUI 開発の要件
.NET 8 を使用して .NET MAUI アプリを作成するには、Visual Studio バージョン 17.8 以降と次のワークロードをインストールする必要があります。
- .NET Multi-Platform App UI 開発
さらに、.NET MAUI Blazor アプリをビルドする場合は、ASP.NET と Web 開発ワークロードをインストールする必要があります。
セットアップのチュートリアルについては、このドキュメントを参照してください。
Visual Studio Code での開発
macOS または Linux で開発している場合は、Visual Studio Code と .NET MAUI 拡張機能を、.NET SDK および .NET MAUI ワークロードと共にインストールする必要があります。 セットアップのチュートリアルについては、このドキュメントを参照してください。