플라이아웃

아티클
03/22/2024

플라이아웃은 빠른 해제 컨테이너로 임의의 UI를 내용으로 표시할 수 있습니다. 플라이아웃에 중첩된 환경을 만들기 위한 다른 플라이아웃이나 상황에 맞는 메뉴가 포함될 수 있습니다.

올바른 컨트롤인가요?

플라이아웃을 툴팁 또는 컨텍스트 메뉴대신 사용하지 마세요. 툴팁을 사용하여 지정된 시간 후에 사라지는 간단한 설명을 표시합니다. 복사 및 붙여넣기와 같은 UI 요소와 관련된 상황에 맞는 작업을 위해 컨텍스트 메뉴를 사용합니다.

플라이아웃을 사용해야 할 경우와 대화 상자(비슷한 컨트롤)를 사용해야 할 경우에 대한 권장 사항을 보려면 대화 상자 및 플라이아웃을 참조하세요.

UWP 및 WinUI 2

Important

이 문서의 정보 및 예제는 Windows 앱 SDK 및 WinUI 3를 사용하는 앱에 최적화되어 있지만 WinUI 2를 사용하는 UWP 앱에도 대체로 적용 가능합니다. 플랫폼별 정보 및 예제는 UWP API 참조를 확인하세요.

이 섹션에는 UWP 또는 WinUI 2 앱에서 컨트롤을 사용하는 데 필요한 정보를 다룹니다.

이 컨트롤용 API는 Windows.UI.Xaml.Controls 네임스페이스에 있습니다.

UWP API: 플라이아웃 클래스, Button.Flyout 속성
WinUI 2 갤러리 앱을 열고 작동 중인 Flyout을 확인합니다. WinUI 2 갤러리 앱에는 대부분의 WinUI 2 컨트롤, 특징, 기능의 대화형 예제가 포함되어 있습니다. Microsoft Store에서 앱을 다운로드하거나 GitHub에서 소스 코드를 가져오세요.

최신 WinUI 2를 사용하여 모든 컨트롤에 적용되는 최신 스타일과 템플릿을 가져오는 것이 좋습니다. WinUI 2.2 이상에는 둥근 모서리를 사용하는 이 컨트롤의 새 템플릿이 포함되어 있습니다. 자세한 내용은 모서리 반경을 참조하세요.

중요 API: Flyout 클래스, Button.Flyout 속성

WinUI 3 갤러리 앱을 열고 작동 중인 Flyout을 확인합니다.

WinUI 3 갤러리 앱에는 대부분의 WinUI 3 컨트롤, 특징, 기능의 대화형 예제가 포함되어 있습니다. 앱을 Microsoft Store 에서 다운로드하거나 GitHub에서 소스 코드를 가져오세요.

플라이아웃은 특정 컨트롤에 연결됩니다. 플라이아웃이 표시되는 (위쪽, 왼쪽, 아래쪽, 오른쪽, 또는 전체)위치를 지정하려면 배치 속성을 사용합니다. 만약 전체 배치 모드를 선택하면, 앱이 플라이아웃을 확대하고 앱 창 내의 가운데에 플라이아웃을 배치합니다. Button과 같은 일부 컨트롤은 플라이아웃이나 상황에 맞는 메뉴를 연결하는 데 사용할 수 있는 Flyout 속성을 제공합니다.

다음 예제에서는 버튼을 누를 때 일부 텍스트를 표시하는 간단한 플라이아웃을 만듭니다.

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

3m 환경을 위한 플라이아웃 스타일 지정

플라이아웃과 같은 빠른 해제 컨트롤은 해제될 때까지 키보드 및 게임 패드 포커스를 임시 UI 내에 트래핑합니다. 이 동작에 대한 시각 신호를 제공하기 위해 Xbox의 빠른 해제 컨트롤은 범위를 벗어난 UI의 대비와 가시성을 줄이는 오버레이를 그립니다. 이 동작은 LightDismissOverlayMode 속성으로 수정할 수 있습니다. 기본적으로 플라이아웃은 Xbox에 빠른 해제 오버레이를 그리지만 다른 디바이스 패밀리에는 그리지 않습니다. 그러나 앱에서 오버레이가 항상 설정 또는 항상 해제 상태가 되도록 선택할 수 있습니다.

흐리게 표시 오버레이를 포함한 플라이아웃

<MenuFlyout LightDismissOverlayMode="On">

빠른 해제 동작

다음을 포함한 빠른 해제 동작으로 플라이아웃을 닫을 수 있습니다.

플라이아웃 밖 탭
Esc 키보드 키 누르기
하드웨어 또는 소프트웨어 시스템의 뒤로 단추 누르기
게임 패드 B 단추 누르기

탭으로 해제 시 이 제스처는 대개 포함되고 UI 아래에 전달되지 않습니다. 예를 들어, 열려 있는 플라이아웃 뒤에 단추가 표시된 경우 사용자의 첫 번째 탭으로 플라이아웃이 해제되지만 이 단추가 활성화되지는 않습니다. 단추를 누르려면 두 번째 탭이 필요합니다.

플라이아웃에 대한 입력 통과 요소로 단추를 지정하여 이 동작을 변경할 수 있습니다. 플라이아웃이 위에 설명된 빠른 해제 작업의 결과로 닫히고 탭 이벤트를 지정된 OverlayInputPassThroughElement에 전달합니다. 이러한 동작을 채택하여 기능적으로 비슷한 항목에 대한 사용자 상호 작용 속도를 높일 수 있습니다. 앱에 즐겨찾기 컬렉션이 있고 컬렉션의 각 항목에 연결된 플라이아웃이 포함된 경우 사용자가 빠르게 여러 플라이아웃과 연달아 상호 작용할 것으로 예상할 수 있습니다.

참고 항목

파괴적 작업을 유발하는 오버레이 입력 통과 요소를 지정하지 않도록 주의하세요. 사용자는 기본 UI를 활성화하지 않는 빠른 해제 작업에 익숙해졌습니다. 닫기, 삭제 또는 비슷하게 파괴적인 버튼이 예기치 않은 파괴적 동작을 피하기 위해 있는 빠른 해제를 활성화되면 안 됩니다.

다음 예에서는 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);
{

샘플 코드 가져오기

WinUI 갤러리 샘플 - 대화형 형식으로 모든 XAML 컨트롤을 보여줍니다.

다음을 통해 공유

플라이아웃

올바른 컨트롤인가요?

UWP 및 WinUI 2