C#のWPFのコントロール一覧

C#のWPFで使えるコントロールの一覧です。

目次

  1. レイアウト
    1. Border
    2. BulletDecorator
    3. Canvas
    4. DockPanel
    5. Expander
    6. Grid
    7. GridSplitter
    8. GroupBox
    9. Panel
    10. ResizeGrip
    11. Separator
    12. ScrollBar
    13. ScrollViewer
    14. StackPanel
    15. Thumb
    16. Viewbox
    17. VirtualizingStackPanel
    18. Window
    19. WrapPanel
  2. ボタン
    1. Button
    2. RepeatButton
  3. データ表示
    1. DataGrid
    2. ListView
    3. TreeView
  4. 日付の表示と選択
    1. Calendar
    2. DatePicker
  5. メニュー
    1. ContextMenu
    2. Menu
    3. ToolBarとToolBarTray
  6. 選択ツール
    1. CheckBox
    2. ComboBox
    3. ListBox
    4. RadioButton
    5. Slider
  7. ナビゲーション
    1. Frame
    2. Hyperlink
    3. Page
    4. NavigationWindow
    5. TabControl
  8. ダイアログボックス
    1. OpenFileDialog
    2. PrintDialog
    3. SaveFileDialog
  9. ユーザーへの情報提供
    1. AccessText
    2. Label
    3. Popup
    4. ProgressBar
    5. StatusBar
    6. TextBlock
    7. ToolTip
  10. ドキュメント
    1. DocumentViewer
    2. FlowDocumentPageViewer
    3. FlowDocumentReader
    4. FlowDocumentScrollViewer
    5. StickyNoteControl
  11. 入力
    1. TextBox
    2. RichTextBox
    3. PasswordBox
  12. メディア
    1. Image
    2. MediaElement
    3. SoundPlayerAction
  13. インク
    1. InkCanvas
    2. InkPresenter

レイアウト

Border

要素の周囲に罫線を表示したり背景を表示します。

下図の例は、Window内に黒色線で水色背景をBorderコントロールで描いたものです。

Borderコントロールの例

BulletDecorator

行頭に要素を表示するコントロールです。

下図の例は、「僕と契約して〇〇〇〇になってよ」というTextBlockに、BulletDecoratorでハートの文字を行頭に付けたものです。

BulletDecoratorコントロールの例

Canvas

アイテムの座標による配置をするためのコントロールです。

下図の例は、Canvasに位置を指定して四角形を描いたものです。

Canvasコントロールの例

DockPanel

コンテンツを整列するボックスです。

下図の例は、DockPanelに四角形のCanvasを2つ並べたものです。

DockPanelコントロールの例

Expander

コンテンツを折りたたみ表示するコントロールです。

下図の例は、ExpanderにTextBlockを入れた例です。

Expanderのヘッダーに「久兵衛」と入れてあります。この図は開いた状態です。

Expanderコントロールの例

左上の矢印をクリックすると、TextBlockを折りたたんだり開いたりすることができます。下図は折りたたんだ状態です。

Expanderコントロールの例

Grid

グリッドを生成するコントロールです。

Window内にグリッドを生成して、行(Row)と列(Column)を指定することで、コントロールを縦横に整列して配置することができます。

GridSplitter

Gridの行間(列間)のスペースを変更します。

GroupBox

インターフェイス要素をまとめたコンテナを作成するコントロールです。

下図の例は、複数のRadioButtonをGroupBoxでまとめた例です。RadioButtonを囲っている枠の部分が、GroupBoxです。

GroupBoxコントロールの例

Panel

各Panelクラスの大本の継承元のコントロールです。

ResizeGrip

Windowのサイズを変更するコントロールです。

Separator

アイテムを区切るセパレータです。

ScrollBar

スクロールバーです。

下図の例は、WindowにScrollBarコントロールを配置したものです。コントロールによっては最初からスクロールバーの機能を持っているものがありますので、使用するコントロールのプロパティを調べてみてください。

ScrollBarコントロールの例

ScrollViewer

表示領域より大きいコンテンツを表示したときにスクロールバーを表示します。

下図の例は、WindowにScrollViewerコントロールを配置して、その中にTextBlockと緑色の四角形を配置したものです。TextBlockと緑色の四角形をWindowよりも大きくしたので、ScrollViewerにスクロールバーが表示されます。

ScrollViewerコントロールの例

StackPanel

コンテンツを水平または垂直に一列に並べるボックスです。

下図の例は、WindowにStackPanelコントロールを配置して、その中にTextBlockと緑色の四角形と水色の四角形を配置したものです。上から順番に並べられ、最下部に余白ができています。

StackPanelコントロールの例

Thumb

ユーザーがドラッグ操作をできるようにするコントロールです。Sliderコントロールなどの他のコントロールに付随して使われるもので、これらのコントロールのツマミの部分になります。

Viewbox

CanvasやImageなどのコンテンツを拡大縮小して表示するコントロールです。

VirtualizingStackPanel

Window

ウィンドウです。

WrapPanel

コンテンツを順番に並べて、ボックスの端に達したら次の行(列)に送るボックスです。

下図の例は、WindowにWrapPanelコントロールを配置して、その中にTextBlockと緑色の四角形と水色の四角形と黄色の四角形を、この順番で横方向に配置したものです。各要素の幅がWrapPanelの幅を超えると、下の段に改行されて配置されています。

WrapPanelコントロールの例

ボタン

Button

ボタンです。

下図の例は、WindowにButtonコントロールを配置しただけのものです。

Buttonコントロールの例

RepeatButton

クリックしている間にイベントをリピートするボタンです。

下図の例は、WindowにRepeatButtonコントロールを配置し、その下にTextBlockを配置したものです。クリックするとTextBlockに〇が追加されていきます。Buttonコントロールの場合はボタンを押し続けても1文字しか追加されませんが、RepeatButtonの場合はボタンを押し続けると〇が追加され続けます。

RepeatButtonコントロールの例

データ表示

DataGrid

グリッドにデータを表示するコントロールです。

下図の例は、WindowにDataGridコントロールを配置しただけのものです。ヘッダーが表示されていますが、このようにExcelのシート的にデータを表示するものです。

DataGridコントロールの例

ListView

アイテムのリストを表示するコントロールです。

下図の例は、WindowにListViewコントロールを配置したものです。リストを表形式で表示します。

ListViewコントロールの例

TreeView

ツリー構造のデータを表示するコントロールです。

下図の例は、WindowにTreeViewを配置したものです。

これはTreeを閉じた状態です。

TreeViewコントロールの例(閉じた場合)

Treeを開くとこうなります。

TreeViewコントロールの例(開いた場合)

日付の表示と選択

Calendar

カレンダーを表示して日付を選択するコントロールです。

下図の例は、WindowにCalendarコントロールを配置したものです。月曜始まりのカレンダーで、2021年1月1日を選択した状態です。

Calendarコントロールの例

DatePicker

日付を選択するコントロールです。

下図の例は、WindowにDatePickerコントロールを配置したものです。

ボックスの右上にあるアイコンをクリックすると、カレンダーが開きます。

DatePickerコントロールの例

開いたカレンダーで日付を選択すると、選んだ日付がボックスに表示されます。

DatePickerコントロールの例

メニュー

ContextMenu

右クリックするとポップアップするメニューです。

下図の例は、Windowに配置したTextBoxにContextMenuを設定したものです。

TextBoxの上で右クリックするとメニューがポップアップ表示されます。

ContextMenuコントロールの例

ToolBarとToolBarTray

Windowのツールバーです。

下図の例は、WindowにDockPanelを配置して、その中にToolBarTrayとToolBarを配置したものです。いわゆるWindowsのツールバーです。

ToolBarコントロールの例

選択ツール

CheckBox

チェックボックスという、ユーザーがオンオフを選択するためのコントロールです。

複数選択可の選択肢をもうける際に使用するコントロールです。ToDoリストのようなチェックリストも使用できます。

CheckBoxの使用例

ComboBox

クリックで表示と非表示を切り替える、ドロップダウンリストのコントロールです。

下図の例は、TextBlockの下にComboBoxを配置した例です。

ComboBoxの使用例(選択前)

ComboBoxをクリックすると、選択肢が表示されます。

ComboBoxの使用例(選択中)

選択肢の中から1つを選択すると、選んだ項目がComboBoxに表示されます。

ComboBoxの使用例(選択後)

ListBox

アイテムの一覧を表示して、ユーザーが選択するコントロールです。

下図の例は、TextBlockの下にListBoxを配置した例です。

ComboBoxと違って、最初から選択肢が表示されます。プロパティを設定すると、下図のように複数の選択肢を同時に選択することができます。

ListBoxの使用例

RadioButton

ユーザーが複数の選択肢から選択するためのコントロールです。

下図の例は、TextBlockの下にRadioButtonを複数配置したものです。これらの複数のRadioButtonを1つのグループにして、これらの選択肢の中から1つだけを選択できるようにして使います。

RadioButtonの使用例

Slider

ユーザーが一定の範囲内の値を選択するためのコントロールです。

下図の例は、Sliderの下にTextBlockを配置した例です。

Sliderのつまみを動かすと、Sliderの値がTextBlockに表示されます。

Sliderの使用例

ナビゲーション

Frame

コンテンツ(XAML)を切り替えて表示します。HTMLのフレームのようなイメージです。Frameコントロール内に外部のXAMLを埋め込むような感じです。

Page

いわゆるページです。Windowを切り替えることなくWindowに表示されるコンテンツを変更する際に使用します。例えばインストーラーなどは手順が進む毎にWindow内で表示が切り替わっていきますが、それを実現するものです。

Frameコントロールで複数のPageを切り替える感じです。

TabControl

コンテンツ(ページ)をタブで切り替えるタイプのナビゲーションです。

TabControlの使用例

ダイアログボックス

OpenFileDialog

開くファイルを指定するためのコモンダイアログを表示します。

OpenFileDialogの使用例

PrintDialog

Windowsの標準の印刷ダイアログを表示します。

PrintDialogの使用例

SaveFileDialog

保存するファイルを指定するためのコモンダイアログを表示します。

SaveFileDialogの使用例

ユーザーへの情報提供

AccessText

下図の例は、ボタンにAccessTextを設定した例です。ボタンをクリックすると下のTextBlockに〇を入力するのですが、クリックしなくてもAccessTextに設定したキーを押すと〇が入力されます。

AccessTextの使用例

Label

ProgressBar

プログレスバーです。進行状況の表示などに使用するものです。

下図の例は、WindowにProgressBarを配置したものです。表示は、進捗率を40%にして表示しています。

ProgressBarの使用例

StatusBar

ウィンドウのステータスバーです。

下図の例は、Windowの下部にStatusBarを配置したものです。StatusBarの中にTextBlockとSeparatorを配置しました。

StatusBarの使用例

TextBlock

テキストを表示するコントロールです。入力や編集をせずに、表示するだけのものです。

下図の例は、WindowにTextBlockを配置したものです。

TextBlockの使用例

ToolTip

インターフェイスの要素についての情報を表示するポップアップウインドウのコントロールです。

下図の例は、TextBoxにToolTipを設定した例です。TextBox上にマウスのポインタを移動すると、ToolTipに設定した文言がポップアップして表示されます。

ToolTipの使用例

ドキュメント

DocumentViewer

XpsDocumentなどのFixedDocumentを表示するコントロールです。

下図の例は、WindowにDocumentViewerコントロールを配置しただけのものです。

DocumentViewerの使用例

FlowDocumentPageViewer

FlowDocumentを1ページずつ表示するコントロールです。

下図の例は、WindowにFlowDocumentPageViewerコントロールを配置しただけのものです。

FlowDocumentPageViewerの使用例

FlowDocumentReader

FlowDocumentをいろいろなモードで表示するコントロールです。

下図の例は、WindowにFlowDocumentReaderコントロールを配置しただけのものです。下側に配置されているアイコンで表示方法を切り替えできます。

FlowDocumentReaderの使用例

FlowDocumentScrollViewer

FlowDocumentを連続モードで表示するコントロールです。

下図の例は、WindowにFlowDocumentScrollViewerコントロールを配置しただけのものです。

FlowDocumentScrollReaderの使用例

StickyNoteControl

FlowDocumentに付箋を付けるコントロールです。

入力

TextBox

書式無しのテキストの入力や表示をするコントロールです。

下図の例は、WindowにTextBoxを配置したものです。いわゆるメモ帳に入力するような、書式の無いテキストを入力できます。

TextBoxの使用例

RichTextBox

書式付きのドキュメント(FlowDocumentオブジェクト)の編集をするコントロールです。

PasswordBox

パスワード入力用のコントロールです。

下図の例は、WindowにPasswordBoxを配置したものです。

PasswordBoxコントロールに1234と入力した状態ですが、文字が*で表示されています。

PasswordBoxの使用例

メディア

Image

BMP、GIF、JPG、PNG、TIFFなどの画像を表示します。

画像ファイルを読み込んでImageコントロールに表示している例 がありますので、ご参照ください。

MediaElement

ビデオを表示します。

単純にMediaElementコントロールにビデオを再生します。再生コントロールのボタン類はつきませんので、自前で準備する必要があります。

SoundPlayerAction

オーディオ(WAV)を再生します。

特に画面上の表示はありません。

インク

InkCanvas

ペン入力とその入力結果の表示をします。

下図の例は、WindowいっぱいにInkCanvasを表示して、マウスで適当に絵を描いたものです。

InkCanvasの使用例

InkPresenter

インクを表示します。

下図の例は、WindowにInkPresenterコントロールを配置して、インクで描いた図を表示したものです。

InkPresenterの使用例

公開日

広告