次の方法で共有


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

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 の新しいコントロール (AppBarButtonAppBarToggleButtonAppBarSeparator の各コントロール) が導入されました。

XAML のアプリ バーのボタン

 

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

  • 既定の外観は、四角形ではなく円形です。

  • Content プロパティではなく Label プロパティと Icon プロパティを使ってコンテンツを設定します。Content プロパティが無視されます。

  • ボタンの IsCompact プロパティは、そのサイズを制御します。

アプリ バーのボタン コントロールには、標準とコンパクトの 2 つのサイズがあります。既定では、テキスト ラベルが表示され、余白が大きく表示されます。IsCompact プロパティが true に設定されると、テキスト ラベルは表示されず、ボタンの周囲の余白が小さくなります。AppBarSeparator にも、余白が小さいコンパクトな状態があります。

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

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

 

新しい 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 が提供するコンテンツの多くをカスタマイズできます。

Flyout

[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 が作成されます。

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

 

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>

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

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

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

 

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

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

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

さらに、FlyoutBase.AttachedFlyout 添付プロパティを使うことで、MenuFlyout コントロールを任意の FrameworkElement オブジェクトにアタッチすることもできます。この場合、FrameworkElement での操作 (Tapped など) に反応し、コードで 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 には、ヘッダー セクションとコンテンツ セクションがあります。ヘッダーには、戻るボタン、タイトル、省略可能なアイコンがあります。アプリの色に合わせるには、HeaderBackgroundHeaderForeground を設定してください。既定では、アイコンにはアプリの小さいアイコンが表示されます。IconSource プロパティを設定して、別のアイコンを指定できます。戻るボタンは常に表示されます。

SettingsFlyout の表示と非表示

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

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

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

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

SettingsPane への接続

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

SettingsFlyout の作成

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

  1. [プロジェクト][新しい項目の追加] をクリックします。

  2. [新しい項目の追加] ダイアログ ボックスで、中央のウィンドウから [設定ポップアップ] を選びます。

  3. 設定ポップアップ ファイルの名前を入力し、[追加] をクリックします。この例では、設定ポップアップの名前は 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 をどれでもホストできます。

HeaderComboBoxPasswordBox に追加する方法を次に示します。

<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

 

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

<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 プロパティが追加されました。ComboBoxPasswordBox などの一部のコントロールには、ユーザーの入力が必要な場合があります。既定値を決めたり、空のコントロールを表示したりしない場合、プレースホルダー テキストを追加してユーザーにコンテキストを提示することができます。

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

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

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

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

<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 コントロールでは、複数の問題が修正されており、次のような新機能が追加されています。

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

  • LoadCompletedNavigationFailed。代わりに、NavigationCompleted を使います。

  • InvokeScript。代わりに、InvokeScriptAsync を使います。

  • DataTransferPackageDataTransferPackageProperty。 代わりに、CaptureSelectedContentToDataPackageAsync を使います。

  • AllowedScriptNotifyUrisAnyScriptNotifyUriAllowedScriptNotifyUrisProperty は、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;

RenderTargetBitmapImageSource から継承されるため、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 プロパティ (TopHeaderLeftHeaderTopLeftHeader) が追加されました。これらの領域には、スクロールしないコンテンツか、メイン コンテンツと同時に 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 プロパティの値が変更されると必ず、UpdateSourceTriggerPropertyChanged に設定してソースを更新します。BindingExpression.UpdateSource メソッドを使って、UpdateSourceTriggerExplicit に設定してプログラムによりソースを更新します。

  • XAML ナビゲーションの強化

    Windows 8.1 には、次の API 要素が追加されました。

    • 新しい Frame プロパティ (BackStackForwardStackBackStackPropertyForwardStackProperty)。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 が導入されたため、開いているすべてのポップアップをリストとして返すユーティリティを使うことができます。閉じるポップアップで IsOpenfalse に設定できます。

  • アクセシビリティと UI オートメーション

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

  • MaxLines プロパティ

    (TextBlockRichTextBlockRichTextBlockOverflow の各コントロールに適用されます)

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

  • PreventKeyboardDisplayOnProgrammaticFocus プロパティ

    (TextBoxRichEditBoxPasswordBox の各コントロールに適用されます)

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

  • SelectionHighlightColor プロパティ

    (TextBlockTextBoxRichEditBoxRichTextBlockPasswordBox の各コントロールに適用されます)

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

  • Paste イベント

    (TextBoxRichEditBoxPasswordBox の各コントロールに適用されます)

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

  • TextWrapping.WrapWholeWords

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

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

  • TextTrimming.Clip

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

  • TextTrimming.CharacterEllipsis

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