コントロール

  • [アーティクル]

サンプルを参照します。 サンプルを参照する

.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」をご覧ください。
ビュー 説明
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」をご覧ください。
HybridWebView HybridWebView を使用すると、Web ビューで任意の HTML/JS/CSS コンテンツをホストでき、Web ビュー (JavaScript) 内のコードと Web ビュー (C#/.NET) をホストするコードの間で通信が可能になります。 詳細については、「HybridWebView」を参照してください。
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」をご覧ください。