Flyouts

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

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

• ヒントやコンテキスト メニューの代わりにフライアウトを使用しないでください。 ツールヒントを使用して、指定した時間が経過すると非表示になる短い説明を表示します。 コピーや貼り付けなど、UI 要素に関連するコンテキスト アクションにはコンテキスト メニューを使用します。

ポップアップを使用するタイミングとダイアログを使用するタイミング (同様のコントロール) に関する推奨事項については、「 ダイアログとポップアップ」を参照してください。

ポップアップを作る

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

フライアウトは特定のコントロールに付随しています。 Placement プロパティを使用すると、ポップアップが表示される場所 (Top、Left、Bottom、Right、Full) を指定できます。 完全配置モードを選択すると、アプリはポップアップを拡大し、アプリ ウィンドウ内の中央に配置します。 Button などの一部のコントロールには、ポップアップまたはコンテキスト メニューを関連付けるために使用できるポップアップ プロパティが用意されています。

次の使用例は、ボタンが押されたときにテキストを表示する単純なポップアップを作成します。

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

コントロールにポップアップ プロパティがない場合は、代わりに 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上にライトディスミスオーバーレイを表示しますが、他のデバイスファミリでは表示しません。ただし、アプリはオーバーレイを常にOnまたは常にOffに設定することを選ぶことができます。

<MenuFlyout LightDismissOverlayMode="On">

軽い無視動作

フライアウトは、すぐに軽く無視するアクションを使用して閉じることができます。

• フライアウトの外側をタップする
• エスケープ キーボード キーを押す
• ハードウェアまたはソフトウェア システムの [戻る] ボタンを押す
• ゲームパッド B ボタンを押す

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

この動作を変更するには、ポップアップの入力パススルー要素としてボタンを指定します。 ポップアップは、前述の軽い無視アクションの結果として閉じられ、指定された OverlayInputPassThroughElementにタップ イベントも渡されます。 この動作を採用して、機能的に似た項目に対するユーザー操作を高速化することを検討してください。 アプリにお気に入りのコレクションがあり、コレクション内の各項目に添付されたポップアップが含まれている場合は、ユーザーが複数のポップアップを連続して操作することを期待するのが妥当です。

次の例では、FavoritesBar 内の 3 つのボタンすべてが最初のタップ時にアクティブになります。

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

関連資料

• ツールヒント
• メニューとコンテキスト メニュー
• フライアウト クラス
• ContentDialog クラスの を クラスに変換する