コントロール

サンプルを参照する

.NET Multi-platform App UI (.NET MAUI) アプリのユーザー インターフェイスは、各ターゲット プラットフォームのネイティブ コントロールにマップされるオブジェクトで構成されています。

.NET MAUI アプリの UI の作成に使用される主なコントロール グループは、ページ、レイアウト、ビューです。 .NET MAUI ページは、通常、画面またはウィンドウ全体を占有します。 通常、ページにはレイアウトが含まれており、レイアウトにはビューや他のレイアウトが含まれている場合もあります。 ページ、レイアウト、ビューは、VisualElement クラスから派生します。 このクラスには、派生クラスで役立つさまざまなプロパティ、メソッド、イベントがあります。

Note

ListView と TableView では、セルの使用もサポートされます。 セルは、テーブル内の項目に使用される特殊な要素です。各項目をレンダリングする方法を記述します。

ページ

.NET MAUI アプリは、1 つ以上のページで構成されます。 通常、ページは画面またはウィンドウ全体を占有し、各ページには少なくとも 1 つのレイアウトが含まれます。

.NET MAUI には、次のページが含まれています。

ページ	説明
ContentPage	ContentPage は 1 つのビューを表示し、最も一般的なタイプのページです。 詳細については、「ContentPage」を参照してください。
FlyoutPage	FlyoutPage は、2 つの関連する情報ページ、つまり、項目を表示するポップアップ ページと、ポップアップ ページ上の項目に関する詳細を表示する詳細ページを管理するページです。 詳細については、「FlyoutPage」を参照してください。
NavigationPage	NavigationPage は、ユーザーが希望どおりにページを前後に移動することができる階層ナビゲーション エクスペリエンスを提供します。 詳細については、「NavigationPage」をご覧ください。
TabbedPage	TabbedPage は、ページの上部または下部のタブでナビゲートできる一連のページで構成され、各タブはページ コンテンツを読み込みます。 詳細については、「TabbedPage」を参照してください。

Layouts

.NET MAUI レイアウトは、ユーザー インターフェイス コントロールを視覚的な構造に構成するために使用され、各レイアウトには通常、複数のビューが含まれています。 レイアウト クラスには、通常、子要素の位置とサイズを設定するロジックが含まれています。

.NET MAUI には、次のレイアウトが含まれています。

レイアウト	説明
AbsoluteLayout	AbsoluteLayout は、子要素をその親を基準にした特定の位置に配置します。 詳細については、「AbsoluteLayout」を参照してください。
BindableLayout	BindableLayout を使用すると、レイアウト クラスは項目のコレクションにバインドし、各項目の外観を設定するオプションを使用してコンテンツを生成できます。 詳細については、「BindableLayout」をご覧ください。
FlexLayout	FlexLayout では、さまざまな配置と向きのオプションを使用して、子をスタックまたはラップできます。 FlexLayout は、フレックス レイアウトまたはフレックス ボックスと呼ばれる CSS フレキシブル ボックス レイアウト モジュールに基づいています。 詳細については、「FlexLayout」を参照してください。
Grid	Grid は、子要素を行と列のグリッドに配置します。 詳細については、「グリッド」を参照してください。
HorizontalStackLayout	HorizontalStackLayout は、子要素を水平スタックに配置します。 詳細については、「HorizontalStackLayout」を参照してください。
StackLayout	StackLayout は、子要素を垂直スタックまたは水平スタックに配置します。 詳細については、「StackLayout」を参照してください。
VerticalStackLayout	VerticalStackLayout は、子要素を垂直スタックに配置します。 詳細については、「VerticalStackLayout」を参照してください。

表示

.NET MAUI ビューは、ラベル、ボタン、スライダーなどの UI オブジェクトで、他の環境ではコントロールやウィジェットと呼ばれます。

.NET MAUI には、次のビューが含まれています。

ビュー	説明
ActivityIndicator	ActivityIndicator はアニメーションを使用して、進行状況を示すことなく、アプリが長いアクティビティに従事していることを示します。 詳細については、「ActivityIndicator」をご覧ください。
BlazorWebView	BlazorWebView を使用すると、.NET MAUI アプリで Blazor Web アプリをホストできます。 詳細については、「BlazorWebView」をご覧ください。
Border	Border は、別のコントロールの周囲に境界線、背景、またはその両方を描画するコンテナー コントロールです。 詳細については、「Border」をご覧ください。
BoxView	BoxView は、指定された幅、高さ、色の長方形または正方形を描画します。 詳細については、「BoxView」をご覧ください。
Button	Button はテキストを表示し、タップまたはクリックに応答して、アプリにタスクの実行を指示します。 詳細については、「Button」をご覧ください。
CarouselView	CarouselView には、データ項目のスクロール可能なリストが表示されます。ユーザーは、スワイプしてコレクション内を移動できます。 詳細については、「CarouselView」をご覧ください。
CheckBox	CheckBox を使用すると、チェックまたは空のボタンを使用してブール値を選択できます。 詳細については、「CheckBox」をご覧ください。
CollectionView	CollectionView は、さまざまなレイアウト仕様を使用して、選択可能なデータ項目のスクロール可能なリストを表示します。 詳細は、「 CollectionView」を参照してください。
ContentView	ContentView は、再利用可能なカスタム コントロールの作成を可能にするコントロールです。 詳細については、「ContentView」をご覧ください。
DatePicker	DatePicker を使用すると、プラットフォームで日付の選択を実行して、日付を選択できます。 詳細については、「DatePicker」をご覧ください。
Editor	Editor を使用すると、複数行のテキストを入力および編集できます。 詳細については、「Editor」をご覧ください。
Ellipse	Ellipse は、楕円または円を表示します。 詳細については、「Ellipse」をご覧ください。
Entry	Entry では、1 行のテキストを入力および編集できます。 詳細については、「Entry」をご覧ください。
Frame	Frame は、色、影、その他のオプションで設定できる罫線でビューまたはレイアウトをラップするために使用されます。 詳細については、「Frame」をご覧ください。
GraphicsView	GraphicsView は、Microsoft.Maui.Graphics 名前空間の型を使用して 2D グラフィックスを描画できる、グラフィックス キャンバスです。 詳細については、「GraphicsView」をご覧ください。
Image	Image には、ローカル ファイル、URI、埋め込みリソース、またはストリームから読み込むことができるが表示されます。 詳細については、「Image」をご覧ください。
ImageButton	ImageButton は画像を表示し、タップまたはクリックに応答して、アプリがタスクを実行するように指示します。 詳細については、「ImageButton」をご覧ください。
IndicatorView	IndicatorView は、CarouselView 内の項目数を表すインジケーターを表示します。 詳細については、「IndicatorView」をご覧ください。
Label	Label では、1 行と複数行のテキストが表示されます。 詳細については、「Label」をご覧ください。
Line	Line は、始点から終点までの線を表示します。 詳細については、「Line」をご覧ください。
ListView	ListView は、選択可能なデータ項目のスクロール可能なリストを表示します。 詳細については、「ListView」をご覧ください。
Map	Map は地図を表示します。アプリに Microsoft.Maui.Controls.Maps NuGet パッケージがインストールされている必要があります。
Path	Path は、曲線と複雑な図形を表示します。 詳細については、「Path」をご覧ください。
Picker	Picker には短い項目リストが表示され、そこから項目を選択できます。 詳細については、「Picker」をご覧ください。
Polygon	Polygon は多角形を表示します。 詳細については、「Polygon」をご覧ください。
Polyline	Polyline は、接続された一連の直線を表示します。 詳細については、「Polyline」をご覧ください。
ProgressBar	ProgressBar では、アニメーションを使用して、アプリが長いアクティビティを進めていることを示します。 詳細については、「ProgressBar」をご覧ください。
RadioButton	RadioButton は、セットから 1 つのオプションを選択できるボタンの種類です。 詳細については、「RadioButton」をご覧ください。
Rectangle	Rectangle は長方形または正方形を表示します。 詳細については、「Rectangle」をご覧ください。
RefreshView	RefreshView は、スクロール可能なコンテンツをプルして更新する機能を提供するコンテナー コントロールです。 詳細については、「RefreshView」をご覧ください。
RoundRectangle	RoundRectangle は、角が丸い長方形または正方形を表示します。 詳細については、「Rectangle」をご覧ください。
ScrollView	ScrollView は、コンテンツ (通常はレイアウト) のスクロールを提供します。 詳細については、「ScrollView」をご覧ください。
SearchBar	SearchBar は、検索を開始するために使用されるユーザー入力コントロールです。 詳細については、「SearchBar」をご覧ください。
Slider	Slider を使用すると、連続した範囲から double 値を選択できます。 詳細については、「Slider」をご覧ください。
Stepper	Stepper を使用すると、増分値の範囲から double 値を選択できます。 詳細については、「Stepper」をご覧ください。
SwipeView	SwipeView は、コンテンツ項目をラップし、スワイプ ジェスチャによって表示されるコンテキスト メニュー項目を提供するコンテナ コントロールです。 詳細については、「SwipeView」をご覧ください。
Switch	Switch を使用すると、オンまたはオフにできるボタンの種類を使用してブール値を選択できます。 詳細については、switch に関する説明を参照してください。
TableView	TableView には、セクションにグループ化できるスクロール可能な項目のテーブルが表示されます。 詳細については、「TableView」をご覧ください。
TimePicker	TimePicker では、プラットフォームの時刻の選択を使用して時刻を選択できます。 詳細については、「TimePicker」をご覧ください。
TwoPaneView	TwoPaneView は、2 つのビューを持つコンテナーを表します。これらのビューでは、サイド バイ サイドまたは上から下のいずれかの使用可能な領域で、コンテンツのサイズ調整と配置を行えます。 詳細については、「TwoPaneView」をご覧ください。
WebView	WebView は、Web ページまたはローカル HTML コンテンツを表示します。 詳細については、「WebView」をご覧ください。