ポップアップ

[アーティクル]
06/02/2023

ポップアップは、コンテンツとして任意の UI を表示できる簡易非表示コンテナーです。ポップアップには、他のポップアップやコンテキストメニューを含めて、入れ子になったエクスペリエンスを作成することができます。

これは適切なコントロールですか?

ヒントやコンテキストメニューの変わりにポップアップを使用しないようにします。指定した時間が経過すると非表示になる短い説明を表示するには、ヒントを使います。 UI 要素に関連した状況依存の操作 (コピーや貼り付けなど) には、コンテキストメニューを使います。

どのようなときにポップアップを使い、どのようなときにダイアログ (同様のコントロール) を使うかに関する推奨事項については、「ダイアログとポップアップ」をご覧ください。

UWP と WinUI 2

重要

この記事の情報と例は、Windows アプリ SDKと WinUI 3 を使用するアプリ向けに最適化されていますが、一般に WinUI 2 を使用する UWP アプリに適用されます。プラットフォーム固有の情報と例については、UWP API リファレンスを参照してください。

このセクションには、UWP または WinUI 2 アプリでコントロールを使用するために必要な情報が含まれています。

このコントロールの API は、Windows.UI.Xaml.Controls 名前空間に存在します。

UWP API:Flyout クラス、 Button.Flyout プロパティ
WinUI 2 ギャラリーアプリを開き、ポップアップの動作を確認します。 WinUI 2 ギャラリー アプリには、ほとんどの WinUI 2 コントロールと機能の対話型の例が含まれています。 Microsoft Store からアプリを入手するか、GitHub でソースコードを取得します。

最新の WinUI 2 を使用して、すべてのコントロールの最新のスタイルとテンプレートを取得することをお勧めします。 WinUI 2.2 以降には、角丸みを使用するこのコントロール用の新しいテンプレートが含まれています。詳しくは、「角の半径」をご覧ください。

重要な API: ポップアップクラス、 Button.Flyout プロパティ

WinUI 3 ギャラリーアプリを開き、ポップアップの動作を確認します。

WinUI 3 ギャラリー アプリには、ほとんどの WinUI 3 コントロールと機能の対話型の例が含まれています。 Microsoft Store からアプリを入手するか、GitHub でソースコードを取得します。

ポップアップは、特定のコントロールにアタッチされます。 Placement プロパティを使って、ポップアップが表示される場所を指定できます (上、左、下、右、またはフル)。完全配置モードを選択した場合、アプリはポップアップを拡大し、アプリウィンドウ内の中央に配置します。 Buttonなどの一部のコントロールは、ポップアップやコンテキストメニューを関連付けるために使用できる Flyout プロパティを提供します。

この例では、ボタンが押されたときに、いくつかのテキストを表示するシンプルなポップアップを作成します。

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

コントロールに Flyout プロパティがない場合には、代わりに FlyoutBase.AttachedFlyout 添付プロパティを使用できます。これを行う場合には、さらに FlyoutBase.ShowAttachedFlyoutメソッドを呼び出して、ポップアップを表示する必要があります。

この例では、画像に簡単なポップアップを追加します。ユーザーが画像をタップしたときに、アプリはポップアップを表示します。

<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);
}

前に示した例では、ポップアップはインラインで定義されています。ポップアップを静的なリソースとして定義して、複数の要素で使用することもできます。この例では、サムネイルがタップされたときに大きな画像を表示する、より複雑なポップアップを作成します。

<!-- 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);
}

ポップアップのスタイルを設定するには、FlyoutPresenterStyle を変更します。次の例では、テキストの折り返しの段落を示し、スクリーンリーダーがテキストブロックにアクセスできるようにします。

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

<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 フィートエクスペリエンス向けのポップアップのスタイル指定

ポップアップなどの簡易非表示コントロールは、閉じるまでの間、一時的な UI にキーボードのフォーカスやゲームパッドのフォーカスを捕捉します。この動作に視覚的な合図を提供するために、Xbox の簡易非表示コントロールは、スコープ外の UI を暗く表示するオーバーレイを描画します。この動作は、LightDismissOverlayMode プロパティを使用して変更できます。既定では、ポップアウトは Xbox で簡易非表示オーバーレイを描画し、他のデバイスファミリでは描画しませんが、アプリで強制的にオーバーレイを常にオンにするか、常にオフにするかを選択できます。

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

<MenuFlyout LightDismissOverlayMode="On">

簡易非表示の動作

ポップアウトは、次のクイック簡易非表示アクションで閉じることができます。

ポップアップの外側をタップする
Esc キーを押す
ハードウェアまたはソフトウェアのシステムの戻るボタンを押す
ゲームパッドの B ボタンを押す

タップで非表示にする場合、通常ではこのジェスチャは吸収されて下の UI に渡されません。たとえば、開いているポップアウトの背後にボタンが見えている場合、ユーザーが 1 回目のタップでポップアップを閉じても、このボタンはアクティブ化されません。ボタンを押すには、もう 1 回タップする必要があります。

この動作は、ボタンをポップアウトの入力パススルー要素として指定することで変更できます。上記の簡易非表示アクションの結果、ポップアウトが閉じます。また、タップイベントがその指定された OverlayInputPassThroughElement に渡されます。機能的に似た項目でユーザー操作を高速化するには、この動作の採用を検討します。アプリにお気に入りのコレクションがあり、コレクションの各項目にアタッチされたポップアウトがある場合は、ユーザーがすばやく連続して複数のポップアウトを操作したい可能性があると考えるのが妥当です。

注意

破壊的なアクションを実行するオーバーレイの入力パススルー要素を指定しないように注意します。ユーザーは、プライマリ UI をアクティブ化しない、控えめな簡易非表示アクションに慣れています。予期しない破壊的な動作を回避するために、閉じる、削除する、または同様に破壊的なボタンを軽く閉じてもアクティブにしないでください。

次の例では、FavoritesBar にある 3 つすべてのボタンが 1 回目のタップでアクティブ化されます。

<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);
{

サンプルコードの入手

WinUI ギャラリーのサンプル - 対話型形式ですべての XAML コントロールを表示します。

ポップアップ

これは適切なコントロールですか?

UWP と WinUI 2