전환

Maui에는 이미 완전한 애니메이션 API가 있어 페이지에서 생생하고 유동적인 콘텐츠를 만들 수 있습니다. 그러나 페이지 사이를 탐색할 때 어떤 일이 발생합니까?

이 사양은 Maui 전환 API를 정의합니다. 잘 차별화된 전환에는 두 가지 유형이 있습니다.

• 기존 전환 : 전통적으로 서로 독립적인 전체 보기 계층 구조를 애니메이션으로 만드는 시작 및 종료 전환과 관련된 서로 다른 페이지 간의 전환입니다.
• 공유 요소 전환 : 많은 경우 두 활동에 공통적인 요소가 있으며 이러한 공유 요소를 개별적으로 전환하는 기능을 제공하면 전환 간의 연속성을 강조하고 사용자가 앱을 탐색할 때 활동 경계를 깨뜨립니다.

API

기존 전환

기존 전환의 경우 지원되는 전환이 있는 새 열거형이 필요합니다.

public enum NavigationTransitionType
{
    None,
    Fade,
    Flip,
    Scale,
    SlideFromLeft,
    SlideFromRight,
    SlideFromTop,
    SlideFromBottom,
    Turnstile
}

그리고, NavigationPage 및 셸을 사용하여 페이지 전환 할 수 있도록 페이지에서 새 속성을 포함한다 :

• TransitionType : 사용되는 전환 효과입니다.
• TransitionDuration : 밀리초 단위의 전환 지속 시간입니다.

public static readonly BindableProperty TransitionTypeProperty =
     BindableProperty.Create(nameof(TransitionType), typeof(NavigationTransitionType),   typeof(NavigationPage), PageTransitionType.None,
     BindingMode.TwoWay, null);

public NavigationTransitionType TransitionType
{
    get { return (NavigationTransitionType)GetValue(TransitionTypeProperty); }
    set { SetValue(TransitionTypeProperty, value); }
}

public static readonly BindableProperty TransitionDurationProperty =
     BindableProperty.Create(nameof(TransitionDuration), typeof(double), typeof(NavigationPage), 500d,
     BindingMode.TwoWay, null);

public double TransitionDuration
{
    get { return (double)GetValue(TransitionDurationProperty); }
    set { SetValue(TransitionDurationProperty, value); }
}

공유 요소 전환

반면에 공유 요소 전환을 허용하는 방법이 필요합니다. 핵심은 두 개의 다른 페이지에서 사용할 수 있는 동일한 항목을 _"링크"_하는 방법입니다.

View에서 상속된 지원되는 요소에 TransitionTag 속성이 연결됩니다.

public static readonly BindableProperty TransitionTagProperty =    
     BindableProperty.CreateAttached("TransitionTag", typeof(int), typeof(Transition), 0,
propertyChanged: OnPropertyChanged);

용도는 다음과 같습니다.

<Image Source="xamarin.jpg" TransitionTag="logo" WidthRequest="100" />

소스 페이지에서 전환할 컨트롤에 태그를 지정합니다.

<Image Source="xamarin.jpg" TransitionTag="logo" WidthRequest="300" />

그리고 대상 페이지에서 전환할 컨트롤에 태그를 지정합니다.

시나리오

몇 가지 예를 살펴보겠습니다.

XAML 예제

페이지 간 전환을 사용하는 샘플:

<ContentPage
     TransitionType=“SlideFromBottom”
     TransitionDuration="750" />

공유 전환 요소를 사용하는 샘플:

페이지 1:

<Image  
     Source="xamagon_preview.png"
     TransitionTag="xamagon"/>

2 쪽:

<Image  
     Source="xamagon.png"
     TransitionTag="xamagon"/>

노트

• 전환을 표시하려면 소스 및 대상 페이지의 TransitionTag 가 일치해야 합니다.
• 한 번에 여러 보기에 애니메이션을 적용할 수 있지만 페이지의 모든 TransitionTag 는 고유해야 합니다.

난이도 : 중