UWP XAML <Flyout/> 아주 작은 팝업 창 사용 방법

Flyout xaml 마크업은 팝업창의 일종이다. Flyout 팝업창을 사용할 컨트롤이 있다면 연결을 해주면 된다. 이후 Flyout xaml 내에 표시할 정보를 나열해 주면 된다. 독립적으로 사용할 수 없으며, Flyout 팝업창은 사용이 필요한 컨트롤에 연결하여 사용해야 한다. 별도의 닫기 기능이 없으며 Flyout xaml 마크업 범위를 넘어간 곳을 클릭하거나 다른 키보드를 클릭하면 사라진다.

UWP XAML <Flyout/> 아주 작은 팝업 창 사용 방법

프로그램은 사용하는 사람과 상호작용을 통해 편의성을 제공한다. 이런 상호작용 중 대표적인 것이 팝업창이다.

UWP 의 <Flyout/> xaml 마크업은 작고 가벼운 경량화된 팝업창으로 소개하고 있다.

경량화의 의미가 조금 생소하지만 MSDN의 소개를 보면 어쨌든 가볍게 사용할 수 있음을 보여준다.

다른 팝업창에 비해 Flyout 마크업으로 지정된 것들은 일시적 팝업창을 표시하여 사용자에 추가적인 정보를 줄 수 있다.

Flyout 의 특징이 있다면 다른 팝업창들에 비해 Flyout 의 범위를 벗어난 곳을 클릭하거나 다른 키를 누르면 사라진다.

Flyout 팝업 창

일시적인 정보전달로 사용되는 Flyout 팝업창은 사용법이 조금 독특하다.

Flyout 을 사용할 xaml 컨트롤이 필요하며, 이것은 Flyout xaml 컨트롤이 독립적으로 사용되지 못함을 의미한다.

보통은 이미지나 특정 콘텐츠의 문장 혹은 버튼과 같은 곳에 연결되어 사용될 수 있다.

아래는 버튼에 연결된 Flyout 팝업창의 사용을 보여준다.

Flyout xaml 마크업을 사용하기 위해선 먼저 사용할 컨트롤에 연결을 해줘야 한다.

사용법의 예로 Button xaml 를 사용했지만 실제 샘플 등을 찾아보면 다른 컨트롤에도 연결되어 사용되고 있는 것을 확인할 수 있다.

<Button Content="화면표시_문자열">
	<Button.Flyout>
		<Flyout>
			<!--
				xaml 마크업 코드
			-->
		</Flyout>
	</Button.Flyout>
</Button>

전체 코드

위의 사용법을 이용하여 UWP xaml 코드를 만들어 본다.

<Flyout /> xaml 마크업은 팝업창처럼 사용되며, 사용자에 부가적이고 추가적인 정보를 제공할 수 있다.

Flyout 팝업창의 범위를 넘어가는 곳을 클릭하거 ESC 키 등을 클릭하면 창이 닫히는 효과를 볼 수 있다.

하지만 Flyout 팝업창은 독립적으로 사용할 수 없으며 연결할 컨트롤이 반드시 필요하다.

아래는 Button 에 Flyout xaml 마크업을 연결하고 Flyout 팝업창에 이미지를 표시하도록 하고 있다.

<Page
    x:Class="UWPAppTutorials.Ctl_FlyoutPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UWPAppTutorials"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    
    <StackPanel Orientation="Horizontal" VerticalAlignment="Top">
        <Button Content="1번 이미지">
            <Button.Flyout>
                <Flyout>
                    <Image Source="/Assets/flipview/image01.png" />
                </Flyout>
            </Button.Flyout>
        </Button>
        <Button Content="2번 이미지">
            <Button.Flyout>
                <Flyout>
                    <Image Source="/Assets/flipview/image02.png" />
                </Flyout>
            </Button.Flyout>
        </Button>
    </StackPanel>
    
</Page>

결과화면을 보자.

버튼이 2개 있으며 각각의 버튼을 클릭하면 이미지가 팝업창처럼 나타난다.

이미지 범위를 벗어난 곳을 클릭하면 이미지는 사라진다.

이 이미지가 나타나는 부분이 Flyout xaml 부분이다.

또한, Flyout 팝업창이 나타나도록 하기 위해 Button xaml 마크업에 연결하여 사용하는 것을 보여준다.