次の方法で共有

コントロール

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

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

.NET MAUI アプリのユーザー インターフェイスを作成するために使用される主なコントロール グループは、ページ、レイアウト、およびビューです。 .NET MAUI ページは、通常、全画面表示またはウィンドウを占有します。 通常、ページには、ビューやその他のレイアウトを含むレイアウトが含まれています。 ページ、レイアウト、およびビューは、 VisualElement クラスから派生します。 このクラスには、派生クラスで役立つさまざまなプロパティ、メソッド、およびイベントが用意されています。

注

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