コントロール (XAML と C#、C++ または VB)

[アーティクル]
05/18/2015

Windows 8.1 の新しい XAML コントロールを使って、日付と時刻の選択やナビゲーションサポートの強化などの新しい機能を Windows ストアアプリに追加します。既存のコントロールも使いやすく更新され、より用途が広がりました。これらの新しいコントロールや更新のおかげで、すべての機能を備えたアプリをこれまでになく簡単に作成できます。

Windows 8.1 には、次の新しいコントロールと機能が導入されています。

AppBar コントロール
CommandBar
DatePicker
Flyout
Hub
Hyperlink
MenuFlyout
SettingsFlyout
TimePicker

Windows 8.1 では、次の既存のコントロールが更新されています。

FlipView の更新
ComboBox、DatePicker、TimePicker、Slider、Edit の各コントロールのヘッダー
プレースホルダーテキスト
他のコントロールの更新

AppBar コントロール

[XAML AppBar コントロールのサンプルを今すぐ入手する]

Windows 8.1 には、適切な設計ガイドラインと動作を反映するアプリバーコマンドボタンを簡単に作成できる XAML の新しいコントロール (AppBarButton、AppBarToggleButton、AppBarSeparator の各コントロール) が導入されました。

XAML のアプリバーのボタン

アプリバーのボタンは、次のようないくつかの点で標準のボタンと異なります。

既定の外観は、四角形ではなく円形です。
Content プロパティではなく Label プロパティと Icon プロパティを使ってコンテンツを設定します。Content プロパティが無視されます。
ボタンの IsCompact プロパティは、そのサイズを制御します。

上に示したのと同じコマンドのコンパクトな状態を次に示します。

コンパクトなアプリバーのボタン

新しい CommandBar コントロール内でアプリバーコントロールを使うと、CommandBar によって IsCompact プロパティが自動的に設定されます。AppBar やアプリキャンバスなど、CommandBar 以外の場所でアプリバーのボタンを使う場合は、コードで IsCompact プロパティを適切に設定する必要があります。

アプリバーのボタンは、アプリバー以外の場所で使うことができます。最も一般的な例は、ページヘッダーの "戻る" ボタンとしてアプリバーボタンを使う用途です。ボタンをアプリバー以外の場所で使う場合はボタンを常にコンパクトな状態にする必要があることが Windows ガイドラインにより示されています。

アプリバーのボタンのコンテンツを定義するには、Label プロパティと Icon プロパティを使います。Label プロパティを文字列に設定して、テキストラベルを指定します。ラベルは既定では表示されますが、ボタンがコンパクトな状態になると非表示になるため、わかりやすいアイコンを指定する必要もあります。そのためには、ボタンの Icon プロパティを、新しい IconElement クラスから派生した要素に設定します。次の 4 種類のアイコンの要素が用意されています。

FontIcon - アイコンは、指定されたフォントファミリのグリフに基づきます。
BitmapIcon - アイコンは、指定された Uri のビットマップ画像ファイルに基づきます。
PathIcon - アイコンは、Path データに基づきます。
SymbolIcon - アイコンは、Segoe UI Symbol フォントのグリフの定義済みの一覧に基づきます。

アプリバーのボタンの作成

次の例は、各種類のアイコンを持つ AppBarButton コントロール、AppBarSeparator コントロール、AppBarToggleButton コントロールを作成する方法を示しています。

<!-- App bar button with symbol icon. -->
<AppBarButton Icon="Like" Label="SymbolIcon" Click="AppBarButton_Click"/>         

<!-- App bar button with bitmap icon. -->
<AppBarButton Label="BitmapIcon" Click="AppBarButton_Click">
    <AppBarButton.Icon>
        <BitmapIcon UriSource="ms-appx:///Assets/globe.png"/>
    </AppBarButton.Icon>
</AppBarButton>

<AppBarSeparator />

<!-- App bar toggle button with font icon. -->
<AppBarToggleButton Label="FontIcon" Click="AppBarButton_Click">
    <AppBarToggleButton.Icon>
        <FontIcon FontFamily="Candara" Glyph="&#x03A3;"/>
    </AppBarToggleButton.Icon>
</AppBarToggleButton>

<!-- App bar toggle button with path icon. -->
<AppBarToggleButton Label="PathIcon" Click="AppBarButton_Click">
    <AppBarToggleButton.Icon>
        <PathIcon Data="F1 M 20,20L 24,10L 24,24L 5,24"/>
    </AppBarToggleButton.Icon>
</AppBarToggleButton>

このコード例では、次のコントロールが作成されます。

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

CommandBar

[XAML AppBar コントロールのサンプルを今すぐ入手する]

Windows 8.1 には、適切に設計されたアプリバーを簡単に作成できる XAML の新しいコントロール (CommandBar) が導入されています。

コマンドバー

CommandBar には、次の機能が備わっているため基本的なアプリバーを簡単に作成できます。

右側のプライマリコマンドと左側のセカンダリコマンドを使ったコマンドの自動レイアウト
アプリのサイズが変化したときのアプリバーコマンドの自動サイズ変更

AppBarButton コントロール、AppBarToggleButton コントロール、AppBarSeparator コントロールだけが含まれるアプリバーが必要な場合は、この新しい CommandBar を使ってください。より複雑なコンテンツ (画像、進行状況バー、テキストブロックなど) が必要な場合は、AppBar コントロールを使います。

既定では、CommandBar に追加した項目は PrimaryCommands コレクションに追加されます。これらのコマンドは、CommandBar の右側に表示されます。SecondaryCommands コレクションにコマンドを追加することもできます。これらの項目は、左側に表示されます。

アプリバーのボタンコントロールには、標準とコンパクトの 2 つのサイズがあります。既定では、テキストラベルが表示され、余白が大きく表示されます。IsCompact プロパティが true に設定されると、テキストラベルは表示されず、ボタンの周囲の余白が小さくなります。AppBarSeparator にも、余白が小さいコンパクトな状態があります。これらのコントロールを新しい CommandBar コントロールで使うと、フルサイズの表示に十分な領域がない場合に IsCompact プロパティが自動的に設定されます。

上に示したのと同じプライマリコマンドのコンパクトな状態を次に示します。

コンパクトボタンが表示されたコマンドバー

CommandBar の作成

次の例では、前に示したコマンドバーが作成されます。

<Page.BottomAppBar>
    <CommandBar>
        <AppBarToggleButton Icon="Shuffle" Label="Shuffle" Click="AppBarButton_Click"/>
        <AppBarToggleButton Icon="RepeatAll" Label="Repeat" Click="AppBarButton_Click"/>
        <AppBarSeparator/>
        <AppBarButton Icon="Back" Label="Back" Click="AppBarButton_Click"/>
        <AppBarButton Icon="Stop" Label="Stop" Click="AppBarButton_Click"/>
        <AppBarButton Icon="Play" Label="Play" Click="AppBarButton_Click"/>
        <AppBarButton Icon="Forward" Label="Forward" Click="AppBarButton_Click"/>

        <CommandBar.SecondaryCommands>
            <AppBarButton Icon="Like" Label="Like" Click="AppBarButton_Click"/>
            <AppBarButton Icon="Dislike" Label="Dislike" Click="AppBarButton_Click"/>
        </CommandBar.SecondaryCommands>
    </CommandBar>
</Page.BottomAppBar>

DatePicker

[XAML DatePicker コントロールと TimePicker コントロールのサンプルを今すぐ入手する]

Windows 8.1 には、ユーザーがアプリでローカライズされた日付を設定できる XAML の新しいコントロール (DatePicker コントロール) が導入されました。

DatePicker

DatePicker は、ユーザーがタッチ、マウス、またはキーボードの入力方式を使ってローカライズされた日付を選択できる標準化された方法です。DatePicker コントロールは、最小限の XAML または他のコードを含む既定の形式で使うか、さまざまな方法でカスタマイズできます。

DatePicker では、Windows でサポートされる各カレンダーシステムがサポートされます。それらの 9 種類のカレンダーは Windows.Globalization.CalendarIdentifiers クラスで指定されます。 DatePicker は、アプリの既定の言語に適したカレンダーを使います。または、CalendarIdentifier プロパティを設定して特定のカレンダーシステムを使うこともできます。

DatePicker の作成

次の例は、ヘッダーを含むシンプルな DatePicker を作成する方法を示しています。

<DatePicker x:Name=arrivalDatePicker Header="Arrival Date"/>

この DatePicker は、日付セレクターを開くと次のように表示されます。

日付セレクターが開いた DatePicker

コードで日付を設定したり、DateTimeOffset のインスタンスにコードをバインドしたりできます。ここでは、DatePicker の既定値がコードで現在の日付から 2 か月後に設定され、最小の年が現在の年に設定されています。

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    // Set the default date to 2 months from the current date.
    arrivalDatePicker.Date = DateTimeOffset.Now.AddMonths(2);

    // Set the minimum year to the current year.
    arrivalDatePicker.MinYear = DateTimeOffset.Now;
}

標準の形式テンプレートを使って各 ComboBox でテキストの形式を設定することができます。次の例は、日付フィールドの形式を設定し、日付と曜日の省略形の形式を設定する方法を示しています。YearVisible プロパティを False に設定すると、年フィールドが非表示になります。

<DatePicker DayFormat="{}{day.integer} ({dayofweek.abbreviated})" YearVisible="False"/>

この例では、次の DatePicker が作成されます。

年が非表示になった DatePicker

DatePicker では、Orientation プロパティを設定することで縦長レイアウトにすることもできます。このコントロールは詳細にカスタマイズできます。Styles と Templates を使って、DatePicker が提供するコンテンツの多くをカスタマイズできます。

[XAML Flyout と MenuFlyout のサンプルを今すぐ入手する]

Windows 8.1 には、ユーザーの現在の作業内容に関連する UI を一時的に表示することができる XAML の新しいコントロール (Flyout コントロール) が導入されました。

ポップアップのあるボタン

Flyout は情報やユーザー操作を要求するためのUI (ポップアップと呼ばれます) の表示に使われます。ダイアログとは異なり、ポップアップはクリックするかその外側をタップすることで簡単に閉じることができます。ユーザーからの入力の収集、項目の詳細の表示、またはユーザーに操作の確認を求める場合に使います。ポップアップは、タップまたはクリックに対する応答としてのみ表示され、ユーザーがその外側をタップすると閉じます。

ポップアップをボタンにアタッチすることがよくあるため、Flyout コントロールを簡単にアタッチして開くことができるように、Button コントロールには新しい Flyout プロパティがあります。ボタンにアタッチされたポップアップは、ボタンがクリックされると自動的に開きます。

さらに、FlyoutBase.AttachedFlyout 添付プロパティを使うことで、Flyout コントロールを任意の FrameworkElement オブジェクトにアタッチすることもできます。この場合、FrameworkElement での操作 (Tapped など) に反応し、コードで Flyout を開く必要があります。

ポップアップの作成

この例では、前の図に示した Flyout を含む Button コントロールを作成しています。

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

次の例は、TextBlock にアタッチされた Flyout を示しています。既に説明したように、FlyoutBase.AttachedFlyout 添付プロパティを使うことで、Flyout を任意の FrameworkElement にアタッチすることもできます。

<TextBlock Text="{Binding ElementName=MyTextBox, Path=Text}"
           Tapped="TextBlock_Tapped" FontSize="18">
    <FlyoutBase.AttachedFlyout>
        <Flyout>
            <TextBox x:Name="MyTextBox" Text="You can edit this text by tapping it."/>
        </Flyout>
    </FlyoutBase.AttachedFlyout>
</TextBlock>

この Flyout を開くには、Tapped イベントを処理して FlyoutBase.ShowAttachedFlyout メソッドを呼び出します。

private void TextBlock_Tapped(object sender, TappedRoutedEventArgs e)
{
    FrameworkElement element = sender as FrameworkElement;
    if (element != null)
    {
        FlyoutBase.ShowAttachedFlyout(element);
    }
}

テキストブロックは次のようになります。

ポップアップが閉じたテキスト

テキストブロックがタップされると、TextBox コントロールを含むポップアップが開き、テキストを変更できるようになります。

ポップアップが開いたテキスト

Flyout をリソースとして作成し、複数のコントロールで使うことができます。ここでは、Flyout はリソースとして定義され、2 つのコントロール間で共有されています。

<Page.Resources>
    <Flyout x:Key="SharedFlyout">
        <StackPanel>
            <TextBlock Text="This Flyout is shared."/>                      
        </StackPanel>
    </Flyout>
</Page.Resources>

...

<Button Content="Button" Flyout="{StaticResource SharedFlyout}"/>
<TextBlock Text="TextBlock" FlyoutBase.AttachedFlyout="{StaticResource SharedFlyout}" Tapped="TextBlock_Tapped"/>

Flyout について詳しくは、「クイックスタート: ポップアップの追加」をご覧ください。

Hub

[XAML Hub コントロールのサンプルを今すぐ入手する]

Windows 8.1 には、適切な設計ガイドラインと動作を反映するハブ設計パターンを簡単に作成できる XAML の新しいコントロール (Hub コントロール) が導入されました。

ハブページ

ハブページは、アプリへの入り口です。細かくパンできるビューにコンテンツが表示されるため、新しい情報や興味深い項目がひとめでわかり、アプリのコンテンツを詳しく調べることができます。ハブはさまざまなコンテンツのカテゴリで構成され、それぞれがアプリのセクションページにマップします。各セクションは、コンテンツや機能でいっぱいにしてください。ハブで多様なビジュアルを提供し、ユーザーの興味を引きつけて、アプリのさまざまな部分に引き込みます。

XAML の Hub コントロールには、アプリのハブ設計パターンを簡単に実装できる要素が用意されています。単一のソースからデータを表示する GridView コントロールや ListView コントロールとは異なり、各ハブセクションには異なるソースからのデータを表示できます。どの XAML コンテンツを使っても、視覚に訴えるハブページを作ることができます。Hub ページを使ったアプリを直ちに作成する場合は、Microsoft Visual Studio 2013 のハブアプリ テンプレートを使います。

Hub にヘッダーを追加し、ユーザーにハブのコンテキストを知らせます。これは、多くの場合アプリの名前です。簡単なテキスト Header を使ったり、XAML コンテンツが使用される HeaderTemplate を定義することができます。ヘッダーには任意のコンテンツを使うことができますが、ヘッダーの高さは、ハブセクションコンテンツに使用可能な縦方向の領域の量に影響を与えることを忘れないでください。ヘッダーの位置は固定されるため、ハブセクションと同時にスクロールされません。

ハブセクション

各種 HubSection コントロールには、ハブのコンテンツを配置します。ハブのように、各 HubSection には Header プロパティと HeaderTemplate プロパティがあり、これらを使ってセクションの省略可能なヘッダーを設定できます。さらに、セクションヘッダーを対話型にすることもできます。通常、ユーザーは対話型ヘッダーをタップして、対応するアプリセクションページに移動できます。IsHeaderInteractive プロパティが true の場合、既定のヘッダーには山形のグリフと、"Hover" および "Pressed" の各視覚状態が含まれます。カスタム HeaderTemplate を使う場合、ヘッダーが対話型であることを示す同様の視覚的な合図を提供してください。

ハブセクションにはコンテンツを直接追加しません。代わりに、DataTemplate オブジェクトで HubSection のコンテンツを定義します。コンテンツはインラインで定義するか、データソースにバインドできます。有効な XAML であればどれでもハブセクションで使うことができます。

ハブの作成

次の例は、Hub コントロールの作成に使われる基本的な XAML を示しています。

<Hub Header="News">
    <HubSection MinWidth="600" Header="Latest">
        <DataTemplate>
            <Grid>   
                <TextBlock Text="The most recent news will be here." 
                           Style="{ThemeResource BodyTextBlockStyle}" />
            </Grid>
        </DataTemplate>
    </HubSection>

    <HubSection Header="Tech" IsHeaderInteractive="True"  
                Background="#222222" MinWidth="250">
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="Tech news goes here."
                           Style="{ThemeResource BodyTextBlockStyle}" />
                <TextBlock Text="Click the header to go to the Tech page."
                           Style="{ThemeResource BodyTextBlockStyle}" />
            </StackPanel>
        </DataTemplate>
    </HubSection>

    <HubSection Header="Sports" IsHeaderInteractive="True" 
                Background="#444444" MinWidth="250">
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="Sports news goes here."
                           Style="{ThemeResource BodyTextBlockStyle}" />
                <TextBlock Text="Click the header to go to the Sports page." 
                           Style="{ThemeResource BodyTextBlockStyle}" />
            </StackPanel>
        </DataTemplate>
    </HubSection>
</Hub>

この例では、次の Hub が作成されます。

シンプルなハブコントロール

Hyperlink

Windows 8.1 では、Windows.UI.Xaml.Documents 名前空間の XAML テキストオブジェクトモデルに Hyperlink 要素が追加されます。

Hyperlink 要素を使うと、一連のテキストにハイパーリンクを追加することができます。ハイパーリンクは、残りのテキストと同じように扱われ、改行に関与します。ハイパーリンクとしてマークされると、そのテキストは特定の色で表示され、タップされると NavigateUri プロパティで指定された Uniform Resource Identifier (URI) に移動します。

Hyperlink 要素が埋め込まれたテキストのブロックを次に示します。

ハイパーリンクのあるテキスト

ハイパーリンク要素の使用

次の例では、上に示したテキストが作成されます。Hyperlink は、他のテキストと同じ流れで表示され、ユーザーがタップすると Windows デベロッパーセンターが開きます。

<RichTextBlock Width="200" Style="{StaticResource BasicRichTextStyle}">
    <Paragraph>Hyperlinks let you give readers a visual hint that certain text links to other content.
        <Hyperlink NavigateUri="https://dev.windows.com">Read more on the Windows Dev Center</Hyperlink>
        ... Text in a Hyperlink element is treated like the rest of the text and participates in line breaking.
    </Paragraph>
</RichTextBlock>

MenuFlyout

[XAML Flyout と MenuFlyout のサンプルを今すぐ入手する]

Windows 8.1 には、ユーザーの現在の作業内容に関連するコマンドやオプションのリストを一時的に表示できる XAML の新しいコントロール (MenuFlyout コントロール) が導入されました。

メニューポップアップが表示されたボタン

MenuFlyout は、外側をクリックするかタップするだけで閉じることができる軽量の UI (メニューポップアップと呼ばれます) を表示します。ユーザーが簡単なコマンドやオプションのコンテキスト依存リストから選択できるようにする場合に使います。メニューポップアップは、タップまたはクリックに対する応答としてのみ表示され、ユーザーがその外側をタップすると閉じます。

メニューのコンテンツは、MenuFlyoutItem オブジェクト、ToggleMenuFlyoutItem オブジェクト、MenuFlyoutSeparator オブジェクトを MenuFlyout に追加することで定義します。これらのオブジェクトの用途を次に説明します。

MenuFlyoutItem - 即座にアクションを実行します。
ToggleMenuFlyoutItem - オプションのオンとオフを切り替えます。
MenuFlyoutSeparator - メニュー項目を視覚的に分割します。

メニューポップアップをボタンにアタッチすることがよくあるため、MenuFlyout を簡単にアタッチして開くことができるように、Button コントロールには新しい Flyout プロパティがあります。ボタンにアタッチされたメニューポップアップは、ボタンがクリックされると自動的に開きます。

さらに、FlyoutBase.AttachedFlyout 添付プロパティを使うことで、MenuFlyout コントロールを任意の FrameworkElement オブジェクトにアタッチすることもできます。この場合、FrameworkElement での操作 (Tapped など) に反応し、コードで MenuFlyout を開く必要があります。

MenuFlyout の作成

この例では、前の図に示した MenuFlyout を含む Button コントロールを作成しています。

<Button Content="Options">
    <Button.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>
    </Button.Flyout>
</Button>

SettingsFlyout

[アプリ設定のサンプルを今すぐ入手する]

Windows 8.1 には、適切な設計ガイドラインと動作を反映するアプリ設定ポップアップを簡単に作成できる XAML の新しいコントロール (SettingsFlyout コントロール) が導入されました。

SettingsFlyout

Page コントロールと同様、SettingsFlyout コントロールは XAML でドキュメントのルート要素として宣言できます。このとき、x:Class 属性を SettingsFlyout のサブクラスに指定します。設定ポップアップの幅を設定することはできますが、高さは常に画面全体の高さになります。

SettingsFlyout には、ヘッダーセクションとコンテンツセクションがあります。ヘッダーには、戻るボタン、タイトル、省略可能なアイコンがあります。アプリの色に合わせるには、HeaderBackground と HeaderForeground を設定してください。既定では、アイコンにはアプリの小さいアイコンが表示されます。IconSource プロパティを設定して、別のアイコンを指定できます。戻るボタンは常に表示されます。

SettingsFlyout の表示と非表示

ユーザーは、設定チャームを使って設定ポップアップにアクセスできます。Show メソッドや ShowIndependent メソッドを呼び出して SettingsFlyout コントロールをプログラムにより表示したり、Hide メソッドを呼び出して非表示にすることができます。

既定では、戻るボタンを使うと設定ポップアップが閉じます。Show を呼び出すことで SettingsFlyout コントロールが表示された場合、戻るボタンをクリックするとポップアップが閉じ、設定ウィンドウが再び開きます。 ShowIndependent を呼び出すことで SettingsFlyout が表示された場合、戻るボタンをクリックするとポップアップが閉じ、ユーザーはアプリに戻されます。たとえば、アプリの設定ボタンから SettingsFlyout コントロールを開いた場合、通常は ShowIndependent を呼び出すため、ポップアップが閉じられるとユーザーは直接アプリに戻されます。

SettingsFlyout コントロールは、一度に 1 つだけ表示できます。SettingsFlyout で Show を呼び出すと、現在表示されている他の SettingsFlyout がすべて閉じます。

BackClick イベントを処理すると、戻るボタンの既定の動作を上書きできます。このイベントは、ユーザーが戻るボタンをクリックするたびに発生します。既定の動作を上書きするには、イベントのイベントハンドラーを作成し、BackClickEventArgs.Handled プロパティを true に設定します。

SettingsPane への接続

SettingsFlyout コントロールは、アプリの SettingsPane オブジェクトに手動で関連付ける必要があります。これは、SettingsPane.CommandsRequested イベントを処理し、SettingsCommand を ApplicationCommands コレクションに追加して行います。SettingsCommand には、設定チャームに表示される SettingsFlyout のラベルがあり、ユーザーが設定チャームのコマンドを選択したときに実行されるメソッドが指定されます。このメソッドでは、SettingsFlyout コントロールのインスタンスを作って表示します。

SettingsFlyout の作成

Bg182878.wedge(ja-jp,WIN.10).gif Visual Studio で SettingsFlyout を追加するには

[プロジェクト] の [新しい項目の追加] をクリックします。
[新しい項目の追加] ダイアログボックスで、中央のウィンドウから [設定ポップアップ] を選びます。
設定ポップアップファイルの名前を入力し、[追加] をクリックします。この例では、設定ポップアップの名前は UpdateSettingsFlyout です。

注設定ポップアップを追加すると、SettingsFlyout から派生した新しいクラスを、指定した名前で作成します。設定ポップアップをインスタンス化するには、new UpdateSettingsFlyout() などの指定した名前を使います。

この例では、前の図に示した SettingsFlyout コントロールを作成しています。

<SettingsFlyout
    x:Class="SettingsFlyoutExample.UpdateSettingsFlyout"
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SettingsFlyoutExample"
    xmlns:d="https://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    IconSource="Assets/SmallLogo.png"
    Title="App Updates"
    d:DesignWidth="346"
    Width="346" 
    HeaderBackground="#FF2B4A80">
    <SettingsFlyout.Resources>
        <Style x:Key="SettingsFlyoutSectionStyle" TargetType="StackPanel">
            <Setter Property="Margin" Value="0,0,0,39"/>
        </Style>
    </SettingsFlyout.Resources>

    <!-- This stack panel acts as a root panel for vertical layout of the content sections. -->
    <StackPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch" >

        <!-- The stack panels below define individual content sections. -->

        <!-- Content Section 1-->
        <StackPanel Style="{StaticResource SettingsFlyoutSectionStyle}">

            <!-- Section 1 header -->
            <TextBlock Style="{StaticResource TitleTextBlockStyle}"
                                 Text="Automatic updates" />

            <!-- Section 1 body -->
            <TextBlock Style="{StaticResource BodyTextBlockStyle}" Margin="0,0,0,25" TextWrapping="Wrap">
                <TextBlock.Text>
                    Turn automatic updating on or off.
                </TextBlock.Text>
            </TextBlock>
            <ToggleSwitch Header="Download updates automatically" />
            <ToggleSwitch Header="Install updates automatically" />

        </StackPanel>

        <!-- Define more Content Sections below as necessary. -->

    </StackPanel>
</SettingsFlyout>

次の例は、SettingsFlyout を設定ウィンドウに追加する方法を示しています。

public MainPage()
{
    this.InitializeComponent();

    Windows.UI.ApplicationSettings.SettingsPane.GetForCurrentView().CommandsRequested += MainPage_CommandsRequested;
}

void MainPage_CommandsRequested(Windows.UI.ApplicationSettings.SettingsPane sender, Windows.UI.ApplicationSettings.SettingsPaneCommandsRequestedEventArgs args)
{
    Windows.UI.ApplicationSettings.SettingsCommand updateSetting = 
        new Windows.UI.ApplicationSettings.SettingsCommand("AppUpdateSettings", "App updates", (handler) =>
    {
        UpdateSettingsFlyout updatesFlyout = new UpdateSettingsFlyout();
        updatesFlyout.Show();

    });

    args.Request.ApplicationCommands.Add(updateSetting);
}

次の例は、アプリのボタンから SettingsFlyout を開く方法を示しています。

<Button Content="App update settings" Click="UpdateSettingsButton_Click"/>

private void UpdateSettingsButton_Click(object sender, RoutedEventArgs e)
{
    UpdateSettingsFlyout updatesFlyout = new UpdateSettingsFlyout();
    updatesFlyout.ShowIndependent();
}

TimePicker

[XAML DatePicker コントロールと TimePicker コントロールのサンプルを今すぐ入手する]

Windows 8.1 には、ユーザーがアプリで時刻の値を選択できる XAML の新しいコントロール (TimePicker コントロール) が導入されました。

TimePicker

ユーザーはタッチ、マウス、またはキーボードといった入力方式を使って時刻を標準化された方法で選択出来ます。TimePicker コントロールは、最小限の XAML または他のコードを含む既定の形式で使うか、さまざまな方法でカスタマイズできます。TimePicker では、12 時間形式または 24 時間形式を使うことができます。

TimePicker の作成

次の例は、ヘッダーを含むシンプルな TimePicker を作成する方法を示しています。

<TimePicker x:Name=arrivalTimePicker Header="Arrival Time"/>

次の例は、24 時間形式の TimePicker を作成する方法を示しています。

<TimePicker ClockIdentifier="24HourClock" Header="24 hour clock"/>

この例の TimePicker は次のようになります。午前/午後のセレクターは自動的に非表示になります。

24 時間形式の TimePicker

コードで時刻を設定したり、コントロールを TimeSpan のインスタンスにバインドすることができます。ここでは、TimePicker の既定値がコードで午前 8 時に設定されています。

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    // Set the default time to 8 A.M.
    arrivalTimePicker.Time = new TimeSpan(8, 0, 0);
}

分セレクターの増分をアプリに合った値に設定できます。ここでは、分の値の増分は 15 分です。

<TimePicker x:Name=arrivalTimePicker Header="Arrival Time" MinuteIncrement="15"/>

この例の TimePicker は、分セレクターを開くと次のように表示されます。

分の値の増分が 15 の TimePicker

TimePicker では、Orientation プロパティを設定することで縦長レイアウトにすることもできます。このコントロールは詳細にカスタマイズできます。Styles と Templates を使って、TimePicker が提供するコンテンツの多くをカスタマイズできます。

FlipView の更新

[XAML FlipView コントロールのサンプルを今すぐ入手する]

XAML の FlipView コントロールでは、タッチベース、ボタンベース、プログラムという 3 つのナビゲーションモードがサポートされます。ユーザーがタッチでナビゲートすると、FlipView の項目がビューにスムーズにスクロールされます。一方、マウス、キーボード、またはプログラムによりナビゲートすると、アニメーションは表示されず、項目はそのままビューに移動します。このため、ナビゲーションモード間で異なるエクスペリエンスになります。

Windows 8.1 では、新しい UseTouchAnimationsForAllNavigation プロパティが FlipView コントロールに追加されたため、すべてのナビゲーションモードで一貫したユーザーエクスペリエンスにすることができます。このプロパティを true に設定すると、ナビゲーションがタッチベース、ボタンベース、プログラムのどれであっても同じアニメーションが表示されます。

ComboBox、DatePicker、TimePicker、Slider の各コントロールと編集コントロールのヘッダー

[XAML 基本コントロールのサンプルを今すぐ入手する]

ComboBox などの一部のコントロールには通常、コントロールのコンテキストを説明するラベルも表示されます。これらのコントロールにはラベルを追加しにくい場合があり、適切なレイアウトにするために、ユーザーが追加の要素 (TextBlock オブジェクトや StackPanel オブジェクトなど) を使う必要が生じます。

Windows 8.1 では、ラベルを追加しやすいように、Header プロパティと HeaderTemplate プロパティが複数のコントロールに追加されました。プロパティが追加されたのは、以下のコントロールです。

既定の Header はヒットテストできないため、フォーカス、マウス、またはキーボード入力を受け付けません。文字列の値が null または空の場合、空のヘッダーが作成されます。空のヘッダーが領域を占有したり、レイアウトに影響を与えたりすることはありません。

シンプルでないテキストヘッダーが必要な場合は、HeaderTemplate を使えます。HeaderTemplate は、Button のようなヒットテストできる要素など、有効な XAML をどれでもホストできます。

Header を ComboBox と PasswordBox に追加する方法を次に示します。

<ComboBox Header="Colors" PlaceholderText="Pick a color">
    <x:String>Blue</x:String>
    <x:String>Green</x:String>
    <x:String>Red</x:String>
    <x:String>Yellow</x:String>
</ComboBox>
<PasswordBox Header="Password" PlaceholderText="Enter your password"/>

この例では、次のコントロールが作成されます。

ヘッダーのある ComboBox

ヘッダーのある PasswordBox

次の例では、読み取り専用の RichEditBox の HeaderTemplate に Button コントロールが含まれています。ユーザーがボタンをクリックすると、リッチエディットボックスが編集可能になり、ヘッダーが変更されます。

<RichEditBox x:Name="richTextBox1" IsReadOnly="True">
    <RichEditBox.HeaderTemplate>
        <DataTemplate>
            <Button Content="Click to edit" Click="Button_Click"/>
        </DataTemplate>
    </RichEditBox.HeaderTemplate>
</RichEditBox>

private void Button_Click(object sender, RoutedEventArgs e)
{
    richTextBox1.IsReadOnly = false;
    richTextBox1.HeaderTemplate = null;
    richTextBox1.Header = "Editable RichEditBox";
}

この例では、次の RichEditBox コントロールを作成します。

ヘッダーテンプレートのある RichEditBox

ユーザーがボタンをクリックすると、リッチエディットボックスが編集可能になり、次のようにヘッダーが変更されます。

ヘッダーのある RichEditBox

PlaceholderText

Windows 8.1 では、テキストを含む複数のコントロールに PlaceholderText プロパティが追加されました。ComboBox や PasswordBox などの一部のコントロールには、ユーザーの入力が必要な場合があります。既定値を決めたり、空のコントロールを表示したりしない場合、プレースホルダーテキストを追加してユーザーにコンテキストを提示することができます。

これらのコントロールには、次の新しい PlaceholderText プロパティが追加されました。

ComboBox の場合、SelectedIndex の値を -1 に、SelectedItem を null にすると、プレースホルダーテキストが表示されます (これらの 2 つのプロパティは同期状態が保たれます)。項目が選択された後、ユーザーがプレースホルダーテキストを表示することはできません。ただし、プログラムにより SelectedIndex を -1 に設定するか、SelectedItem を null に設定して、プレースホルダーテキストが再度表示されるようにすることができます。

テキスト編集コントロールには、コントロールが空の場合にプレースホルダーテキストが表示されます。ユーザーは、コントロールからすべてのテキストを削除することで、コントロールをこの状態に戻すことができます。

プレースホルダーテキストを ComboBox と PasswordBox に追加する方法を次に示します。

<ComboBox Header="Colors" PlaceholderText="Pick a color">
    <x:String>Blue</x:String>
    <x:String>Green</x:String>
    <x:String>Red</x:String>
    <x:String>Yellow</x:String>
</ComboBox>
<PasswordBox Header="Password" PlaceholderText="Enter your password"/>

この例では、次のコントロールが作成されます。

ヘッダーのある ComboBox

ヘッダーのある PasswordBox

WebView の更新

[XAML WebView コントロールのサンプルを今すぐ入手する]

Windows 8.1 では、アプリでの HTML コンテンツと Web ベースコンテンツのホストが大幅に簡単になります。Windows 8.1 の WebView コントロールでは、複数の問題が修正されており、次のような新機能が追加されています。

WebView コントロール上での XAML コンテンツ (AppBar コントロールなど) の表示のサポート。これにより、XAML コンテンツをオーバーレイする場合に WebViewBrush を使って WebView コンテンツをレンダリングする必要を生じさせていた、Windows 8 の ""領空"" 問題が解決されます。
RenderTransform プロパティを使った WebView コントロールの変換、拡大縮小、傾斜、回転のサポート。
WebView コントロールを含む Opacity プロパティの使用のサポート。
基本的なナビゲーションに使う新しい API 要素: GoBack、GoForward、Stop、Refresh、CanGoBack、CanGoForward。これらの API を使うと、一般的な Web 閲覧機能をアプリに追加できます。
POST 要求と HTTP ヘッダーによって URI に移動する NavigateWithHttpRequestMessage メソッド。
カスタムリゾルバーを使ってローカルコンテンツを読み込む NavigateToLocalStreamUri メソッド。これにより、オフラインで使うために Web ベースのコンテンツをダウンロードしてキャッシュするなどの高度なシナリオが可能になります。
ナビゲーションとコンテンツ読み込みの状態に対応するための新しいイベント: NavigationStarting、ContentLoading、DOMContentLoaded、NavigationCompleted、FrameNavigationStarting、FrameContentLoading、FrameDOMContentLoaded、FrameNavigationCompleted。
潜在的な問題が存在する状態に対応するための新しいイベント: LongRunningScriptDetected、UnsafeContentWarningDisplaying、UnviewableContentIdentified。
入力フォーカスを WebView に設定する Focus メソッド。
ホストされたコンテンツのプレビューイメージを取得する CapturePreviewToStreamAsync メソッド。
スクリプトを呼び出し、共有するためにデータパッケージとして選んだコンテンツを取得する非同期メソッド: InvokeScriptAsync と CaptureSelectedContentToDataPackageAsync。
ドキュメントタイトルを取得し、既定の背景色を設定する新しいプロパティ: DocumentTitle と DefaultBackgroundColor。

Windows 8.1 では、次の WebView API 要素が推奨されなくなりました。

LoadCompleted と NavigationFailed。代わりに、NavigationCompleted を使います。
InvokeScript。代わりに、InvokeScriptAsync を使います。
DataTransferPackage と DataTransferPackageProperty。代わりに、CaptureSelectedContentToDataPackageAsync を使います。
AllowedScriptNotifyUris、AnyScriptNotifyUri、AllowedScriptNotifyUrisProperty は、Windows 8.1 ではサポートされません。window.external.notify を呼び出したときに外部 Web ページで ScriptNotify イベントを発生できるようにするには、アプリマニフェストの ApplicationContentUriRules セクションにページの URI を含める必要があります (Visual Studio では、Package.appxmanifest デザイナーの [コンテンツ URI] タブでこれを実行できます)。この一覧の URI では HTTPS プロトコルを使う必要があります。サブドメインのワイルドカード (たとえば、"https://*.microsoft.com") を含めることができますが、ドメインのワイルドカードを含めることはできません (たとえば、"https://*.com" や "https://*.*")。マニフェスト要件は、アプリパッケージから生成されたコンテンツには適用されない、"ms-local-stream://" URI を使う、または NavigateToString メソッドを使って読み込まれる、のいずれかです。

これらの変更は、Windows 8.1 で実行される Windows 8 アプリには影響を与えません。

ビットマップへの XAML ツリーのレンダリング

Windows 8.1 用の Windows ランタイムには、Windows.UI.Xaml.Media.Imaging 名前空間に新しい種類 (RenderTargetBitmap) が追加されました。

この種類には、次の 2 つの主なメソッドがあります。

RenderTargetBitmap.RenderAsync。XAML ビジュアルツリーを取得し、そのビットマップ表現を作成します。

注この操作は、特定の XAML 要素ツリーを非同期的にビットマップにレンダリングします。このメソッドは画面の更新と同期されず、正確なフレームタイミングが保証されないため、ビットマップは、想定されるキャプチャの瞬間の前後に一瞬しかレンダリングされない可能性があります。
RenderTargetBitmap.GetPixelsAsync。ピクセルのバイト配列を特定の形式で返します。

XAML 要素ツリーをレンダリングする方法を次に示します。

var renderTargetBitmap = new RenderTargetBitmap();
await renderTargetBitmap.RenderAsync(myElementTree);

myImage.Source = renderTargetBitmap;

RenderTargetBitmap は ImageSource から継承されるため、GetPixelsAsync を呼び出してビットマップデータを取得および表示しなくても、Image オブジェクトのソースとして直接設定できます。

レンダリングされるビットマップをファイルに書き出す方法を次に示します。

var renderTargetBitmap = new RenderTargetBitmap();
await renderTargetBitmap.Render(myElementTree);
var pixels = await renderTargetBitmap.GetPixelsAsync();

var picker = new FileSavePicker();
// Picker setup
var file = await picker.PickSaveFileAsync();
// File validation

using (var stream = await file.OpenAsync(FileAccessMode.ReadWrite))
{
    var encoder = await 
        BitmapEncoder.CreateAsync(BitmapEncoder.BmpEncoderId, stream);
    
    encoder.SetPixelData(BitmapPixelFormat.Rgba8, 100, 0, 96, 96,         
        await renderTargetBitmap.GetPixelsAsync());
        
    await encoder.FlushAsync();
}

他のコントロールの更新

XAML ScrollViewer の強化

Windows 8.1 には、Microsoft Excel の固定ウィンドウと似た "フリーズした" 領域を定義できる ScrollViewer プロパティ (TopHeader、LeftHeader、TopLeftHeader) が追加されました。これらの領域には、スクロールしないコンテンツか、メインコンテンツと同時に 1 方向にのみスクロールするコンテンツが含まれています。左上のヘッダーはスクロールせず、左側のヘッダーは縦方向にのみスクロールし、上部のヘッダーは横方向にのみスクロールします。
XAML データバインディングの強化

Windows 8.1 には、次の API 要素が追加されました。
- FrameworkElement.DataContextChanged イベントを使うと、DataContext プロパティの値の変化に応答できます。データバインディングを使う代わりに、このイベントを使ってコントロールプロパティを手動で更新できます。これは、データバインディングのパフォーマンスの問題に対処するのに役立ちます。
- Binding.FallbackValue プロパティと Binding.TargetNullValue プロパティにより、バインドが値を解決できない場合や null 値に解決する場合に表示する既定値を設定できます。
- Binding.UpdateSourceTrigger プロパティ、FrameworkElement.GetBindingExpression メソッド、BindingExpression クラスにより、TextBox.Text プロパティへの双方向バインドの既定の動作を変更できます。既定では、TextBox.Text のバインドは、コントロールがフォーカスを失ったときのみバインドソースを更新します。TextBox.Text プロパティの値が変更されると必ず、UpdateSourceTrigger を PropertyChanged に設定してソースを更新します。BindingExpression.UpdateSource メソッドを使って、UpdateSourceTrigger を Explicit に設定してプログラムによりソースを更新します。
XAML ナビゲーションの強化

Windows 8.1 には、次の API 要素が追加されました。
- 新しい Frame プロパティ (BackStack、ForwardStack、BackStackProperty、ForwardStackProperty)。PageStackEntry オブジェクトを追加または削除することで、これらのプロパティを使って前後のナビゲーションスタックをプログラムにより変更します。これは、ユーザーがサインインした後にナビゲーション履歴からサインインページを削除するシナリオや、別のアクティブ化コントラクトでアプリが再起動されたときにナビゲーションスタックをクリアするシナリオなどで役立ちます。
- NavigationTransitionInfo パラメーターの値を受け取る Frame.Navigate オーバーロード。このオーバーロードは、ページの XAML で定義された切り替えではなく、特定の切り替えのアニメーションを使ってページに移動する場合に使います。NavigationEventArgs クラスと NavigatingCancelEventArgs クラスを通じて、ナビゲーションイベントハンドラー内のパラメーター値にアクセスすることもできます。
- NavigatingCancelEventArgs.Parameter プロパティ。このプロパティは、ナビゲーションパラメーターの値に応じてナビゲーションを取り消す必要がある場合に使います。
動的テーマ

Windows 8 では、アプリの起動時にハイコントラストの淡色テーマと濃色テーマが読み込まれます。しかし、アプリの実行中にユーザーがテーマを変更した場合、XAML テーマシステムはこれを検出できないため、アプリでテーマが変更されませんでした。Windows 8.1 では、XAML テーマシステムが実行時のテーマ変更を検出できるため、リソースが再び読み込まれます。Windows 8.1 では、XAML コントロールの共有された既定のリソースによってこれが自動的に行われます。独自に定義したカスタムテンプレートでこの動作を有効にするには、新しい ThemeResource マークアップ拡張を使ってテーマ固有のリソースを参照してください。テーマごとに異なるリソースを定義した場合、リソースは複数のリソースディクショナリで定義されます (テーマごとに 1 つのリソースディクショナリ)。これらのリソースディクショナリはアプリの XAML 定義リソースのセット全体に結合されます。アプリの実行中であっても、システムがテーマの変更を検出すると、正しいディクショナリが動的に読み込まれます。
コントロールごとのテーマの適用

Windows 8 では、テーマが Application.RequestedTheme プロパティを使って定義され、アプリ内のすべての UI に適用されます。Application.RequestedTheme は実行時に変更できません。Windows 8.1 では、特定の UI 要素が Application.RequestedTheme の設定とは異なるテーマを使うように要求することができます。これを行うには、別のテーマを使う要素で RequestedTheme を属性として設定します。この RequestedTheme は、FrameworkElement クラスのプロパティであるため、基本的にはすべての UI 要素に存在します。要素ごとの RequestedTheme 値は実行時に設定できます。
GetOpenPopups

XAML の Popup コントロールを作成した場合、ビジュアルツリーには存在しません。ナビゲーション、中断、またはその他の理由でポップアップを閉じる必要が生じた場合に、参照を保存していないと、Windows 8 コードでは Popup 要素を見つけて閉じるのが難しいことがあります。Windows 8.1 には、VisualTreeHelper.GetOpenPopups API が導入されたため、開いているすべてのポップアップをリストとして返すユーティリティを使うことができます。閉じるポップアップで IsOpen を false に設定できます。
アクセシビリティと UI オートメーション

Windows 8.1 には、Windows 8 に存在していたが、サポートのために FrameworkElementAutomationPeer クラスを使っていた特定のコントロールのピアが追加されました。たとえば、AppBar コントロールには専用ピアがあります。クラスのカスタムピアを作成する場合は、独自の Microsoft UI オートメーションピアを実装する際に、これらのピアをベースとして使い、既にあるパターン API の実装を再利用できます。Windows 8 の全体的な UI オートメーションフレームワークには、パターンのマネージコードのサポートも追加されています。たとえば、XAML コントロールピアで Styles パターンを実装するために、IStylesProvider インターフェイスを使うことができます。最後の点として、アプリレベルの AccessibilityView 添付プロパティが用意されています。これは、UI オートメーションクライアントから見える各種の UI オートメーションツリー表現に特定の UI 要素がどのように表示されるか (要素がコンテンツツリーとコントロールツリーのどちらに表示されるかなど) を調整するために使うことができます。
MaxLines プロパティ

(TextBlock、RichTextBlock、RichTextBlockOverflow の各コントロールに適用されます)

このプロパティを使うと、テキストブロックに表示されるテキストの最大行数を指定することができます。テキストコントロールは、フォントサイズ、フォントスタイル、テキストの長さに関係なく指定された行数より多くの行が表示されないように高さを調整します。
PreventKeyboardDisplayOnProgrammaticFocus プロパティ

(TextBox、RichEditBox、PasswordBox の各コントロールに適用されます)

フォーカスがテキストボックスでプログラムにより設定されたときにスクリーンタッチキーボードが表示されないようにするには、このプロパティを true に設定します。既定では、フォーカスが編集可能なテキストボックスに移動し、直近の入力がタッチにより生成された場合は必ずタッチキーボードが表示されます。これは、フォーカスがプログラムにより設定されたか、ユーザー操作により設定されたかに関係なく発生します。フォーカスがプログラムにより設定されたときはキーボードが表示されないようにする必要が生じることもあります。たとえば、ユーザーが操作を続ける準備が完了するまで、UI の一部をキーボードが覆わないようにする必要がある場合などです。
SelectionHighlightColor プロパティ

(TextBlock、TextBox、RichEditBox、RichTextBlock、PasswordBox の各コントロールに適用されます)

SolidColorBrush を指定すると、テキストコントロールのハイライトカラーをアプリのブランドに合わせて変更できます。
Paste イベント

(TextBox、RichEditBox、PasswordBox の各コントロールに適用されます)

アプリの編集可能なテキストコントロールで Paste イベントのカスタム処理を行うことができます。
TextWrapping.WrapWholeWords 値

この値は、単語の途中で折り返しが発生しないようにする場合に使います。最後の単語が折り返されずにテキストブロックからオーバーフローします。

この値を使うと、行が使用可能なブロック幅を越えてオーバーフローした場合に改行が発生します。ただし、スクロールが許可されない固定幅に制約された非常に長い単語の場合など、改行アルゴリズムが改行可能な場所を判断できない場合、行はブロック幅を越えてオーバーフローできます。
TextTrimming.Clip 値

この値を使うと、テキストがピクセルレベルでトリミングされ、はみだしたグリフが視覚上クリッピングされます。
TextTrimming.CharacterEllipsis 値

この値を使うと、テキストが単語の境界ではなく文字の境界でトリミングされます。残りのテキストの代わりに省略記号 ("...") が描画されます。

コントロール (XAML と C#、C++ または VB)

AppBar コントロール

アプリ バーのボタンの作成

CommandBar

CommandBar の作成

DatePicker

DatePicker の作成

Flyout

ポップアップの作成

Hub

ハブ セクション

ハブの作成

Hyperlink

ハイパーリンク要素の使用

MenuFlyout

MenuFlyout の作成

SettingsFlyout

SettingsFlyout の表示と非表示

SettingsPane への接続

SettingsFlyout の作成

TimePicker

TimePicker の作成

FlipView の更新

ComboBox、DatePicker、TimePicker、Slider の各コントロールと編集コントロールのヘッダー

PlaceholderText

WebView の更新

ビットマップへの XAML ツリーのレンダリング

他のコントロールの更新

その他のリソース

アプリバーのボタンの作成

ハブセクション