コントロール

  • [アーティクル]

Browse sample. サンプルを参照する

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

.NET MAUI アプリのユーザー インターフェイスの作成に使用される主なコントロール グループは、ページ、レイアウト、ビューです。 .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 には、次のレイアウトが含まれています。

Layout 説明
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」をご覧ください。