[C#/WINUI3/.NET8] Flyout 엘리먼트 : FlyoutPresenterStyle 속성을 사용해 플라이아웃 프리젠터 스타일 설정하기

■ Flyout 엘리먼트의 FlyoutPresenterStyle 속성을 사용해 플라이아웃 프리젠터 스타일을 설정하는 방법을 보여준다.

※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다.
※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType 태그를 None으로 추가했다.

▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8"?>
<Page x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Button
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        Padding="10"
        Content="Button">
        <Button.Flyout>
            <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>
        </Button.Flyout>
    </Button>
</Page>

<?xml version="1.0" encoding="utf-8"?>

<Page x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Button

HorizontalAlignment="Center"

VerticalAlignment="Center"

Padding="10"

Content="Button">

<Button.Flyout>

<Flyout.FlyoutPresenterStyle>

</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>

</Button.Flyout>

</Button>

</Page>

TestProject.zip