機能別コントロール

Windows の XAML UI フレームワークには、UI 開発をサポートする多くのコントロールのライブラリが用意されています。 これらのコントロールの一部は視覚的に表示されますが、それ以外のコントロールは他のコントロールまたはコンテンツ (画像やメディアなど) のコンテナーとして機能します。

XAML UI の基本のサンプルをダウンロードすると、Windows UI コントロールの多くを実際に見ることができます。

アプリで使うことができる一般的な XAML コントロールの機能別の一覧を以下に示します。

アプリ バーとコマンド

アプリ バー

アプリ特有のコマンドを表示するツール バー。 「コマンド バー」をご覧ください。

リファレンス: AppBar

アプリ バーのボタン

アプリ バー スタイルを使ってコマンドを表示するボタン。

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

リファレンス: AppBarButtonSymbolIconBitmapIconFontIconPathIcon

デザインと使い方: アプリ バーとコマンド バーのコントロールのガイド

サンプル コード: XAML コマンド実行のサンプル

アプリ バーの区分線

コマンド バーのコマンドのグループを視覚的に区切ります。

リファレンス: AppBarSeparator

サンプル コード: XAML コマンド実行のサンプル

アプリ バーのトグル ボタン

コマンド バーでコマンドを切り替えるボタン。

リファレンス: AppBarToggleButton

サンプル コード: XAML コマンド実行のサンプル

コマンド バー

アプリ バーのボタン要素のサイズ変更を処理する専用のアプリ バー。

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

<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>

リファレンス: CommandBar

デザインと使い方: アプリ バーとコマンド バーのコントロールのガイド

サンプル コード: XAML コマンド実行のサンプル

ボタン

ボタン

ユーザーの入力に応答して Click イベントを発生させるコントロール。

標準的なボタン

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

リファレンス: Button

デザインと使い方: ボタン コントロールのガイド

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

ブラウザーでマークアップ テキストとして表示され、指定された URI を開くボタンです。

ハイパーリンク ボタン

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

リファレンス: HyperlinkButton

デザインと使い方: ハイパーリンク コントロールのガイド

繰り返しボタン

押されたときから離されるまでの間、繰り返し Click イベントを発生させるボタン。

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

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

リファレンス: RepeatButton

デザインと使い方: ボタン コントロールのガイド

コレクション コントロールとデータ コントロール

FlipView

ユーザーが 1 つずつめくって表示することができる項目のコレクションを表示するコントロール。

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

リファレンス: FlipView

デザインと使い方: FlipView コントロールのガイド

グリッド ビュー

縦方向にスクロールできる複数行と複数列で項目のコレクションを表示するコントロール。

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

リファレンス: GridView

デザインと使い方: リスト

サンプル コード: ListView のサンプル

項目コントロール

データ テンプレートで指定された UI にある項目のコレクションを表示するコントロール。

<ItemsControl/>

リファレンス: ItemsControl

リスト ビュー

縦方向にスクロールできるリストで項目のコレクションを表示するコントロール。

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

リファレンス: ListView

デザインと使い方: リスト

サンプル コード: ListView のサンプル

日付と時刻コントロール

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

ドロップダウン カレンダー表示を使って、ユーザーが日付を選択できるコントロール。

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

<CalendarDatePicker/>

リファレンス: CalendarDatePicker

デザインと使い方: カレンダー、日付、時刻コントロール

カレンダー ビュー

ユーザーが 1 つまたは複数の日付を選択できる、構成可能なカレンダー表示。

<CalendarView/>

リファレンス: CalendarView

デザインと使い方: カレンダー、日付、時刻コントロール

日付の選択コントロール

ユーザーが日付を選択できるコントロール。

日付の選択コントロール

<DatePicker Header="Arrival Date"/>

リファレンス: DatePicker

デザインと使い方: カレンダー、日付、時刻コントロール

時刻の選択コントロール

ユーザーが時間値を設定できるコントロール。

TimePicker コントロール

<TimePicker Header="Arrival Time"/>

リファレンス: TimePicker

デザインと使い方: カレンダー、日付、時刻コントロール

ポップアップ

ショートカット メニュー

「メニュー ポップアップ」および「ポップアップ メニュー」をご覧ください。

ポップアップ

ユーザーの操作が必要であることを示すメッセージを表示します (ダイアログでは他のユーザー操作がブロックされますが、ポップアップでは別のウィンドウが作成されず、操作もブロックされません)。

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

<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>

リファレンス: Flyout

デザインと使い方: ショートカット メニューとダイアログ

ユーザーが現在行っている内容に関連するコマンドまたはオプションの一覧を一時的に表示します。

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

<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>

リファレンス: MenuFlyoutMenuFlyoutItemMenuFlyoutSeparatorToggleMenuFlyoutItem

デザインと使い方: ショートカット メニューとダイアログ

サンプル コード: XAML ショートカット メニューのサンプル

指定したコマンドを表示するためのカスタム メニュー。

リファレンス: PopupMenu

デザインと使い方: ショートカット メニューとダイアログ

ヒント

要素についての情報を表示するポップアップ ウィンドウ。

ヒント コントロール

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

リファレンス: ToolTipToolTipService

デザインと使い方: ヒントのガイドライン

画像

画像

画像を表示するコントロール。

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

リファレンス: Image

デザインと使い方: Image と ImageBrush

サンプル コード: XAML 画像のサンプル

グラフィックスとインク

InkCanvas

インク ストロークを受信し、表示するコントロール。

<InkCanvas/>

リファレンス: InkCanvas

図形

楕円形、四角形、直線、ベジエ パスなどのように表示できる、保持モードの各種グラフィック オブジェクト。

多角形 パス

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

リファレンス: Shapes

操作方法: 図形の描画

サンプル コード: XAML ベクターベース描画のサンプル

レイアウト コントロール

境界線

境界線、背景、またはこの両方を他のオブジェクトの周囲に描画するコンテナー コントロール。

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>

リファレンス: Border

キャンバス

キャンバスの左上隅を基準とする子要素の絶対配置をサポートするレイアウト パネル。

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

<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>

リファレンス: Canvas

グリッド

複数行と複数列での子要素の配置をサポートするレイアウト パネル。

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

<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>

リファレンス: Grid

パン スクロール ビューアー

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

RelativePanel

互いまたは親パネルを基準にして、子オブジェクトの位置を決定し、調整できるパネル。

RelativePanel レイアウト パネル

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

リファレンス: RelativePanel

スクロール バー

「スクロール ビューアー」をご覧ください (ScrollBar は ScrollViewer の要素です。 通常、スタンドアロン コントロールとしては使用しません)。

リファレンス: ScrollBar

スクロール ビューアー

ユーザーが、コンテンツのパンとズームを実行できるようにするコンテナー コントロール。

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

リファレンス: ScrollViewer

デザインと使い方: スクロールとパンのコントロールのガイド

サンプル コード: XAML のスクロール、パン、ズームのサンプル

スタック パネル

子要素を水平方向または垂直方向の単一行に配置するレイアウト パネル。

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

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

リファレンス: StackPanel

VariableSizedWrapGrid

複数行と複数列での子要素の配置をサポートするレイアウト パネル。 各子要素を、複数の行と列に配置できます。

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

<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>

リファレンス: VariableSizedWrapGrid

Viewbox

コンテンツを指定されたサイズに拡大縮小するコンテナー コントロール。

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>

リファレンス: Viewbox

ズーム スクロール ビューアー

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

メディア コントロール

オーディオ

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

メディア要素

オーディオとビデオのコンテンツを再生するコントロール。

<MediaElement x:Name="myMediaElement"/>

リファレンス: MediaElement

デザインと使い方: メディア要素コントロールのガイド

MediaTransportControls

MediaElement の再生コントロールを提供するコントロール。

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

<MediaTransportControls MediaElement="myMediaElement"/>

リファレンス: MediaTransportControls

デザインと使い方: メディア要素コントロールのガイド

サンプル コード: メディア トランスポート コントロールのサンプル

ビデオ

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

ハブ

ユーザーが、コンテンツの異なるセクションの表示とナビゲートを実行できるようにするコンテナー コントロール。

<Hub>
    <HubSection>
        <!--- hub section content -->
    </HubSection>
    <HubSection>
        <!--- hub section content -->
    </HubSection>
</Hub>

リファレンス: Hub

デザインと使い方: ハブ コントロールのガイド

サンプル コード: XAML ハブ コントロールのサンプル

ピボット

通常は同じデータ セット内の異なるピボット (ビューまたはフィルター) 間で、迅速な移動手段を提供する全画面表示のコンテナーおよびナビゲーション モデルです。

Pivot コントロールに、"タブ" レイアウトを含むスタイルを適用できます。

リファレンス: Pivot

デザインと使い方: タブとピボットのコントロールのガイド

サンプル コード: Pivot のサンプル

セマンティック ズーム

ユーザーが、項目のコレクションの 2 つの異なる表示の間でズームを実行できるようにするコンテナー コントロール。

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

リファレンス: SemanticZoom

デザインと使い方: セマンティック ズーム コントロールのガイド

サンプル コード: XAML GridView のグループ化と SemanticZoom のサンプル

SplitView

2 つのビューを持つコンテナー コントロール。1 つはメイン コンテンツ用で、もう 1 つは、通常、ナビゲーション メニューに使います。

分割ビュー コントロール

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

リファレンス: SplitView

デザインと使い方: 分割ビュー コントロールのガイド

Web ビュー

Web コンテンツをホストするコンテナー コントロール。

<WebView x:Name="webView1" Source="http://dev.windows.com" 
         Height="400" Width="800"/>

リファレンス: WebView

デザインと使い方: Web ビューのガイドライン

サンプル コード: XAML WebView コントロールのサンプル

プログレス コントロール

進行状況バー

バーを表示して進行状況を示すコントロール。

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

特定の値を表示する進行状況バー。

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

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

進行状況が不定であることを表す進行状況バー。

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

リファレンス: ProgressBar

デザインと使い方: プログレス コントロールのガイド

進行状況リング

リングを表示して進行状況が不定であることを示すコントロール。

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

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

リファレンス: ProgressRing

デザインと使い方: プログレス コントロールのガイド

テキスト コントロール

自動提案ボックス

ユーザーが入力するときに、候補のテキストを表示するテキスト入力ボックスです。

検索の自動提案ボックス

リファレンス: AutoSuggestBox

デザインと使い方: テキスト コントロール自動提案ボックス コントロールのガイド

サンプル コード: AutoSuggestBox の移行のサンプル

複数行テキスト ボックス

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

パスワード ボックス

パスワードを入力するためのコントロール。

パスワード ボックス

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

リファレンス: PasswordBox

デザインと使い方: テキスト コントロールパスワード ボックス コントロールのガイド

サンプル コード: XAML テキスト表示のサンプルXAML テキスト編集のサンプル

リッチ エディット ボックス

書式付きテキスト、ハイパーリンク、イメージなどを含んだリッチ テキスト ドキュメントを編集できるコントロール。

<RichEditBox />

リファレンス: RichEditBox

デザインと使い方: テキスト コントロールリッチ エディット ボックス コントロールのガイド

サンプル コード: XAML テキストのサンプル

「自動提案ボックス」をご覧ください。

単一行テキスト ボックス

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

静的テキスト/段落

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

テキスト ブロック

テキストを表示するコントロール。

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

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

リファレンス: TextBlockRichTextBlock

デザインと使い方: テキスト コントロールテキスト ブロック コントロールのガイドリッチ テキスト ブロック コントロールのガイド

サンプル コード: XAML テキストのサンプル

テキスト ボックス

1 行または複数行のプレーンテキスト フィールド。

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

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

リファレンス: TextBox

デザインと使い方: テキスト コントロールテキスト ボックス コントロールのガイド

サンプル コード: XAML テキストのサンプル

選択コントロール

チェック ボックス

ユーザーがオンまたはオフにできるコントロール。

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

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

リファレンス: CheckBox

デザインと使い方: チェック ボックス コントロールのガイド

コンボ ボックス

ユーザーが選択できる項目のドロップダウン リスト。

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

<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>

リファレンス: ComboBox

デザインと使い方: リスト

リスト ボックス

ユーザーが選択できる項目のインライン リストを表示するコントロール。

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

<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>

リファレンス: ListBox

デザインと使い方: リスト

ラジオ ボタン

ユーザーがオプションのグループから 1 つのオプションを選択できるようにするコントロール。 グループ化されたラジオ ボタンは、それぞれ相互に排他的です。

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

<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"/>

リファレンス: RadioButton

デザインと使い方: ラジオ ボタン コントロールのガイド

スライダー

ユーザーがトラックに沿って Thumb コントロールを動かすことで値の範囲から選択できるようにするコントロール。

スライダー コントロール

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

リファレンス: Slider

デザインと使い方: スライダー コントロールのガイド

トグル ボタン

2 つの状態を切り替えることができるボタン。

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

リファレンス: ToggleButton

デザインと使い方: トグル コントロールのガイド

トグル スイッチ

2 つの状態を切り替えることができるスイッチ。

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

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

リファレンス: ToggleSwitch

デザインと使い方: トグル コントロールのガイド