다음을 통해 공유

페이지 전환

  • 아티클

페이지 전환은 앱의 페이지 사이에서 사용자를 탐색하면서 페이지 사이의 관계로 피드백을 제공합니다. 페이지 전환은 사용자가 탐색 계층의 최상단에 있는지, 형제 페이지 사이를 이동하고 있는지, 페이지 계층 속으로 더욱 깊숙이 탐색하고 있는지 이해하는 데 도움이 됩니다.

앱의 페이지 사이를 탐색할 때는 두 가지 다른 애니메이션(Page refresh 및 Drill)이 제공되고, NavigationTransitionInfo의 하위 클래스로 표시됩니다.

예제

WinUI 2 갤러리
WinUI 갤러리

WinUI 2 Gallery 앱이 설치되어 있는 경우, 여기를 클릭하여 앱을 열고 실행 중인 페이지 전환을 확인하십시오.

페이지 새로 고침

페이지 새로 고침은 다음 콘텐츠를 표시하기 위한 위로 밀기 애니메이션과 페이드 인 애니메이션의 조합입니다. 사용자가 탭 또는 왼쪽 탐색 항목을 탐색하는 등 탐색 스택의 최상단으로 이동할 때는 페이지 새로 고침을 사용하세요.

사용자가 다시 시작하는 듯한 느낌을 받도록 하는 것이 목적입니다.

페이지 새로 고침 애니메이션

페이지 새로 고침 애니메이션은 EntranceNavigationTransitionInfoClass로 표시됩니다.

// Explicitly play the page refresh animation
myFrame.Navigate(typeof(Page2), null, new EntranceNavigationTransitionInfo());

참고: 프레임은 자동으로 NavigationThemeTransition을 사용하여 두 페이지 간에 탐색을 애니메이션화합니다. 기본값으로 애니메이션은 페이지 새로 고침입니다.

Drill

사용자가 항목 검색 후 더 많은 정보를 표시하는 등 앱을 더욱 깊숙이 탐색할 때는 드릴을 사용하세요.

사용자가 앱 속으로 더욱 깊숙이 이동한다는 느낌을 받도록 하는 것이 목적입니다.

드릴 애니메이션

드릴 애니메이션은 DrillInNavigationTransitionInfo 클래스로 표시됩니다.

// Play the drill in animation
myFrame.Navigate(typeof(Page2), null, new DrillInNavigationTransitionInfo());

가로 슬라이드

가로 슬라이드를 사용하여 형제 페이지가 나란히 표시되도록 합니다. NavigationView 컨트롤은 위쪽 탐색에 이 애니메이션을 자동으로 사용하지만 사용자 고유의 가로 탐색 환경을 빌드하는 경우 SlideNavigationTransitionInfo를 사용하여 가로 슬라이드를 구현할 수 있습니다.

사용자가 서로 옆에 있는 페이지 사이를 탐색하고 있다는 느낌을 받도록 하는 것이 목적입니다.

// Navigate to the right, ie. from LeftPage to RightPage
myFrame.Navigate(typeof(RightPage), null, new SlideNavigationTransitionInfo() { Effect = SlideNavigationTransitionEffect.FromRight } );

// Navigate to the left, ie. from RightPage to LeftPage
myFrame.Navigate(typeof(LeftPage), null, new SlideNavigationTransitionInfo() { Effect = SlideNavigationTransitionEffect.FromLeft } );

억제

탐색 도중 애니메이션을 재생하지 않으려면 다른 NavigationTransitionInfo 하위 유형 대신에 SuppressNavigationTransitionInfo를 사용하세요.

// Suppress the default animation
myFrame.Navigate(typeof(Page2), null, new SuppressNavigationTransitionInfo());

애니메이션 숨기기는 연결된 애니메이션 또는 묵시적인 표시하기/숨기기 애니메이션을 사용하여 자체 전환을 빌드하는 경우에 유용합니다.

뒤로 탐색

Frame.GoBack(NavigationTransitionInfo)를 사용하여 뒤로 탐색할 때 특정 전환을 재생할 수 있습니다.

이는 화면 크기에 따라 동적으로 탐색 동작을 수정할 때 유용할 수 있습니다. 예를 들어 반응형 목록/세부 시나리오의 경우입니다.