MAUI#2 두번째 화면 추가하기

간만에 올리는 MAUI 글이다. 

앱을 사용하다 보면 여러개의 화면들을 만날 수 있는데 보통 화면을 띄울 때 한 화면을 종료하고 다른 화면을 켜는 것이 아니라, 두번째 화면을 첫번째 화면 위에 새로 띄워서 덮어씌워버리는 것이다. 그러면 첫번째 화면은 백그라운드로 돌아가고 두번째 화면이 눈앞에 나타나는 것이다. 

이것을 스택네비게이션이라고 부른다. 

지난번 글에서는 대략적인 앱 구성에 대해 배웠는데, 새로운 화면을 추가하기 위해서 프로젝트-우클릭-추가-새항목을 통해 새 화면을 만든다.

주인장은 Screens폴더라는 디렉토리를 하나 만들어서 여기에 화면관련 파일들을 관리할 것이다. 필요에 따라 계층적으로 구성이 변할 수 있다.

우리가 주로 사용할 것은 두 가지이다.

1. 통채로 화면 하나를 구성하는 ContentPage.xaml과 연결된 이벤트를 처리할 cs파일

2. 1번에서 만든 ContentPage의 구성 요소가 될 컴포넌트들에 해당하는 ContentView와 각 컴포넌트에 연결될 cs파일

우선은 1번만 만들어서 앱에 등록될 두번째 화면을 만들어 보겟다. (XAML을 만들면 자동으로 CS파일도 같이 만들어진다.)

생성된 새 페이지는 다음과 같다.

화면을 만들긴 했지만 실제로 앱을 빌드해보면 화면이 정상적으로 뜨지 않는다. 이것은 AppShell에 화면네비게이터를 등록하지 않아서 그렇다.

AppShell.xaml파일 수정

Shell태그 안에 화면에 관련된 디렉터리 경로를 다음과 같이 정의한다.

    xmlns:local="clr-namespace:TripAdvisor"
    xmlns:Screens="clr-namespace:TripAdvisor.Screens"

local은 MainPage가 존재하는 프로젝트의 루트 디렉토리를 의미한다. 이 디렉토리 안에는 MainPage.xaml이라는 파일이 존재한다.

Screens는 루트 디렉토리 내부의 Screens 디렉토리를 의미한다. 이 디렉토리 안에는 LoginPage.xaml이라는 파일이 존재한다.

local에서 루트 디렉토리를 포함시켰기 때문에 하위 폴더는 안해도 되는줄 알았는데 아니더라 이것에 대해서는 좀 더 조사해보고 수정하도록 하겠다.

아무튼 Shell태그 안에 속성을 추가했다면 ShellContent를 정의해주어야 한다. 

Title은 화면의 이름을 의미하는 것이고 ContentTemplate는 해당 경로에 있는 xaml파일의 이름을, Route속성은 화면을 이동시킬때 사용할 네임을 정의하는 것이다.

이제 이 화면으로 진입하기 위한 이벤트를 MainPage에 만들어야 한다. 

MainPage.xaml파일 안에 새로운 버튼을 하나 추가한다.

<Button 
    x:Name="RouteBtn"
    Text="if you Click this, route LoginPage" 
    SemanticProperties.Hint="there is no longer hint"
    Clicked="OnRouterClicked"
    HorizontalOptions="Fill" />

이 버튼은 클릭을 통해 LoginPage로 넘어갈 이벤트를 가지고 있다.

그리고 MainPage.xaml.cs 파일에 다음 코드를 삽입한다. 이 코드는 실제로 버튼이 눌렸을때 네비게이션을 통해 화면을 스택의 형식으로 push하는 기능을 가지고 있다.

private void OnRouterClicked(object sender, EventArgs e)
{
    Navigation.PushAsync(new LoginPage());
}

그러고 난 후에는 다음과 같이 작동한다.

이 프로젝트 예제파일은 아직 제공을 고려중입니다.