Xamarin.Forms SwipeView

  • 아티클

Download Sample 샘플 다운로드

콘텐츠 SwipeView 항목을 래핑하고 살짝 밀기 제스처로 표시되는 상황에 맞는 메뉴 항목을 제공하는 컨테이너 컨트롤입니다.

Screenshot of SwipeView swipe items in a CollectionView, on iOS and Android

SwipeView는 다음 속성을 정의합니다.

  • LeftItems- 컨트롤이 왼쪽에서 살짝 밀면 호출할 수 있는 살짝 밀기 항목을 나타내는 형식 SwipeItems입니다.
  • RightItems컨트롤이 오른쪽에서 살짝 밀면 호출할 수 있는 살짝 밀기 항목을 나타내는 형식 SwipeItems의 입니다.
  • TopItems- 컨트롤을 위쪽에서 아래로 살짝 밀 때 호출할 수 있는 살짝 밀기 항목을 나타내는 형식 SwipeItems입니다.
  • BottomItems- 컨트롤을 아래쪽에서 위로 살짝 밀 때 호출할 수 있는 살짝 밀기 항목을 나타내는 형식 SwipeItems입니다.
  • Threshold- 살짝 밀기 제스처를 트리거하여 살짝 밀기 항목을 완전히 표시하는 디바이스 독립적 단위의 수를 나타내는 형식 double입니다.

이러한 속성은 BindableProperty 개체에서 지원하며, 따라서 데이터 바인딩의 대상이 될 수 있고 스타일이 지정될 수 있습니다.

또한 SwipeView 클래스에서 ContentView 속성을 상속합니다Content. Content 속성은 SwipeView 클래스의 콘텐츠 속성이므로 명시적으로 설정할 필요가 없습니다.

또한 클래스는 SwipeView 세 개의 이벤트를 정의합니다.

  • SwipeStarted 는 살짝 밀기 시작할 때 발생합니다. SwipeStartedEventArgs 이 이벤트와 함께 제공되는 개체에는 SwipeDirection 형식SwipeDirection의 속성이 있습니다.
  • SwipeChanging 은 살짝 밀기 이동하면 발생합니다. SwipeChangingEventArgs 이 이벤트와 함께 제공되는 개체에는 SwipeDirection 형식의 속성과 형식SwipeDirectiondouble의 속성이 Offset 있습니다.
  • SwipeEnded 는 살짝 밀기 종료 시 발생합니다. SwipeEndedEventArgs 이 이벤트와 함께 제공되는 개체에는 SwipeDirection 형식의 속성과 형식SwipeDirectionbool의 속성이 IsOpen 있습니다.

또한 SwipeView 프로그래밍 방식으로 살짝 밀기 항목을 각각 열고 닫는 메서드와 포함 OpenClose 됩니다.

참고 항목

SwipeView 에는 iOS 및 Android에서 플랫폼별 플랫폼이 있으며, 이 플랫폼은 을 열 SwipeView때 사용되는 전환을 제어합니다. 자세한 내용은 iOS의 SwipeView 살짝 밀기 전환 모드 및 Android의 SwipeView 살짝 밀기 전환 모드를 참조하세요.

SwipeView 만들기

A SwipeView 는 래핑되는 SwipeView 콘텐츠와 살짝 밀기 제스처로 표시되는 살짝 밀기 항목을 정의해야 합니다. 살짝 밀기 항목은 네 방향 컬렉션 LeftItems중 하나(, BottomItemsRightItemsTopItems또는 )에 배치되는 하나 이상의 SwipeItem 개체입니다.SwipeView

다음 예제에서는 XAML에서 인스턴스화하는 SwipeView 방법을 보여줍니다.

<SwipeView>
    <SwipeView.LeftItems>
        <SwipeItems>
            <SwipeItem Text="Favorite"
                       IconImageSource="favorite.png"
                       BackgroundColor="LightGreen"
                       Invoked="OnFavoriteSwipeItemInvoked" />
            <SwipeItem Text="Delete"
                       IconImageSource="delete.png"
                       BackgroundColor="LightPink"
                       Invoked="OnDeleteSwipeItemInvoked" />
        </SwipeItems>
    </SwipeView.LeftItems>
    <!-- Content -->
    <Grid HeightRequest="60"
          WidthRequest="300"
          BackgroundColor="LightGray">
        <Label Text="Swipe right"
               HorizontalOptions="Center"
               VerticalOptions="Center" />
    </Grid>
</SwipeView>

해당하는 C# 코드는 다음과 같습니다.

// SwipeItems
SwipeItem favoriteSwipeItem = new SwipeItem
{
    Text = "Favorite",
    IconImageSource = "favorite.png",
    BackgroundColor = Color.LightGreen
};
favoriteSwipeItem.Invoked += OnFavoriteSwipeItemInvoked;

SwipeItem deleteSwipeItem = new SwipeItem
{
    Text = "Delete",
    IconImageSource = "delete.png",
    BackgroundColor = Color.LightPink
};
deleteSwipeItem.Invoked += OnDeleteSwipeItemInvoked;

List<SwipeItem> swipeItems = new List<SwipeItem>() { favoriteSwipeItem, deleteSwipeItem };

// SwipeView content
Grid grid = new Grid
{
    HeightRequest = 60,
    WidthRequest = 300,
    BackgroundColor = Color.LightGray
};
grid.Children.Add(new Label
{
    Text = "Swipe right",
    HorizontalOptions = LayoutOptions.Center,
    VerticalOptions = LayoutOptions.Center
});

SwipeView swipeView = new SwipeView
{
    LeftItems = new SwipeItems(swipeItems),
    Content = grid
};

이 예제에서 SwipeView 콘텐츠는 다음을 Grid 포함하는 콘텐츠입니다 Label.

Screenshot of SwipeView content, on iOS and Android

살짝 밀기 항목은 콘텐츠에 대한 SwipeView 작업을 수행하는 데 사용되며 컨트롤이 왼쪽에서 살짝 밀면 표시됩니다.

Screenshot of SwipeView swipe items, on iOS and Android

기본적으로 살짝 밀기 항목은 사용자가 탭할 때 실행됩니다. 그러나 이 동작을 변경할 수 있습니다. 자세한 내용은 살짝 밀기 모드를 참조 하세요.

살짝 밀기 항목이 실행되면 살짝 밀기 항목이 숨겨지고 콘텐츠가 SwipeView 다시 표시됩니다. 그러나 이 동작을 변경할 수 있습니다. 자세한 내용은 살짝 밀기 동작을 참조 하세요.

참고 항목

콘텐츠 살짝 밀기 및 살짝 밀기 항목을 인라인으로 배치하거나 리소스로 정의할 수 있습니다.

항목 살짝 밀기

LeftItems, RightItems, TopItems및 BottomItems 컬렉션은 모두 형식SwipeItems입니다. SwipeItems 클래스는 다음 속성을 정의합니다.

  • Mode- 살짝 밀기 상호 작용의 효과를 나타내는 형식 SwipeMode입니다. 살짝 밀기 모드에 대한 자세한 내용은 살짝 밀기 모드를 참조하세요.
  • SwipeBehaviorOnInvoked- 살짝 밀기 항목이 SwipeView 호출된 후 동작하는 방법을 나타내는 형식SwipeBehaviorOnInvoked의 입니다. 살짝 밀기 동작에 대한 자세한 내용은 살짝 밀기 동작을 참조 하세요.

이러한 속성은 BindableProperty 개체에서 지원하며, 따라서 데이터 바인딩의 대상이 될 수 있고 스타일이 지정될 수 있습니다.

각 살짝 밀기 항목은 네 SwipeItems 방향 컬렉션 중 하나에 배치되는 개체로 SwipeItem 정의됩니다. 클래스는 SwipeItem 클래스에서 MenuItem 파생되고 다음 멤버를 추가합니다.

  • BackgroundColor 살짝 밀기 항목의 배경색을 정의하는 형식Color의 속성입니다. 이 속성은 바인딩 가능한 속성에 의해 지원됩니다.
  • Invoked 살짝 밀기 항목이 실행될 때 발생하는 이벤트입니다.

Important

클래스는 MenuItem , CommandParameterIconImageSource및 Text.를 비롯한 Command여러 속성을 정의합니다. 개체에서 SwipeItem 이러한 속성을 설정하여 모양을 정의하고 살짝 밀기 항목이 호출될 때 실행되는 속성을 정의 ICommand 할 수 있습니다. 자세한 내용은 MenuItem을 참조 Xamarin.Forms 하세요.

다음 예제에서는 컬렉션에 있는 두 개의 SwipeItem 개체를 LeftItems 보여줍니다.SwipeView

<SwipeView>
    <SwipeView.LeftItems>
        <SwipeItems>
            <SwipeItem Text="Favorite"
                       IconImageSource="favorite.png"
                       BackgroundColor="LightGreen"
                       Invoked="OnFavoriteSwipeItemInvoked" />
            <SwipeItem Text="Delete"
                       IconImageSource="delete.png"
                       BackgroundColor="LightPink"
                       Invoked="OnDeleteSwipeItemInvoked" />
        </SwipeItems>
    </SwipeView.LeftItems>
    <!-- Content -->
</SwipeView>

각 SwipeItem 모양은 , IconImageSource및 BackgroundColor 속성의 Text조합으로 정의됩니다.

Screenshot of SwipeView swipe items, on iOS and Android

탭 SwipeItem 하면 해당 Invoked 이벤트가 발생하며 등록된 이벤트 처리기에서 처리됩니다. 또한 MenuItem.Clicked 이벤트가 발생합니다. Command 또는 호출될 때 SwipeItem 실행할 구현으로 ICommand 속성을 설정할 수 있습니다.

참고 항목

모양 SwipeItem 이 or IconImageSource 속성을 사용하여 Text 정의되는 경우 콘텐츠는 항상 가운데에 배치됩니다.

살짝 밀기 항목을 개체로 SwipeItem 정의하는 것 외에도 사용자 지정 살짝 밀기 항목 보기를 정의할 수도 있습니다. 자세한 내용은 사용자 지정 살짝 밀기 항목을 참조 하세요.

살짝 밀기 방향

SwipeView는 개체가 추가되는 방향 컬렉션 SwipeItem 에 의해 SwipeItems 정의되는 살짝 밀기 방향을 사용하여 네 가지 살짝 밀기 방향을 지원합니다. 각 살짝 밀기 방향은 고유한 살짝 밀기 항목을 보유할 수 있습니다. 예를 들어 다음 예제에서는 살짝 밀기 항목이 SwipeView 살짝 밀기 방향에 따라 달라지는 것을 보여줍니다.

<SwipeView>
    <SwipeView.LeftItems>
        <SwipeItems>
            <SwipeItem Text="Delete"
                       IconImageSource="delete.png"
                       BackgroundColor="LightPink"
                       Command="{Binding DeleteCommand}" />
        </SwipeItems>
    </SwipeView.LeftItems>
    <SwipeView.RightItems>
        <SwipeItems>
            <SwipeItem Text="Favorite"
                       IconImageSource="favorite.png"
                       BackgroundColor="LightGreen"
                       Command="{Binding FavoriteCommand}" />
            <SwipeItem Text="Share"
                       IconImageSource="share.png"
                       BackgroundColor="LightYellow"
                       Command="{Binding ShareCommand}" />
        </SwipeItems>
    </SwipeView.RightItems>
    <!-- Content -->
</SwipeView>

이 예제에서는 SwipeView 콘텐츠를 오른쪽 또는 왼쪽으로 살짝 밀 수 있습니다. 오른쪽으로 살짝 밀면 삭제 살짝 밀기 항목이 표시되고 왼쪽으로 살짝 밀면 즐겨찾기 및 공유 살짝 밀기 항목이 표시됩니다.

Warning

방향 SwipeItems 컬렉션의 인스턴스는 한 번에 한 번에 SwipeView한 개만 설정할 수 있습니다. 따라서 .에 두 SwipeView개의 LeftItems 정의를 사용할 수 없습니다.

SwipeStarted, SwipeChanging및 SwipeEnded 이벤트는 이벤트 인수의 SwipeDirection 속성을 통해 살짝 밀기 방향을 보고합니다. 이 속성은 4개의 멤버로 구성된 열거형인 형식 SwipeDirection입니다.

  • Right 는 오른쪽 살짝 밀기 발생을 나타냅니다.
  • Left 는 왼쪽 살짝 밀기 발생을 나타냅니다.
  • Up 는 위쪽으로 살짝 밀기 발생했음을 나타냅니다.
  • Down 는 아래로 살짝 밀기 발생했음을 나타냅니다.

살짝 밀기 임계값

SwipeView 에는 살짝 밀기 제스처를 Threshold 트리거하여 살짝 밀기 항목을 완전히 표시하는 디바이스 독립적 단위 수를 나타내는 형식 double의 속성이 포함되어 있습니다.

다음 예제에서는 속성을 설정하는 Threshold 방법을 보여줍니다SwipeView.

<SwipeView Threshold="200">
    <SwipeView.LeftItems>
        <SwipeItems>
            <SwipeItem Text="Favorite"
                       IconImageSource="favorite.png"
                       BackgroundColor="LightGreen" />
        </SwipeItems>
    </SwipeView.LeftItems>
    <!-- Content -->
</SwipeView>

이 예제에서는 SwipeView 완전히 표시되기 전에 SwipeItem 디바이스 독립적 단위 200개에 대해 살짝 밀어야 합니다.

참고 항목

현재 이 Threshold 속성은 iOS 및 Android에서만 구현됩니다.

살짝 밀기 모드

클래스에는 SwipeItemsMode 살짝 밀기 상호 작용의 효과를 나타내는 속성이 있습니다. 이 속성은 열거형 멤버 중 SwipeMode 하나로 설정해야 합니다.

  • Reveal 는 살짝 밀기에서 살짝 밀기 항목을 표시한다는 것을 나타냅니다. SwipeItems.Mode 속성의 기본값입니다.
  • Execute 는 살짝 밀기에서 살짝 밀기 항목을 실행한다는 것을 나타냅니다.

표시 모드에서는 사용자가 살짝 SwipeView 밀어 하나 이상의 살짝 밀기 항목으로 구성된 메뉴를 열고 살짝 밀기 항목을 명시적으로 탭하여 실행해야 합니다. 살짝 밀기 항목이 실행되면 살짝 밀기 항목이 닫히고 콘텐츠가 SwipeView 다시 표시됩니다. 실행 모드에서 사용자는 한 SwipeView 번 더 살짝 밀기 항목으로 구성된 메뉴를 열려면 자동으로 실행됩니다. 실행 후 살짝 밀기 항목이 닫히고 콘텐츠가 SwipeView 다시 표시됩니다.

다음 예제에서는 실행 모드를 SwipeView 사용하도록 구성된 것을 보여줍니다.

<SwipeView>
    <SwipeView.LeftItems>
        <SwipeItems Mode="Execute">
            <SwipeItem Text="Delete"
                       IconImageSource="delete.png"
                       BackgroundColor="LightPink"
                       Command="{Binding DeleteCommand}" />
        </SwipeItems>
    </SwipeView.LeftItems>
    <!-- Content -->
</SwipeView>

이 예제에서는 SwipeView 콘텐츠를 오른쪽으로 살짝 밀어 즉시 실행되는 살짝 밀기 항목을 표시할 수 있습니다. 실행 후 콘텐츠가 SwipeView 다시 표시됩니다.

살짝 밀기 동작

클래스에는 SwipeItemsSwipeBehaviorOnInvoked 살짝 밀기 항목이 SwipeView 호출된 후 동작하는 방법을 나타내는 속성이 있습니다. 이 속성은 열거형 멤버 중 SwipeBehaviorOnInvoked 하나로 설정해야 합니다.

  • Auto는 표시 모드 SwipeView 에서 살짝 밀기 항목이 호출된 후 닫히며 실행 모드 SwipeView 에서는 살짝 밀기 항목이 호출된 후 다시 기본 열립니다. SwipeItems.SwipeBehaviorOnInvoked 속성의 기본값입니다.
  • Close 는 SwipeView 살짝 밀기 항목이 호출된 후 닫히기를 나타냅니다.
  • RemainOpen는 살짝 밀기 SwipeView 항목이 호출된 후 다시 기본 열린 것을 나타냅니다.

다음 예제에서는 살짝 밀기 항목을 호출한 후 다시 열도록 구성된 기본 보여줍니다SwipeView.

<SwipeView>
    <SwipeView.LeftItems>
        <SwipeItems SwipeBehaviorOnInvoked="RemainOpen">
            <SwipeItem Text="Favorite"
                       IconImageSource="favorite.png"
                       BackgroundColor="LightGreen"
                       Invoked="OnFavoriteSwipeItemInvoked" />
            <SwipeItem Text="Delete"
                       IconImageSource="delete.png"
                       BackgroundColor="LightPink"
                       Invoked="OnDeleteSwipeItemInvoked" />
        </SwipeItems>
    </SwipeView.LeftItems>
    <!-- Content -->
</SwipeView>

사용자 지정 살짝 밀기 항목

사용자 지정 살짝 밀기 항목은 형식으로 SwipeItemView 정의할 수 있습니다. 클래스는 SwipeItemView 클래스에서 ContentView 파생되고 다음 속성을 추가합니다.

  • Command- 살짝 밀기 항목을 탭할 때 실행되는 형식 ICommand입니다.
  • object 형식의 CommandParameter - Command에 전달되는 매개 변수입니다.

이러한 속성은 BindableProperty 개체에서 지원하며, 따라서 데이터 바인딩의 대상이 될 수 있고 스타일이 지정될 수 있습니다.

또한 클래스는 SwipeItemView 항목이 실행된 후 Command 탭될 때 발생하는 이벤트를 정의 Invoked 합니다.

다음 예제에서는 컬렉션의 개체를 LeftItems 보여 SwipeItemView 있습니다.SwipeView

<SwipeView>
    <SwipeView.LeftItems>
        <SwipeItems>
            <SwipeItemView Command="{Binding CheckAnswerCommand}"
                           CommandParameter="{Binding Source={x:Reference resultEntry}, Path=Text}">
                <StackLayout Margin="10"
                             WidthRequest="300">
                    <Entry x:Name="resultEntry"
                           Placeholder="Enter answer"
                           HorizontalOptions="CenterAndExpand" />
                    <Label Text="Check"
                           FontAttributes="Bold"
                           HorizontalOptions="Center" />
                </StackLayout>
            </SwipeItemView>
        </SwipeItems>
    </SwipeView.LeftItems>
    <!-- Content -->
</SwipeView>

이 예제에서는 SwipeItemView 포함하는 StackLayout >를 EntryLabel포함합니다. 사용자가 입력을 Entry입력한 후 나머지 SwipeViewItem 를 탭하여 속성에 정의된 SwipeItemView.Command 것을 ICommand 실행할 수 있습니다.

프로그래밍 방식으로 SwipeView 열기 및 닫기

SwipeViewClose 에는 프로그래밍 방식으로 살짝 밀기 항목을 각각 열고 닫는 메서드가 포함됩니다Open. 기본적으로 이러한 메서드는 열거나 닫을 때 애니메이션 SwipeView 효과를 줍니다.

이 메서드는 OpenOpenSwipeItem 열 방향을 SwipeView 지정하기 위해 인수가 필요합니다. 열거형에는 OpenSwipeItem 4개의 멤버가 있습니다.

  • LeftItems- 컬렉션의 SwipeView 살짝 밀기 항목을 LeftItems 표시하기 위해 왼쪽에서 열 것임을 나타냅니다.
  • TopItems- 컬렉션의 SwipeView 살짝 밀기 항목을 표시하기 위해 위쪽에서 TopItems 열 것임을 나타냅니다.
  • RightItems- 컬렉션의 SwipeView 살짝 밀기 항목을 RightItems 표시하기 위해 오른쪽에서 열 것임을 나타냅니다.
  • BottomItems- 컬렉션의 SwipeView 살짝 밀기 항목을 BottomItems 표시하기 위해 아래쪽에서 열 것임을 나타냅니다.

또한 이 메서드는 Open 열 때 애니메이션 효과를 줄지 여부를 SwipeView 정의하는 선택적 bool 인수도 허용합니다.

명명된 SwipeView 경우 swipeView다음 예제에서는 컬렉션에서 살짝 밀기 항목을 LeftItems 표시하기 위해 여 SwipeView 는 방법을 보여 주었습니다.

swipeView.Open(OpenSwipeItem.LeftItems);

그런 swipeView 다음 메서드를 사용하여 닫을 수 있습니다.Close

swipeView.Close();

참고 항목

이 메서드는 Close 닫을 때 애니메이션 효과를 줄지 여부를 SwipeView 정의하는 선택적 bool 인수도 허용합니다.

SwipeView 사용 안 함

애플리케이션은 콘텐츠 항목을 살짝 밀는 것이 유효한 작업이 아닌 상태를 입력할 수 있습니다. 이런 경우 IsEnabled 속성을 false로 설정하여 SwipeView을 사용하지 않도록 설정할 수 있습니다. 이렇게 하면 사용자가 콘텐츠를 살짝 밀어 살짝 밀기 항목을 표시할 수 없습니다.

또한 또는 CanExecuteSwipeItemView해당 SwipeItem 속성을 정의할 Command 때 살짝 밀기 항목을 사용하거나 사용하지 않도록 하기 위해 대리 ICommand 자를 지정할 수 있습니다.