ポップアップFlyouts

ポップアップは、コンテンツとして任意の UI を表示できる簡易非表示コンテナーです。A flyout is a light dismiss container that can show arbitrary UI as its content. ポップアップには、他のポップアップやコンテキスト メニューを含めて、入れ子になったエクスペリエンスを作成することができます。Flyouts can contain other flyouts or context menus to create a nested experience.

ポップアップ内で入れ子になったコンテキスト メニュー

重要な API:フライアウト クラスImportant APIs: Flyout class

適切なコントロールの選択Is this the right control?

  • ヒントコンテキスト メニューの変わりにポップアップを使用しないようにします。Don't use a flyout instead of tooltip or context menu. 指定した時間が経過すると非表示になる短い説明を表示するには、ヒントを使います。Use a tooltip to show a short description that hides after a specified time. UI 要素に関連した状況依存の操作 (コピーや貼り付けなど) には、コンテキスト メニューを使います。Use a context menu for contextual actions related to a UI element, such as copy and paste.

(のようなコントロール) ダイアログ ボックスを使用する場合とポップアップを使用する場合の推奨事項を参照してくださいダイアログとフライアウトします。For recommendations on when to use a flyout vs. when to use a dialog (a similar control), see Dialogs and flyouts.

Examples

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

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

ポップアップの作成方法How to create a flyout

ポップアップは、特定のコントロールにアタッチされます。Flyouts are attached to specific controls. 使用することができます、配置フライアウトが表示される場所を指定するプロパティ。上、左、下、右、または完全な。You can use the Placement property to specify where a flyout appears: Top, Left, Bottom, Right, or Full. 完全配置モードを選択した場合、アプリはポップアップを拡大し、アプリ ウィンドウ内の中央に配置します。If you select the Full placement mode, the app stretches the flyout and centers it inside the app window. Buttonなどの一部のコントロールは、ポップアップやコンテキスト メニューを関連付けるために使用できる Flyout プロパティを提供します。Some controls, such as Button, provide a Flyout property that you can use to associate a flyout or context menu.

この例では、ボタンが押されたときに、いくつかのテキストを表示するシンプルなポップアップを作成します。This example creates a simple flyout that displays some text when the button is pressed.

<Button Content="Click me">
  <Button.Flyout>
     <Flyout>
        <TextBlock Text="This is a flyout!"/>
     </Flyout>
  </Button.Flyout>
</Button>

コントロールに Flyout プロパティがない場合には、代わりに FlyoutBase.AttachedFlyout 添付プロパティを使用できます。If the control doesn't have a flyout property, you can use the FlyoutBase.AttachedFlyout attached property instead. これを行う場合には、さらに FlyoutBase.ShowAttachedFlyoutメソッドを呼び出して、ポップアップを表示する必要があります。When you do this, you also need to call the FlyoutBase.ShowAttachedFlyout method to show the flyout.

この例では、画像に簡単なポップアップを追加します。This example adds a simple flyout to an image. ユーザーが画像をタップしたときに、アプリはポップアップを表示します。When the user taps the image, the app shows the flyout.

<Image Source="Assets/cliff.jpg" Width="50" Height="50"
  Margin="10" Tapped="Image_Tapped">
  <FlyoutBase.AttachedFlyout>
    <Flyout>
      <TextBlock Text="This is some text in a flyout."  />
    </Flyout>        
  </FlyoutBase.AttachedFlyout>
</Image>
private void Image_Tapped(object sender, TappedRoutedEventArgs e)
{
    FlyoutBase.ShowAttachedFlyout((FrameworkElement)sender);
}

前に示した例では、ポップアップはインラインで定義されています。The previous examples defined their flyouts inline. ポップアップを静的なリソースとして定義して、複数の要素で使用することもできます。You can also define a flyout as a static resource and then use it with multiple elements. この例では、サムネイルがタップされたときに大きな画像を表示する、より複雑なポップアップを作成します。This example creates a more complicated flyout that displays a larger version of an image when its thumbnail is tapped.

<!-- Declare the shared flyout as a resource. -->
<Page.Resources>
    <Flyout x:Key="ImagePreviewFlyout" Placement="Right">
        <!-- The flyout's DataContext must be the Image Source
             of the image the flyout is attached to. -->
        <Image Source="{Binding Path=Source}"
            MaxHeight="400" MaxWidth="400" Stretch="Uniform"/>
    </Flyout>
</Page.Resources>
<!-- Assign the flyout to each element that shares it. -->
<StackPanel>
    <Image Source="Assets/cliff.jpg" Width="50" Height="50"
           Margin="10" Tapped="Image_Tapped"
           FlyoutBase.AttachedFlyout="{StaticResource ImagePreviewFlyout}"
           DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"/>
    <Image Source="Assets/grapes.jpg" Width="50" Height="50"
           Margin="10" Tapped="Image_Tapped"
           FlyoutBase.AttachedFlyout="{StaticResource ImagePreviewFlyout}"
           DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"/>
    <Image Source="Assets/rainier.jpg" Width="50" Height="50"
           Margin="10" Tapped="Image_Tapped"
           FlyoutBase.AttachedFlyout="{StaticResource ImagePreviewFlyout}"
           DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"/>
</StackPanel>
private void Image_Tapped(object sender, TappedRoutedEventArgs e)
{
    FlyoutBase.ShowAttachedFlyout((FrameworkElement)sender);  
}

ポップアップのスタイルを設定するStyle a flyout

ポップアップのスタイルを設定するには、FlyoutPresenterStyle を変更します。To style a Flyout, modify its FlyoutPresenterStyle. 次の例では、テキストの折り返しの段落を示し、スクリーン リーダーがテキスト ブロックにアクセスできるようにします。This example shows a paragraph of wrapping text and makes the text block accessible to a screen reader.

折り返しのあるテキストを使ったアクセシビリティ対応のポップアップ

<Flyout>
  <Flyout.FlyoutPresenterStyle>
    <Style TargetType="FlyoutPresenter">
      <Setter Property="ScrollViewer.HorizontalScrollMode"
          Value="Disabled"/>
      <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
      <Setter Property="IsTabStop" Value="True"/>
      <Setter Property="TabNavigation" Value="Cycle"/>
    </Style>
  </Flyout.FlyoutPresenterStyle>
  <TextBlock Style="{StaticResource BodyTextBlockStyle}" Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."/>
</Flyout>

ある 10 フィート エクスペリエンスのフライアウトをスタイル設定Styling flyouts for 10-foot experiences

ポップアップなどの簡易非表示コントロールは、閉じるまでの間、一時的な UI にキーボードのフォーカスやゲームパッドのフォーカスを捕捉します。Light dismiss controls like flyout trap keyboard and gamepad focus inside their transient UI until dismissed. この動作に視覚的な合図を提供するために、Xbox の簡易非表示コントロールは、スコープ外の UI を暗く表示するオーバーレイを描画します。To provide a visual cue for this behavior, light dismiss controls on Xbox draw an overlay that dims the contrast and visibility of out of scope UI. この動作は、LightDismissOverlayMode プロパティを使用して変更できます。This behavior can be modified with the LightDismissOverlayMode property. 既定では、ポップアウトは Xbox で簡易非表示オーバーレイを描画し、他のデバイス ファミリでは描画しませんが、アプリで強制的にオーバーレイを常にオンにするか、常にオフにするかを選択できます。By default, flyouts will draw the light dismiss overlay on Xbox but not other device families, but apps can choose to force the overlay to be always On or always Off.

ポップアップと暗転オーバーレイ

<MenuFlyout LightDismissOverlayMode="On">

簡易非表示の動作Light dismiss behavior

ポップアウトは、次のクイック簡易非表示アクションで閉じることができます。Flyouts can be closed with a quick light dismiss action, including

  • ポップアップの外側をタップするTap outside the flyout
  • Esc キーを押すPress the Escape keyboard key
  • ハードウェアまたはソフトウェアのシステムの戻るボタンを押すPress the hardware or software system Back button
  • ゲームパッドの B ボタンを押すPress the gamepad B button

タップで非表示にする場合、通常ではこのジェスチャは吸収されて下の UI に渡されません。When dismissing with a tap, this gesture is typically absorbed and not passed on to the UI underneath. たとえば、開いているポップアウトの背後にボタンが見えている場合、ユーザーが 1 回目のタップでポップアップを閉じても、このボタンはアクティブ化されません。For example, if there’s a button visible behind an open flyout, the user’s first tap dismisses the flyout but does not activate this button. ボタンを押すには、もう 1 回タップする必要があります。Pressing the button requires a second tap.

この動作は、ボタンをポップアウトの入力パススルー要素として指定することで変更できます。You can change this behavior by designating the button as an input pass-through element for the flyout. 上記の簡易非表示アクションの結果、ポップアウトが閉じます。また、タップ イベントがその指定された OverlayInputPassThroughElement に渡されます。The flyout will close as a result of the light dismiss actions described above and will also pass the tap event to its designated OverlayInputPassThroughElement. 機能的に似た項目でユーザー操作を高速化するには、この動作の採用を検討します。Consider adopting this behavior to speed up user interactions on functionally similar items. アプリにお気に入りのコレクションがあり、コレクションの各項目にアタッチされたポップアウトがある場合は、ユーザーがすばやく連続して複数のポップアウトを操作したい可能性があると考えるのが妥当です。If your app has a favorites collection and each item in the collection includes an attached flyout, it's reasonable to expect that users may want to interact with multiple flyouts in rapid succession.

[!NOTE] 破壊的なアクションを実行するオーバーレイの入力パススルー要素を指定しないように注意します。Be careful not to designate an overlay input pass-through element which results in a destructive action. ユーザーは、プライマリ UI をアクティブ化しない、控えめな簡易非表示アクションに慣れています。Users have become habituated to discreet light dismiss actions which do not activate primary UI. 予期しない動作や中断動作を避けるために、閉じる、削除、または同様の破壊的なボタンは簡易非表示でアクティブ化しないでください。Close, Delete or similarly destructive buttons should not activate on light dismiss to avoid unexpected and disruptive behavior.

次の例では、FavoritesBar にある 3 つすべてのボタンが 1 回目のタップでアクティブ化されます。In the following example, all three buttons inside FavoritesBar will be activated on the first tap.

<Page>
    <Page.Resources>
        <Flyout x:Name="TravelFlyout" x:Key="TravelFlyout"
                OverlayInputPassThroughElement="{x:Bind FavoritesBar}">
            <StackPanel>
                <HyperlinkButton Content="Washington Trails Association"/>
                <HyperlinkButton Content="Washington Cascades - Go Northwest! A Travel Guide"/>  
            </StackPanel>
        </Flyout>
    </Page.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <StackPanel x:Name="FavoritesBar" Orientation="Horizontal">
            <HyperlinkButton x:Name="PageLinkBtn">Bing</HyperlinkButton>  
            <Button x:Name="Folder1" Content="Travel" Flyout="{StaticResource TravelFlyout}"/>
            <Button x:Name="Folder2" Content="Entertainment" Click="Folder2_Click"/>
        </StackPanel>
        <ScrollViewer Grid.Row="1">
            <WebView x:Name="WebContent"/>
        </ScrollViewer>
    </Grid>
</Page>
private void Folder2_Click(object sender, RoutedEventArgs e)
{
     Flyout flyout = new Flyout();
     flyout.OverlayInputPassThroughElement = FavoritesBar;
     ...
     flyout.ShowAt(sender as FrameworkElement);
{

サンプル コードを入手するGet the sample code