コントロールは、ボタン、テキスト フィールド、リスト、ピッカーなど、Windows アプリを構成する UI 要素です。 コントロールにコンテンツが表示されるか、ユーザーがアプリを操作できるようにします。 パターンは、フォームやリスト詳細レイアウトなどの一般的なシナリオで、複数のコントロールを再利用可能なレシピに結合します。
Windowsは、Fluent デザイン システム上に構築された、45 を超えるすぐに使用できるコントロールを提供します。 シンプルな切り替えから、グリッドやリストなどの豊富なデータ ビューまで、これらのコントロールは、デバイス間で視覚的に洗練され、アクセス可能で応答性の高いインターフェイスを構築するのに役立ちます。
各コントロールとパターンの設計ガイダンス、コード例、ベスト プラクティスについては、このセクションの記事を参照してください。
始めに
アプリにコントロールを追加し、イベント ハンドラーを接続する方法については、「 コントロールの追加とイベントの処理」を参照してください。 再利用可能な XAML スタイルでコントロールの外観をカスタマイズするには、「 コントロールのスタイル設定」を参照してください。
コントロール
次の表に、WinUI で使用できるWindows アプリ コントロールとそのドキュメントへのリンクを示します。
基本入力
| Image | コントロール | 説明 |
|---|---|---|
|
ボタン | ユーザー入力に応答し、Click イベントを発生させるコントロール。 ボタン、ドロップダウン ボタン、分割ボタン、トグル ボタンなどが含まれます。 |
|
のチェック ボックス | ユーザーが選択またはクリアできるコントロール。 |
|
コンボ ボックス | ユーザーが選択できる項目のドロップダウン リスト。 |
|
Hyperlinks | ハイパーリンク テキストとして表示され、URI に移動したり、Click イベントを処理したりできるボタン。 |
|
ラジオ ボタン | ユーザーがオプションのグループから 1 つのオプションを選択できるようにするコントロール。 |
|
評価コントロール | 何かに点数を付ける 1から5までの星で評価する。 |
|
スライダー | トラックに沿って Thumb コントロールを移動することで、ユーザーが値の範囲から選択できるようにするコントロール。 |
|
スイッチの切り替え | 2 つの状態を切り替えることができるスイッチ。 |
コレクション
| Image | コントロール | 説明 |
|---|---|---|
|
アイテム ビュー | さまざまなレイアウトを使用して項目のコレクションを表示するコントロール。 |
|
リスト ビューとグリッド ビューの | 縦書きリストまたは行と列に項目のコレクションを表示するコントロール。 |
|
フリップ ビュー | ユーザーが一度に1つずつ項目をめくることができる項目のコレクションを提供します。 |
|
Pips ポケットベル | ページ番号を視覚的に認識する必要がない場合に、ページ分割されたコレクション内をユーザーが移動できるようにするコントロール。 |
|
ツリー ビュー | 入れ子になった項目を含むノードの展開と折りたたみを含む階層リスト パターン。 |
|
アイテムリピーター | データ ドリブン レイアウト用の柔軟なプリミティブ コントロール。 |
|
スワイプ | 項目に対するクイック メニュー アクションのタッチ ジェスチャ。 |
|
引っ張って更新 | リスト/グリッド内の項目のコレクションをプルして、コレクションの内容を更新する機能を提供します。 |
ダイアログとポップアップ
| Image | コントロール | 説明 |
|---|---|---|
|
ダイアログ | 任意の XAML コンテンツを含むようカスタマイズできるダイアログ ボックス。 |
|
フライアウト | コンテキスト情報を表示し、ユーザー操作を有効にします。 |
|
教育のヒント | ユーザーを誘導し、教育の瞬間を有効にするためのコンテンツが豊富なポップアップ。 |
書式
| Image | コントロール | 説明 |
|---|---|---|
| Forms | 入力コントロールとラベルの組み合わせを使用してユーザー入力を収集して送信するためのパターン。 |
メディア、グラフィックス、図形
| Image | コントロール | 説明 |
|---|---|---|
|
アイコン | さまざまな種類の画像をコンテンツとして使用するアイコン コントロールを表します。 |
|
|
アニメーション化されたアイコン | ユーザーがコントロールを操作するときにアニメーション化するアイコンを表示および制御する要素。 |
|
画像とイメージ ブラシ | 画像コンテンツを表示するコントロール。 |
| インク | インク キャンバスやインク ツール バーなど、デジタル 手描き入力用のコントロール。 | |
|
メディア再生 | ビデオと画像のコンテンツを表示するコントロール。 |
|
図形 | 楕円、四角形、多角形などの図形を描画します。 |
メニューとツール バー
| Image | コントロール | 説明 |
|---|---|---|
|
メニューとコンテキスト メニュー | 単純なコマンドまたはオプションのコンテキスト リストを表示します。 |
|
コマンド バー | レイアウトとその内容のサイズ変更を処理するアプリケーション固有のコマンドを表示するためのツール バー。 |
|
コマンド バーのポップアップ | プロアクティブ コマンドを表示するミニ ツール バーと、コマンドのオプション メニュー。 |
|
メニュー ポップアップとメニュー バー | MenuFlyoutItems を含む MenuItem の表示を許可するクラシック メニュー。 |
Navigation
| Image | コントロール | 説明 |
|---|---|---|
|
パンくずリスト | 現在の場所に至るまでのナビゲーションの履歴を表示します。 |
| リスト/詳細 | 現在選択されている項目の詳細と共に項目の一覧を表示するパターン。 | |
|
ナビゲーション ビュー | 折りたたみ可能なナビゲーション メニューを使用したアプリの最上位領域の一般的な垂直レイアウト。 |
|
ピボット | タブ付きビューでさまざまなソースからの情報を表示します。 |
|
セレクター バー | さまざまなソースの小さなセットからの情報を表示します。 ユーザーは、そのうちの 1 つを選択できます。 |
|
タブ ビュー | 複数のドキュメントを表示するために使用できるタブのコレクションを表示するコントロール。 |
People
| Image | コントロール | 説明 |
|---|---|---|
|
人物の画像 | ユーザー/連絡先の画像を表示します。 |
Pickers
| Image | コントロール | 説明 |
|---|---|---|
|
カラーピッカー | 選択可能なカラー スペクトルを表示するコントロール。 |
|
予定表の日付の選択 | ユーザーがカレンダーを使用して日付値を選択できるようにするコントロール。 |
|
予定表ビュー | ユーザーが日付を選択するためのカレンダーを表示するコントロール。 |
|
日付の選択 | ユーザーが日付値を選択できるようにするコントロール。 |
|
時刻の選択 | ユーザーが時間値を選択できるようにする構成可能なコントロール。 |
スクロールとレイアウト
| Image | コントロール | 説明 |
|---|---|---|
|
エキスパンダー | より多くのコンテンツを含む本文を表示するために展開できるヘッダーを含むコンテナー。 |
|
スクロール コントロールとパン コントロール | ユーザーがコンテンツをパンおよびズームできるようにするコンテナー コントロール。 |
|
注釈付きスクロール バー | 通常の垂直スクロール バーの機能を拡張して、大きなコレクションを簡単に移動できるようにするコントロール。 |
|
セマンティック ズーム | ユーザーがコレクションの 2 つの異なるビュー間をズームし、大きな項目のコレクション間を簡単に移動できるようにします。 |
|
分割ビュー | 2 つのコンテンツ領域があり、ウィンドウに複数の表示オプションがあるコンテナー。 |
|
2 ペイン ビュー | 2つのコンテンツ領域を持つコントロール。利用可能なスペースにサイドバイサイドまたは上下にまたがって配置されます。 |
状態と情報
| Image | コントロール | 説明 |
|---|---|---|
|
進行状況 | 進行状況バーまたは進行状況リングを使用して、タスクのアプリの進行状況を表示します。 |
|
ツールヒント | ポップアップ ウィンドウに要素の情報を表示します。 |
|
情報バー | アプリ全体の状態変更情報を表示するインライン メッセージ。 |
|
情報バッジ | 通知を表示したり、領域にフォーカスを移動したりするための非侵入 UI。 |
テキスト
| Image | コントロール | 説明 |
|---|---|---|
|
自動提案ボックス | ユーザーが入力中に候補を提供するコントロール。 |
|
テキストブロック | 少量のテキストを表示するための軽量コントロール。 |
|
リッチ テキスト ブロック | 書式設定されたテキスト、ハイパーリンク、インライン画像、およびその他のリッチ コンテンツを表示するコントロール。 |
|
テキスト ボックス | 単一行または複数行のプレーン テキスト フィールド。 |
|
リッチ エディット ボックス | 書式設定されたテキスト、ハイパーリンク、およびその他のリッチ コンテンツをサポートするリッチ テキスト編集コントロール。 |
|
パスワード ボックス | パスワードを入力するためのコントロール。 |
|
数値ボックス | 数値入力と代数方程式の評価に使用されるテキスト コントロール。 |
| ラベル | 入力コントロールにアクセス可能なラベルを追加するためのガイダンス。 |
タイトル バー
| Image | コントロール | 説明 |
|---|---|---|
|
タイトル バー | アプリ ウィンドウのタイトル バーをカスタマイズします。 |
WinUI 3 ギャラリー
WinUI 3 ギャラリー アプリは、これらのコントロールを実践的に探索するための最良の方法です。 ほとんどの WinUI コントロール、機能、Fluent Design パターンの対話型デモが提供されているため、このドキュメントに最適です。 それをインストールして、リアルタイムでコントロールを試し、個々のコントロール ページから直接リンクします。
- Microsoft Store から WinUI 3 ギャラリー を取得します。
- GitHubからソース コードを取得します。
その他のコントロールとリソース
Windows Community Toolkit は、組み込みの WinUI コントロールを補完するヘルパー、拡張機能、および追加の UI コントロールのコレクションです。 コミュニティ主導であり、Microsoft によって管理され、高度なレイアウト、コンバーター、アニメーションなどの一般的なシナリオをカバーしています。
試験的なコントロールと機能に早期にアクセスするには、Windows Community Toolkit Labs をご確認ください。このラボでは、メイン ツールキットを卒業する前に新しいコンポーネントが開発およびテストされます。
Windows developer