스와이프

살짝 밀기 명령은 사용자가 앱 내에서 상태를 변경하지 않고도 공통 메뉴 작업에 터치로 쉽게 액세스할 수 있는 상황에 맞는 메뉴의 가속기입니다.

올바른 컨트롤인가요?

스와이프 명령을 사용하면 공간을 절약할 수 있습니다. 여러 항목에서 연속적으로 사용자 동일한 작업을 수행할 수 있는 경우에 유용한 명령입니다. 페이지 내에서 전체 팝업이나 상태 변경이 필요하지 않은 항목에 대해 "빠른 작업"을 제공합니다.

항목 그룹의 크기가 클 때는 살짝 밀기 명령을 사용해야 합니다. 각 항목에는 사용자가 정기적으로 수행하고 싶어하는 작업이 1 ~ 3개 포함되어 있습니다. 이러한 작업은 다음을 포함하지만 이에 국한되지 않습니다.

• 삭제 중
• 표시 또는 보관
• 저장 또는 다운로드
• 회신

스와이프는 어떻게 작동하나요?

UWP 슬쩍 밀기 명령은 두 가지 모드인 Reveal과 Execute를 제공합니다. 이 기능은 위쪽, 아래쪽, 왼쪽, 오른쪽의 4가지 스와이프 방향을 지원합니다.

표시 모드

표시 모드에서 사용자는 항목을 살짝 밀어서 하나 이상의 명령 메뉴를 열고, 명시적으로 명령을 탭하여 이를 실행해야 합니다. 사용자가 항목을 스와이프 후 놓았을 때, 명령을 선택하거나 뒤로 스와이프, 화면 밖을 탭하거나 열린 항목을 화면에서 스크롤하여 메뉴를 닫기 전까지 메뉴는 계속 열려 있습니다.

표시 모드는 보다 안전하고 다양한 용도의 살짝 밀기 모드로, 대다수 유형의 메뉴 작업에 사용할 수 있으며 삭제처럼 파괴적일 수 있는 작업에도 사용할 수 있습니다.

사용자가 메뉴 옵션을 표시하는 열린 휴식 상태에서 하나를 선택하면 해당 항목의 명령이 호출되고 스와이프 컨트롤이 닫힙니다.

실행 모드

실행 모드에서 사용자는 열린 항목을 살짝 미는 동작만으로 한 가지 명령을 표시하고 실행할 수 있습니다. 사용자가 임계값을 넘기기 전에 살짝 밀어 끌고 있는 항목을 놓으면 메뉴가 닫히고 명령이 실행되지 않습니다. 사용자가 항목을 임계값 이상으로 밀고 나서 놓으면 명령이 즉시 실행됩니다.

사용자가 임계값에 도달한 후에도 손가락을 떼지 않거나 살짝 밀기 항목을 당겨 다시 닫으면 명령이 실행되지 않고 해당 항목에 대한 작업이 수행되지 않습니다.

실행 모드는 항목을 살짝 미는 동안 색상 및 레이블 방향을 통해 풍부한 시각적 피드백을 제공합니다.

실행은 사용자가 수행 중인 작업이 가장 흔한 것일 때 가장 유용합니다.

항목 삭제와 같이 보다 파괴적인 작업에서도 사용할 수 있습니다. 그러나 '실행'은 한 방향으로 스와이프하는 동작이 하나만 필요하며, '표시'는 사용자가 명시적으로 버튼을 클릭해야 합니다.

스와이프 방향

스와이프는 위쪽, 아래쪽, 왼쪽, 오른쪽의 모든 주요 방향으로 작동합니다. 각각의 살짝 밀기 방향은 자체적인 살짝 밀기 항목이나 콘텐츠를 보유할 수 있지만, 살짝 밀 수 있는 요소 하나당 한 번에 한 방향 인스턴스만 설정할 수 있습니다.

예를 들어 같은 SwipeControl에서 두 개의 LeftItems를 정의하는 것이 불가능합니다.

권장 사항 및 금지 사항

• FlipViews 또는 Hubs에서 살짝 밀기를 사용하지 마세요. 이 두 가지를 함께 사용할 경우, 서로 충돌하는 밀기 방향 때문에 사용자에게 혼란을 줄 수 있습니다.
• 가로 살짝 밀기와 가로 탐색 또는 세로 살짝 밀기와 세로 탐색을 결합해서 사용하지 마세요.
• 사용자가 스와이프하는 항목이 동일한 작업인지 확인하고, 스와이프할 수 있는 모든 관련 항목에 대해 일관성을 유지하도록 하세요.
• 사용자가 수행하려는 주요 작업에서 스와이프 기능을 사용하세요.
• 동일한 작업이 수차례 반복되는 항목에서 살짝 밀기를 사용하세요.
• 가로로 긴 항목은 가로로 밀기, 세로로 긴 항목은 세로로 밀기를 사용하세요.
• 짧고 간결한 텍스트 레이블을 사용하세요.

스와이프 명령어 만들기

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

스와이프 명령에는 정의해야 할 두 가지 구성 요소가 포함되어 있습니다.

• SwipeControl은 콘텐츠를 감쌉니다. ListView 같은 컬렉션의 경우, 이 요소는 DataTemplate 내에 있습니다.
• 살짝 밀기 메뉴 항목은 살짝 밀기 컨트롤의 방향별 컨테이너인 LeftItems, RightItems, TopItems, 또는 BottomItems에 배치되는 하나 이상의 SwipeItem 개체로 구성됩니다.

스와이프 콘텐츠는 인라인으로 배치되거나 페이지 또는 앱의 리소스 섹션에 정의될 수 있습니다.

몇 가지 텍스트를 중심으로 래핑된 SwipeControl의 간단한 예는 다음과 같습니다. 스와이프 명령을 생성하는 데 필요한 XAML 요소의 계층 구조를 보여줍니다.

<SwipeControl HorizontalAlignment="Center" VerticalAlignment="Center">
    <SwipeControl.LeftItems>
        <SwipeItems>
            <SwipeItem Text="Pin">
                <SwipeItem.IconSource>
                    <SymbolIconSource Symbol="Pin"/>
                </SwipeItem.IconSource>
            </SwipeItem>
        </SwipeItems>
    </SwipeControl.LeftItems>

     <!-- Swipeable content -->
    <Border Width="180" Height="44" BorderBrush="Black" BorderThickness="2">
        <TextBlock Text="Swipe to Pin" Margin="4,8,0,0"/>
    </Border>
</SwipeControl>

지금부터는 목록에서 일반적으로 살짝 밀기 명령을 사용하는 방법을 완벽하게 보여주는 예제를 살펴보겠습니다. 이 예제에서는 실행 모드를 사용하는 삭제 명령과 표시 모드를 사용하는 다른 명령의 메뉴를 설정합니다. 두 명령 집합 모두 페이지의 리소스 섹션에서 정의됩니다. ListView의 항목에 살짝 밀기 명령이 적용됩니다.

먼저, 명령을 나타내는 살짝 밀기 항목을 페이지 수준의 리소스로 만드세요. SwipeItem은 아이콘으로 IconSource를 사용합니다. 또한 리소스로 아이콘을 생성합니다.

<Page.Resources>
    <SymbolIconSource x:Key="ReplyIcon" Symbol="MailReply"/>
    <SymbolIconSource x:Key="DeleteIcon" Symbol="Delete"/>
    <SymbolIconSource x:Key="PinIcon" Symbol="Pin"/>

    <SwipeItems x:Key="RevealOptions" Mode="Reveal">
        <SwipeItem Text="Reply" IconSource="{StaticResource ReplyIcon}"/>
        <SwipeItem Text="Pin" IconSource="{StaticResource PinIcon}"/>
    </SwipeItems>

    <SwipeItems x:Key="ExecuteDelete" Mode="Execute">
        <SwipeItem Text="Delete" IconSource="{StaticResource DeleteIcon}"
                   Background="Red"/>
    </SwipeItems>
</Page.Resources>

스와이프 콘텐츠의 메뉴 항목은 짧고 간결한 텍스트 레이블로 유지해야 합니다. 이러한 작업은 사용자가 단기간에 여러 번 수행하는 기본 작업이어야 합니다.

컬렉션 또는 ListView에서 살짝 밀기 명령이 작동하도록 설정하는 것은 DataTemplate에서 SwipeControl을 정의한다는 점을 제외하면 단순 살짝 밀기(위의 예)를 정의하는 것과 완전히 같기 때문에 컬렉션의 각 항목에 적용됩니다.

여기에는 항목의 DataTemplate에 SwipeControl이 적용된 ListView가 있습니다. LeftItems 및 RightItems 속성은 리소스로 정의한 스와이프 항목을 참조합니다.

<ListView x:Name="sampleList" Width="300">
    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
        </Style>
    </ListView.ItemContainerStyle>
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="x:String">
            <SwipeControl x:Name="ListViewSwipeContainer"
                          LeftItems="{StaticResource RevealOptions}"
                          RightItems="{StaticResource ExecuteDelete}"
                          Height="60">
                <StackPanel Orientation="Vertical">
                    <TextBlock Text="{x:Bind}" FontSize="18"/>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit..." FontSize="12"/>
                    </StackPanel>
                </StackPanel>
            </SwipeControl>
        </DataTemplate>
    </ListView.ItemTemplate>
    <x:String>Item 1</x:String>
    <x:String>Item 2</x:String>
    <x:String>Item 3</x:String>
    <x:String>Item 4</x:String>
    <x:String>Item 5</x:String>
</ListView>

호출된 스와이프 명령을 처리

스와이프 명령에 대해 작업을 수행하려면 호출 이벤트를 처리합니다. (사용자가 명령을 호출하는 방법에 대한 자세한 내용은 이 문서 앞부분의 살짝 밀기가 어떻게 작동하나요? 섹션을 참조하세요.) 일반적으로 살짝 밀기 명령은 ListView 또는 목록과 유사한 시나리오에 있습니다. 이 경우, 명령이 호출되면 스와이프된 항목에 대해 작업을 수행해야 합니다.

이전에 생성한 스와이프 항목인 삭제에서 호출된 이벤트를 처리하는 방법은 다음과 같습니다.

<SwipeItems x:Key="ExecuteDelete" Mode="Execute">
    <SwipeItem Text="Delete" IconSource="{StaticResource DeleteIcon}"
               Background="Red" Invoked="Delete_Invoked"/>
</SwipeItems>

데이터 항목은 SwipeControl의 DataContext입니다. 아래 예시와 같이, 코드에서 이벤트 인수에서 SwipeControl.DataContext 속성을 가져와 스와이프된 항목에 접근할 수 있습니다.

 private void Delete_Invoked(SwipeItem sender, SwipeItemInvokedEventArgs args)
 {
     sampleList.Items.Remove(args.SwipeControl.DataContext);
 }

이러한 특정한 경우에는 목록에서 항목이 삭제되었기 때문에 스와이프한 항목의 최종 시각적 상태는 중요하지 않습니다. 그러나 작업을 수행한 다음에 다시 살짝 밀기를 축소하고 싶은 경우에는 BehaviorOnInvoked 속성을 SwipeBehaviorOnInvoked 열거값 중 하나로 설정할 수 있습니다.

• 자동
  • 실행 모드에서는 살짝 밀기를 통해 연 항목이 호출 시에도 열린 상태로 유지됩니다.
  • 표시 모드에서는 열려 있는 스와이프 항목이 사용될 때 축소됩니다.
• 닫기
  • 항목이 실행되면 스와이프 컨트롤은 모드에 관계없이 항상 축소되어 기본 상태로 돌아갑니다.
• 스테이스테이오픈(RemainOpen)
  • 항목이 호출되면 살짝 밀기 컨트롤은 모드에 관계없이 항상 열린 상태로 유지됩니다.

여기에서 회신 스와이프 항목은 호출된 후 닫히도록 설정됩니다.

<SwipeItem Text="Reply" IconSource="{StaticResource ReplyIcon}"
           Invoked="Reply_Invoked"
           BehaviorOnInvoked = "Close"/>

UWP 및 WinUI 2

UWP 앱을 위한 SwipeControl은 WinUI 2의 일부로 포함됩니다. 설치 지침을 비롯한 자세한 내용은 WinUI 2를 참조하세요. 이 컨트롤용 API는 Windows.UI.Xaml.Controls (UWP) 및 Microsoft.UI.Xaml.Controls (WinUI) 네임스페이스에 모두 존재합니다.

최신 WinUI 2를 사용하여 모든 컨트롤에 대한 최신 스타일, 템플릿 및 기능을 가져오는 것이 좋습니다.

이 문서의 코드를 WinUI 2와 함께 사용하려면 XAML의 별칭(여기서는 muxc 사용)을 사용하여 프로젝트에 포함된 Windows UI 라이브러리 API를 표현합니다. 자세한 내용은 WinUI 2 시작을 참조하세요.

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:SwipeControl />
<muxc:SwipeItem />

관련된 문서

• 목록 보기 및 그리드 보기
• 항목 컨테이너 및 템플릿
• 당겨서 새로 고침