🐦

WinUI3のFlyoutのスタイルを変更する

に公開
.NET
C#
XAML
WinUI 3
tech

はじめに

WinUI3のFlyoutのスタイル指定方法が他のコンポーネントに比べて少し特殊だったので備忘録です。結論をお急ぎの方はFlyout自体のスタイルの変更方法セクションへ。

Flyoutとは

WinUI3ではButtonにFlyout属性を付けることができ、クリック時でポップアップ（Flyout）が表示されるようにできます。しかもXAMLだけの実装でOK。

flyout-example2

<Button>
    Additional Info1
    <Button.Flyout>
        <Flyout Placement="Bottom">
            <TextBlock TextWrapping="WrapWholeWords">
                こんにちは 🎉
            </TextBlock>
        </Flyout>
    </Button.Flyout>
</Button>

デフォルトスタイルの問題点

大変便利なのですが、下記のように長い文章を表示させようとすると、TextWrappingを有効にしていても改行されずに横スクロールされてしまいます。

flyout-example1

また、FlyoutのContentでレイアウト系のコンポーネントを入れて幅を固定させようとしても、Flyout自体の幅は特定の幅までしか広がらず、スクロールバーに変わってしまいます。

flyout-example3

Flyout自体のスタイルの変更方法

実はFlyout自体はコントロールやUIElementでは無いのでStyle適用のためのプロパティが存在しません[1]。代わりにFlyoutのコンテンツ表示を担当するFlyoutPresenterのスタイルを変更する必要があります。

例えば、下記例では水平スクロールを無効化してテキストをMaxWidthで折り返すように実装しています。ついでにPaddingも指定しています。

 <Button>
    Additional Info4
    <Button.Flyout>
        <Flyout Placement="Bottom">
+            <Flyout.FlyoutPresenterStyle>
+                <Style TargetType="FlyoutPresenter">
+                    <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled" />
+                    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
+                    <Setter Property="MaxWidth" Value="400" />
+                    <Setter Property="Padding" Value="10" />
+                </Style>
+            </Flyout.FlyoutPresenterStyle>
            <TextBlock TextWrapping="WrapWholeWords">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
                Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
            </TextBlock>
        </Flyout>
    </Button.Flyout>
 </Button>

flyout-example4

変更可能なプロパティ一覧は下記を参考に。

https://learn.microsoft.com/ja-jp/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.flyoutpresenter?view=windows-app-sdk-1.6#properties

余談（Backdropの指定）

FlyoutにはSystemBackdropプロパティも存在します。下記のように設定することでポップアップの背景をMicaやAcrylicにできるはずです。以前試した際はうまく反映されなかった気がするのですが、一応共有です。

 <Button>
    Additional Info4
    <Button.Flyout>
        <Flyout Placement="Bottom">
            <Flyout.FlyoutPresenterStyle>
                <Style TargetType="FlyoutPresenter">
                    <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled" />
                    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
                    <Setter Property="TabNavigation" Value="Cycle" />
                    <Setter Property="MaxWidth" Value="600" />
                    <Setter Property="Padding" Value="10" />
                </Style>
            </Flyout.FlyoutPresenterStyle>
+            <Flyout.SystemBackdrop>
+                <MicaBackdrop />
+            </Flyout.SystemBackdrop>
            <TextBlock TextWrapping="WrapWholeWords">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
                Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
            </TextBlock>
        </Flyout>
    </Button.Flyout>
 </Button>
脚注

  1. https://learn.microsoft.com/ja-jp/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.flyout.flyoutpresenterstyle?view=windows-app-sdk-1.6#-- ↩︎

GitHubで編集を提案

Discussion