機能別コントロールControls by function

Windows の XAML UI フレームワークには、UI 開発をサポートする多くのコントロールのライブラリが用意されています。The XAML UI framework for Windows provides an extensive library of controls that support UI development. これらのコントロールの一部は視覚的に表示されますが、それ以外のコントロールは他のコントロールまたはコンテンツ (画像やメディアなど) のコンテナーとして機能します。Some of these controls have a visual representation; others function as the containers for other controls or content, such as images and media.

XAML UI の基本のサンプルをダウンロードすると、Windows UI コントロールの多くを実際に見ることができます。You can see many of the Windows UI controls in action by downloading the XAML UI Basics sample.

XAML コントロール ギャラリーXAML Controls Gallery
XAML controls gallery

XAML コントロール ギャラリー アプリがインストールされている場合、こちらをクリックしてアプリを開き、NavigationView の動作を確認してください。 If you have the XAML Controls Gallery app installed, click here to open the app and see the NavigationView in action

アプリで使うことができる一般的な XAML コントロールの機能別の一覧を以下に示します。Here's a list by function of the common XAML controls you can use in your app.

アプリ バーとコマンドAppbars and commands

アプリ バーApp bar

アプリ特有のコマンドを表示するツール バー。A toolbar for displaying application-specific commands. 「コマンド バー」をご覧ください。See Command bar.

参照 :AppBarReference: AppBar

アプリ バーのボタンApp bar button

アプリ バー スタイルを使ってコマンドを表示するボタン。A button for showing commands using app bar styling.

アプリ バーのボタン アイコン

参照 :AppBarButtonSymbolIconBitmapIconFontIconPathIconReference: AppBarButton, SymbolIcon, BitmapIcon, FontIcon, PathIcon

デザインと使い方: アプリ バーとコマンド バーのコントロールのガイドDesign and how-to: App bar and command bar control guide

サンプル コード: XAML コマンド実行のサンプルSample code: XAML Commanding sample

アプリ バーの区分線App bar separator

コマンド バーのコマンドのグループを視覚的に区切ります。Visually separates groups of commands in a command bar.

参照 :AppBarSeparatorReference: AppBarSeparator

サンプル コード: XAML コマンド実行のサンプルSample code: XAML Commanding sample

アプリ バーのトグル ボタンApp bar toggle button

コマンド バーでコマンドを切り替えるボタン。A button for toggling commands in a command bar.

参照 :AppBarToggleButtonReference: AppBarToggleButton

サンプル コード: XAML コマンド実行のサンプルSample code: XAML Commanding sample

コマンド バーCommand bar

アプリ バーのボタン要素のサイズ変更を処理する専用のアプリ バー。A specialized app bar that handles the resizing of app bar button elements.

コマンド バー コントロール

<CommandBar>
    <AppBarButton Icon="Back" Label="Back" Click="AppBarButton_Click"/>
    <AppBarButton Icon="Stop" Label="Stop" Click="AppBarButton_Click"/>
    <AppBarButton Icon="Play" Label="Play" Click="AppBarButton_Click"/>
</CommandBar>

参照 :CommandBarReference: CommandBar

デザインと使い方: アプリ バーとコマンド バーのコントロールのガイドDesign and how-to: App bar and command bar control guide

サンプル コード: XAML コマンド実行のサンプルSample code: XAML Commanding sample

ボタンButtons

ButtonButton

ユーザーの入力に応答して Click イベントを発生させるコントロール。A control that responds to user input and raises a Click event.

標準的なボタン

<Button x:Name="button1" Content="Button" 
        Click="Button_Click" />

参照 :ボタンReference: Button

デザインと使い方: ボタン コントロールのガイドDesign and how-to: Buttons control guide

「ハイパーリンク ボタン」をご覧ください。See Hyperlink button.

ブラウザーでマークアップ テキストとして表示され、指定された URI を開くボタンです。A button that appears as marked up text and opens the specified URI in a browser.

ハイパーリンク ボタン

<HyperlinkButton Content="www.microsoft.com" 
                 NavigateUri="https://www.microsoft.com"/>

参照 :HyperlinkButtonReference: HyperlinkButton

デザインと使い方: ハイパーリンク コントロールのガイドDesign and how-to: Hyperlinks control guide

繰り返しボタンRepeat button

押されたときから離されるまでの間、繰り返し Click イベントを発生させるボタン。A button that raises its Click event repeatedly from the time it's pressed until it's released.

繰り返しボタン コントロール

<RepeatButton x:Name="repeatButton1" Content="Repeat Button" 
              Click="RepeatButton_Click" />

参照 :RepeatButtonReference: RepeatButton

デザインと使い方: ボタン コントロールのガイドDesign and how-to: Buttons control guide

コレクション コントロールとデータ コントロールCollection/data controls

フリップ ビューFlip view

ユーザーが 1 つずつめくって表示することができる項目のコレクションを表示するコントロール。A control that presents a collection of items that the user can flip through, one item at a time.

<FlipView x:Name="flipView1" SelectionChanged="FlipView_SelectionChanged">
    <Image Source="Assets/Logo.png" />
    <Image Source="Assets/SplashScreen.png" />
    <Image Source="Assets/SmallLogo.png" />
</FlipView>

参照 :FlipViewReference: FlipView

デザインと使い方: FlipView コントロールDesign and how-to: Flip view control guide

グリッド ビューGrid view

縦方向にスクロールできる複数行と複数列で項目のコレクションを表示するコントロール。A control that presents a collection of items in rows and columns that can scroll vertically.

<GridView x:Name="gridView1" SelectionChanged="GridView_SelectionChanged">
    <x:String>Item 1</x:String>
    <x:String>Item 2</x:String>
</GridView>

参照 :GridViewReference: GridView

デザインと使い方: リストDesign and how-to: Lists

サンプル コード: ListView のサンプルSample code: ListView sample

項目コントロールItems control

データ テンプレートで指定された UI にある項目のコレクションを表示するコントロール。A control that presents a collection of items in a UI specified by a data template.

<ItemsControl/>

参照 :ItemsControlReference: ItemsControl

リスト ビューList view

縦方向にスクロールできるリストで項目のコレクションを表示するコントロール。A control that presents a collection of items in a list that can scroll vertically.

<ListView x:Name="listView1" SelectionChanged="ListView_SelectionChanged">
    <x:String>Item 1</x:String>
    <x:String>Item 2</x:String>
</ListView>

参照 :ListViewReference: ListView

デザインと使い方: リストDesign and how-to: Lists

サンプル コード: ListView のサンプルSample code: ListView sample

日付と時刻コントロールDate and time controls

カレンダーの日付の選択コントロールCalendar date picker

ドロップダウン カレンダー表示を使って、ユーザーが日付を選択できるコントロール。A control that lets a user select a date using a drop-down calendar display.

カレンダー ビューが開いたカレンダーの日付の選択コントロール

<CalendarDatePicker/>

参照 :CalendarDatePickerReference: CalendarDatePicker

デザインと使い方: カレンダー、日付、および時刻コントロールDesign and how-to: Calendar, date, and time controls

カレンダー ビューCalendar view

ユーザーが 1 つまたは複数の日付を選択できる、構成可能なカレンダー表示。A configurable calendar display that lets a user select single or multiple dates.

<CalendarView/>

参照 :CalendarViewReference: CalendarView

デザインと使い方: カレンダー、日付、および時刻コントロールDesign and how-to: Calendar, date, and time controls

日付の選択コントロールDate picker

ユーザーが日付を選択できるコントロール。A control that lets a user select a date.

日付の選択コントロール

<DatePicker Header="Arrival Date"/>

参照 :DatePickerReference: DatePicker

デザインと使い方: カレンダー、日付、および時刻コントロールDesign and how-to: Calendar, date, and time controls

時刻の選択コントロールTime picker

ユーザーが時間値を設定できるコントロール。A control that lets a user set a time value.

TimePicker コントロール

<TimePicker Header="Arrival Time"/>

参照 :TimePickerReference: TimePicker

デザインと使い方: カレンダー、日付、および時刻コントロールDesign and how-to: Calendar, date, and time controls

ポップアップFlyouts

ショートカット メニューContext menu

「メニュー ポップアップ」および「ポップアップ メニュー」をご覧ください。See Menu flyout and Popup menu.

ポップアップFlyout

ユーザーの操作が必要であることを示すメッセージを表示しますDisplays a message that requires user interaction. (ダイアログでは他のユーザー操作がブロックされますが、ポップアップでは別のウィンドウが作成されず、操作もブロックされません)。(Unlike a dialog, a flyout does not create a separate window, and does not block other user interaction.)

ポップアップ コントロール

<Flyout>
    <StackPanel>
        <TextBlock Text="All items will be removed. Do you want to continue?"/>
        <Button Click="DeleteConfirmation_Click" Content="Yes, empty my cart"/>
    </StackPanel>
</Flyout>

参照 :FlyoutReference: Flyout

デザインと使い方: ポップアップDesign and how-to: Flyouts

ユーザーが現在行っている内容に関連するコマンドまたはオプションの一覧を一時的に表示します。Temporarily displays a list of commands or options related to what the user is currently doing.

メニュー ポップアップ コントロール

<MenuFlyout>
    <MenuFlyoutItem Text="Reset" Click="Reset_Click"/>
    <MenuFlyoutSeparator/>
    <ToggleMenuFlyoutItem Text="Shuffle" 
                          IsChecked="{Binding IsShuffleEnabled, Mode=TwoWay}"/>
    <ToggleMenuFlyoutItem Text="Repeat" 
                          IsChecked="{Binding IsRepeatEnabled, Mode=TwoWay}"/>
</MenuFlyout>

参照 :MenuFlyoutMenuFlyoutItemMenuFlyoutSeparatorToggleMenuFlyoutItemReference: MenuFlyout, MenuFlyoutItem, MenuFlyoutSeparator, ToggleMenuFlyoutItem

デザインと使い方: メニューとショートカット メニューDesign and how-to: Menus and context menus

サンプル コード: XAML コンテキスト メニューのサンプルSample code: XAML Context Menu sample

指定したコマンドを表示するためのカスタム メニュー。A custom menu that presents commands that you specify.

参照 :PopupMenuReference: PopupMenu

デザインと使い方: ダイアログDesign and how-to: Dialogs

ヒントTooltip

要素についての情報を表示するポップアップ ウィンドウ。A pop-up window that displays information for an element.

ヒント コントロール

<Button Content="Button" Click="Button_Click" 
        ToolTipService.ToolTip="Click to perform action" />

参照 :ToolTipToolTipServiceReference: ToolTip, ToolTipService

デザインと使い方: ヒントのガイドラインDesign and how-to: Guidelines for tooltips

イメージImages

ImageImage

画像を表示するコントロール。A control that presents an image.

<Image Source="Assets/Logo.png" />

参照 :画像Reference: Image

デザインと使い方: Image と ImageBrushDesign and how-to: Image and ImageBrush

サンプル コード: XAML 画像のサンプルSample code: XAML images sample

グラフィックスとインクGraphics and ink

InkCanvasInkCanvas

インク ストロークを受信し、表示するコントロール。A control that receives and displays ink strokes.

<InkCanvas/>

参照 :InkCanvasReference: InkCanvas

図形Shapes

楕円形、四角形、直線、ベジエ パスなどのように表示できる、保持モードの各種グラフィック オブジェクト。Various retained mode graphical objects that can be presented like ellipses, rectangles, lines, Bezier paths, etc.

多角形 パスA polygon A path

<Ellipse/>
<Path/>
<Rectangle/>

参照 :図形Reference: Shapes

手順図形の描画How to: Drawing shapes

サンプル コード: XAML ベクターベース描画のサンプルSample code: XAML vector-based drawing sample

レイアウト コントロールLayout controls

境界線Border

境界線、背景、またはこの両方を他のオブジェクトの周囲に描画するコンテナー コントロール。A container control that draws a border, background, or both, around another object.

2 つの四角形の周囲の境界線

<Border BorderBrush="Blue" BorderThickness="4" 
        Height="108" Width="64" 
        Padding="8" CornerRadius="4">
    <Canvas>
        <Rectangle Fill="Orange"/>
        <Rectangle Fill="Green" Margin="0,44"/>
    </Canvas>
</Border>

参照 :BorderReference: Border

キャンバスCanvas

キャンバスの左上隅を基準とする子要素の絶対配置をサポートするレイアウト パネル。A layout panel that supports the absolute positioning of child elements relative to the top left corner of the canvas.

キャンバス レイアウト パネル

<Canvas Width="120" Height="120">
    <Rectangle Fill="Red"/>
    <Rectangle Fill="Blue" Canvas.Left="20" Canvas.Top="20"/>
    <Rectangle Fill="Green" Canvas.Left="40" Canvas.Top="40"/>
    <Rectangle Fill="Orange" Canvas.Left="60" Canvas.Top="60"/>
</Canvas>

参照 :CanvasReference: Canvas

グリッドGrid

複数行と複数列での子要素の配置をサポートするレイアウト パネル。A layout panel that supports the arranging of child elements in rows and columns.

グリッド レイアウト パネル

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="50"/>
        <RowDefinition Height="50"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="50"/>
        <ColumnDefinition Width="50"/>
    </Grid.ColumnDefinitions>
    <Rectangle Fill="Red"/>
    <Rectangle Fill="Blue" Grid.Row="1"/>
    <Rectangle Fill="Green" Grid.Column="1"/>
    <Rectangle Fill="Orange" Grid.Row="1" Grid.Column="1"/>
</Grid>

参照 :GridReference: Grid

パン スクロール ビューアーPanning scroll viewer

「スクロール ビューアー」をご覧ください。See Scroll viewer.

RelativePanelRelativePanel

互いまたは親パネルを基準にして、子オブジェクトの位置を決定し、調整できるパネル。A panel that lets you position and align child objects in relation to each other or the parent panel.

RelativePanel レイアウト パネル

<RelativePanel>
    <TextBox x:Name="textBox1" RelativePanel.AlignLeftWithPanel="True"/>
    <Button Content="Submit" RelativePanel.Below="textBox1"/>
</RelativePanel>

参照 :RelativePanelReference: RelativePanel

スクロール バーScroll bar

「スクロール ビューアー」をご覧くださいSee scroll viewer. (ScrollBar は ScrollViewer の要素です。(ScrollBar is an element of ScrollViewer. 通常、スタンドアロン コントロールとしては使用しません)。You don't typically use it as a stand-alone control.)

参照 :ScrollBarReference: ScrollBar

スクロール ビューアーScroll viewer

ユーザーが、コンテンツのパンとズームを実行できるようにするコンテナー コントロール。A container control that lets the user pan and zoom its content.

<ScrollViewer ZoomMode="Enabled" MaxZoomFactor="10" 
              HorizontalScrollMode="Enabled" 
              HorizontalScrollBarVisibility="Visible"
              Height="200" Width="200">
    <Image Source="Assets/Logo.png" Height="400" Width="400"/>
</ScrollViewer>

参照 :ScrollViewerReference: ScrollViewer

デザインと使い方: スクロール コントロールとパン コントロールのガイドDesign and how-to: Scroll and panning controls guide

サンプル コード: XAML のスクロール、パン、ズームのサンプルSample code: XAML scrolling, panning and zooming sample

スタック パネルStack panel

子要素を水平方向または垂直方向の単一行に配置するレイアウト パネル。A layout panel that arranges child elements into a single line that can be oriented horizontally or vertically.

スタック パネル レイアウト コントロール

<StackPanel>
    <Rectangle Fill="Red"/>
    <Rectangle Fill="Blue"/>
    <Rectangle Fill="Green"/>
    <Rectangle Fill="Orange"/>
</StackPanel>

参照 :StackPanelReference: StackPanel

VariableSizedWrapGridVariableSizedWrapGrid

複数行と複数列での子要素の配置をサポートするレイアウト パネル。A layout panel that supports the arranging of child elements in rows and columns. 各子要素を、複数の行と列に配置できます。Each child element can span multiple rows and columns.

可変サイズ折り返しグリッド レイアウト パネル

<VariableSizedWrapGrid MaximumRowsOrColumns="3" ItemHeight="44" ItemWidth="44">
    <Rectangle Fill="Red"/>
    <Rectangle Fill="Blue" Height="80" 
               VariableSizedWrapGrid.RowSpan="2"/>
    <Rectangle Fill="Green" Width="80" 
               VariableSizedWrapGrid.ColumnSpan="2"/>
    <Rectangle Fill="Orange" Height="80" Width="80" 
               VariableSizedWrapGrid.RowSpan="2" 
               VariableSizedWrapGrid.ColumnSpan="2"/>
</VariableSizedWrapGrid>

参照 :VariableSizedWrapGridReference: VariableSizedWrapGrid

ViewboxViewbox

コンテンツを指定されたサイズに拡大縮小するコンテナー コントロール。A container control that scales its content to a specified size.

Viewbox コントロール

<Viewbox MaxWidth="25" MaxHeight="25">
    <Image Source="Assets/Logo.png"/>
</Viewbox>
<Viewbox MaxWidth="75" MaxHeight="75">
    <Image Source="Assets/Logo.png"/>
</Viewbox>
<Viewbox MaxWidth="150" MaxHeight="150">
    <Image Source="Assets/Logo.png"/>
</Viewbox>

参照 :ViewboxReference: Viewbox

ズーム スクロール ビューアーZooming scroll viewer

「スクロール ビューアー」をご覧ください。See Scroll viewer.

メディア コントロールMedia controls

オーディオAudio

「メディア要素」をご覧ください。See Media element.

メディア要素Media element

オーディオとビデオのコンテンツを再生するコントロール。A control that plays audio and video content.

<MediaElement x:Name="myMediaElement"/>

参照 :MediaElementReference: MediaElement

デザインと使い方: メディア要素コントロールのガイドDesign and how-to: Media element control guide

MediaTransportControlsMediaTransportControls

MediaElement の再生コントロールを提供するコントロール。A control that provides playback controls for a MediaElement.

トランスポート コントロールを含むメディア要素

<MediaTransportControls MediaElement="myMediaElement"/>

参照 :MediaTransportControlsReference: MediaTransportControls

デザインと使い方: メディア要素コントロールのガイドDesign and how-to: Media element control guide

サンプル コード: メディア トランスポート コントロールのサンプルSample code: Media Transport Controls sample

VideoVideo

「メディア要素」をご覧ください。See Media element.

左側のナビゲーション ウィンドウ、上部のナビゲーション、およびタブのパターンを実装する、適応性のあるコンテナーと柔軟なナビゲーションのモデルです。An adaptable container and flexible navigation model that implements the left navigation pane, top navigation and tabs pattern.

参照 :NavigationViewReference: NavigationView

デザインと使い方: NavigationView コントロールのガイドDesign and how-to: NavigationView control guide

SplitViewSplitView

2 つのビューを持つコンテナー コントロール。1 つはメイン コンテンツ用で、もう 1 つは、通常、ナビゲーション メニューに使います。A container control with two views; one view for the main content and another view that is typically used for a navigation menu.

分割ビュー コントロール

<SplitView>
    <SplitView.Pane>
        <!-- Menu content -->
    </SplitView.Pane>
    <SplitView.Content>
        <!-- Main content -->
    </SplitView.Content>
</SplitView>

参照 :SplitViewReference: SplitView

デザインと使い方: 分割ビュー コントロールのガイドDesign and how-to: Split view control guide

Web ビューWeb view

Web コンテンツをホストするコンテナー コントロール。A container control that hosts web content.

<WebView x:Name="webView1" Source="https://developer.microsoft.com" 
         Height="400" Width="800"/>

参照 :WebViewReference: WebView

デザインと使い方: Web ビューのガイドラインDesign and how-to: Guidelines for Web views

サンプル コード: XAML WebView コントロールのサンプルSample code: XAML WebView control sample

セマンティック ズームSemantic zoom

ユーザーが、項目のコレクションの 2 つの異なる表示の間でズームを実行できるようにするコンテナー コントロール。A container control that lets the user zoom between two views of a collection of items.

<SemanticZoom>
    <ZoomedInView>
        <GridView></GridView>
    </ZoomedInView>
    <ZoomedOutView>
        <GridView></GridView>
    </ZoomedOutView>
</SemanticZoom>

参照 :SemanticZoomReference: SemanticZoom

デザインと使い方: セマンティック ズーム コントロールのガイドDesign and how-to: Semantic zoom control guide

サンプル コード: XAML GridView のグループ化と SemanticZoom のサンプルSample code: XAML GridView grouping and SemanticZoom sample

プログレス コントロールProgress controls

進行状況バーProgress bar

バーを表示して進行状況を示すコントロール。A control that indicates progress by displaying a bar.

進行状況バー コントロール

特定の値を表示する進行状況バー。A progress bar that shows a specific value.

<ProgressBar x:Name="progressBar1" Value="50" Width="100"/>

進行状況不定バー コントロール

進行状況が不定であることを表す進行状況バー。A progress bar that shows indeterminate progress.

<ProgressBar x:Name="indeterminateProgressBar1" IsIndeterminate="True" Width="100"/>

参照 :ProgressBarReference: ProgressBar

デザインと使い方: プログレス コントロールのガイドDesign and how-to: Progress controls guide

進行状況リングProgress ring

リングを表示して進行状況が不定であることを示すコントロール。A control that indicates indeterminate progress by displaying a ring.

進行状況リング コントロール

<ProgressRing x:Name="progressRing1" IsActive="True"/>

参照 :ProgressRingReference: ProgressRing

デザインと使い方: プログレス コントロールのガイドDesign and how-to: Progress controls guide

テキスト コントロールText controls

自動提案ボックスAuto suggest box

ユーザーが入力するときに、候補のテキストを表示するテキスト入力ボックスです。A text input box that provides suggested text as the user types.

検索の自動提案ボックス

参照 :AutoSuggestBoxReference: AutoSuggestBox

デザインと使い方: テキスト コントロール自動提案ボックス コントロールのガイドDesign and how-to: Text controls, Auto suggest box control guide

サンプル コード: AutoSuggestBox の移行のサンプルSample code: AutoSuggestBox migration sample

複数行テキスト ボックスMulti-line text box

「テキスト ボックス」をご覧ください。See Text box.

パスワード ボックスPassword box

パスワードを入力するためのコントロール。A control for entering passwords.

パスワード ボックス

<PasswordBox x:Name="passwordBox1" 
             PasswordChanged="PasswordBox_PasswordChanged" />

参照 :PasswordBoxReference: PasswordBox

デザインと使い方: テキスト コントロールパスワード ボックス コントロールのガイドDesign and how-to: Text controls, Password box control guide

サンプル コード: XAML テキスト表示のサンプルXAML テキスト編集のサンプルSample code: XAML text display sample, XAML text editing sample

リッチ エディット ボックスRich edit box

書式付きテキスト、ハイパーリンク、イメージなどを含んだリッチ テキスト ドキュメントを編集できるコントロール。A control that lets a user edit rich text documents with content like formatted text, hyperlinks, and images.

<RichEditBox />

参照 :RichEditBoxReference: RichEditBox

デザインと使い方: テキスト コントロールリッチ エディット ボックス コントロールのガイドDesign and how-to: Text controls, Rich edit box control guide

サンプル コード: XAML テキストのサンプルSample code: XAML text sample

「自動提案ボックス」をご覧ください。See Auto suggest box.

単一行テキスト ボックスSingle-line text box

「テキスト ボックス」をご覧ください。See Text box.

静的テキスト/段落Static text/paragraph

「テキスト ブロック」をご覧ください。See Text block.

テキスト ブロックText block

テキストを表示するコントロール。A control that displays text.

テキスト ブロック コントロール

<TextBlock x:Name="textBlock1" Text="I am a TextBlock"/>

参照 :TextBlockRichTextBlockReference: TextBlock, RichTextBlock

デザインと使い方: テキスト コントロールテキスト ブロック コントロールのガイドリッチ テキスト ブロック コントロールのガイドDesign and how-to: Text controls, Text block control guide, Rich text block control guide

サンプル コード: XAML テキストのサンプルSample code: XAML text sample

テキスト ボックスText box

1 行または複数行のプレーンテキスト フィールド。A single-line or multi-line plain text field.

テキスト ボックス コントロール

<TextBox x:Name="textBox1" Text="I am a TextBox" 
         TextChanged="TextBox_TextChanged"/>

参照 :TextBoxReference: TextBox

デザインと使い方: テキスト コントロールテキスト ボックス コントロールのガイドDesign and how-to: Text controls, Text box control guide

サンプル コード: XAML テキストのサンプルSample code: XAML text sample

選択コントロールSelection controls

チェック ボックスCheck box

ユーザーがオンまたはオフにできるコントロール。A control that a user can select or clear.

チェック ボックスの 3 状態

<CheckBox x:Name="checkbox1" Content="CheckBox" 
          Checked="CheckBox_Checked"/>

参照 :CheckBoxReference: CheckBox

デザインと使い方: チェック ボックス コントロールのガイドDesign and how-to: Check box control guide

コンボ ボックスCombo box

ユーザーが選択できる項目のドロップダウン リスト。A drop-down list of items a user can select from.

開かれた状態のコンボ ボックス

<ComboBox x:Name="comboBox1" Width="100"
          SelectionChanged="ComboBox_SelectionChanged">
    <x:String>Item 1</x:String>
    <x:String>Item 2</x:String>
    <x:String>Item 3</x:String>
</ComboBox>

参照 :ComboBoxReference: ComboBox

デザインと使い方: リストDesign and how-to: Lists

リスト ボックスList box

ユーザーが選択できる項目のインライン リストを表示するコントロール。A control that presents an inline list of items that the user can select from.

リスト ボックス コントロール

<ListBox x:Name="listBox1" Width="100"
         SelectionChanged="ListBox_SelectionChanged">
    <x:String>Item 1</x:String>
    <x:String>Item 2</x:String>
    <x:String>Item 3</x:String>
</ListBox>

参照 :ListBoxReference: ListBox

デザインと使い方: リストDesign and how-to: Lists

ラジオ ボタンRadio button

ユーザーがオプションのグループから 1 つのオプションを選択できるようにするコントロール。A control that allows a user to select a single option from a group of options. グループ化されたラジオ ボタンは、それぞれ相互に排他的です。When radio buttons are grouped together, they are mutually exclusive.

ラジオ ボタン コントロール

<RadioButton x:Name="radioButton1" Content="RadioButton 1" GroupName="Group1" 
             Checked="RadioButton_Checked"/>
<RadioButton x:Name="radioButton2" Content="RadioButton 2" GroupName="Group1" 
             Checked="RadioButton_Checked" IsChecked="True"/>
<RadioButton x:Name="radioButton3" Content="RadioButton 3" GroupName="Group1" 
             Checked="RadioButton_Checked"/>

参照 :RadioButtonReference: RadioButton

デザインと使い方: ラジオ ボタン コントロールのガイドDesign and how-to: Radio button control guide

スライダーSlider

ユーザーがトラックに沿って Thumb コントロールを動かすことで値の範囲から選択できるようにするコントロール。A control that lets the user select from a range of values by moving a Thumb control along a track.

スライダー コントロール

<Slider x:Name="slider1" Width="100" ValueChanged="Slider_ValueChanged" />

参照 :スライダーReference: Slider

デザインと使い方: スライダー コントロールのガイドDesign and how-to: Slider control guide

トグル ボタンToggle button

2 つの状態を切り替えることができるボタン。A button that can be toggled between 2 states.

<ToggleButton x:Name="toggleButton1" Content="Button" 
              Checked="ToggleButton_Checked"/>

参照 :ToggleButtonReference: ToggleButton

デザインと使い方: トグル コントロールのガイドDesign and how-to: Toggle control guide

トグル スイッチToggle switch

2 つの状態を切り替えることができるスイッチ。A switch that can be toggled between 2 states.

トグル スイッチ コントロール

<ToggleSwitch x:Name="toggleSwitch1" Header="ToggleSwitch" 
              OnContent="On" OffContent="Off" 
              Toggled="ToggleSwitch_Toggled"/>

参照 :ToggleSwitchReference: ToggleSwitch

デザインと使い方: トグル コントロールのガイドDesign and how-to: Toggle control guide