연습: 플라이아웃 탐색 구현

7분

샘플 시나리오에는 천체, 달의 위상, 일출/일몰 시간에 대한 정보를 표시하기 위한 페이지가 포함된 MAUI 앱이 있습니다. 앱에는 정보 페이지도 포함되어 있습니다. 현재 이러한 페이지는 모두 독립 실행형이지만 사용자가 이러한 페이지 간에 이동할 수 있는 논리적 방법을 제공하려고 합니다.

이 연습에서는 앱에 플라이아웃 탐색을 추가합니다.

이 모듈에서는 .NET 8.0 SDK를 사용합니다. 기본 설정 터미널에서 다음 명령을 실행하여 .NET 8.0이 설치되어 있는지 확인합니다.

dotnet --list-sdks

다음 예제와 유사한 출력이 표시됩니다.

6.0.317 [C:\Program Files\dotnet\sdk]
7.0.401 [C:\Program Files\dotnet\sdk]
8.0.100 [C:\Program Files\dotnet\sdk]

8으로 시작하는 버전이 나열되어 있는지 확인합니다. 나열되는 버전이 없거나 명령을 찾을 수 없는 경우 최신 .NET 8.0 SDK를 설치합니다.

시작 솔루션 열기

연습 리포지토리를 복제하거나 다운로드합니다.

참고

빌드 생성 파일이 최대 경로 길이를 초과하지 않도록 연습 콘텐츠를 C:\dev와 같은 짧은 폴더 경로에 복제하거나 다운로드하는 것이 가장 좋습니다.
복제된 리포지토리의 exercise1 폴더로 이동한 다음 시작 폴더로 이동합니다.
Visual Studio를 사용하여 Astronomy.sln 솔루션을 열거나 Visual Studio Code에서 폴더를 엽니다.
솔루션 탐색기 창의 천문학 프로젝트에서 Pages 폴더를 확장합니다. 이 폴더에는 다음 페이지가 포함되어 있습니다.
- AboutPage. 이 페이지에는 앱에 대한 정보가 표시됩니다.
- MoonPhasePage. 이 페이지에는 지구에서 볼 수 있는 달의 위상에 대한 특정 정보가 표시됩니다.
- SunrisePage. 이 페이지에는 지구의 여러 위치에서 일출 및 일몰 시간이 표시됩니다. 데이터는 Sunrise Sunset 웹 서비스에서 제공됩니다.
앱을 빌드하고 실행합니다. 앱이 시작되면 MoonPhasePage가 표시되지만 현재는 사용자가 다른 페이지로 이동할 수 있도록 하는 방법이 제공되지 않습니다.

다음 이미지는 Android 에뮬레이터에서 실행되는 앱을 보여줍니다.
앱을 닫고 Visual Studio 또는 Visual Studio Code로 돌아갑니다.

솔루션 탐색기 창에서 AppShell.xaml 페이지를 엽니다.
XAML 태그 편집기에서 기존 <ShellContent> 항목을 <FlyoutItem>으로 묶습니다. 항목의 Title<Flyout> 속성을 Moon Phase로 둘러쌉니다. 태그는 다음과 같습니다.
```
<FlyoutItem Title="Moon Phase">
    <ShellContent
        ContentTemplate="{DataTemplate local:MoonPhasePage}"/> 
</FlyoutItem>
```

<Shell> 노드에 FlyoutIcon 속성을 추가하여 이미지를 표시합니다. 기본적으로 3개의 가로 막대가 표시되지만 원하는 대로 변경할 수 있습니다. 태그는 다음과 같습니다.

<Shell
    x:Class="Astronomy.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:Astronomy.Pages"
    FlyoutIcon="moon.png">

애플리케이션을 실행합니다. 이제 앱의 왼쪽 위 모서리에 달 이미지가 표시됩니다.

아이콘을 탭하면 플라이아웃이 나타납니다.
이제 더 많은 플라이아웃 옵션을 추가합니다. 방금 만든 항목 아래에 새 <FlyoutItem> 항목을 만들고 그 Title을 일출로 설정합니다. 그 ShellContent는 SunrisePage 페이지를 가리켜야 합니다.

또 다른 <FlyoutItem> 항목을 추가하고 제목을 정보으로 설정합니다. 이번에는 ShellContent를 AboutPage로 설정합니다. 이러한 두 항목에 대한 XAML은 다음과 같습니다.

<FlyoutItem Title="Sunrise">
    <ShellContent
        ContentTemplate="{DataTemplate local:SunrisePage}"/>
</FlyoutItem>

<FlyoutItem Title="About">
    <ShellContent
        ContentTemplate="{DataTemplate local:AboutPage}"/>
</FlyoutItem>

앱을 다시 실행하면 이제 플라이아웃에 3가지 옵션이 있습니다. 플라이아웃 항목을 탭하면 해당 페이지가 표시됩니다.

참고

Windows 이외의 플랫폼에서 실행하는 경우 일출/일몰 시간 페이지가 작동하려면 해당 플랫폼에서 앱에 대한 위치 권한을 사용하도록 설정해야 할 수 있습니다. 예를 들어 Android 디바이스에서 앱을 사용하는 동안에만 허용으로 위치 액세스 권한을 설정합니다.

아이콘 추가

플라이아웃 항목이 조금 비어 있는 것을 확인할 수 있습니다. Icon 속성을 사용하여 플라이아웃 항목에 아이콘을 추가할 수 있습니다.

사용할 Resources\Images 폴더에 일부 이미지가 이미 추가되어 있습니다.

첫 번째 FlyoutItem의 Icon 속성을 moon.png로 설정합니다.

<FlyoutItem Title="Moon Phase" Icon="moon.png">
    <ShellContent
        ContentTemplate="{DataTemplate local:MoonPhasePage}" />
</FlyoutItem>

각각 sun.png 및 question.png를 사용하여 다른 2개의 플라이아웃 항목에 대해 반복합니다.

<FlyoutItem Title="Sunrise" Icon="sun.png">
    <ShellContent
        ContentTemplate="{DataTemplate local:SunrisePage}"/>
</FlyoutItem>

<FlyoutItem Title="About" Icon="question.png">
    <ShellContent
        ContentTemplate="{DataTemplate local:AboutPage}"/>
</FlyoutItem>

앱을 실행하고 플라이아웃을 엽니다. 이제 각 플라이아웃 항목에 연결된 아이콘이 있습니다.

플라이아웃 항목은 플라이아웃 메뉴의 맨 위에 있으므로 구별하기가 어렵습니다. <Shell.FlyoutHeader>를 사용하여 맨 위에 공간을 추가할 수 있으며 전체 View도 추가할 수 있습니다.

플라이아웃 헤더를 <Shell> 노드의 자식으로 추가합니다.
```
<Shell.FlyoutHeader>
</Shell.FlyoutHeader>
```

<Shell.FlyoutHeader> 내에서 원하는 보기 계층 구조를 만들 수 있습니다. Image와 함께 Grid을 넣어 보겠습니다.

<Shell.FlyoutHeader>
    <Grid HeightRequest="100" BackgroundColor="DarkSlateBlue">
        <Image Source="moon.png" />
    </Grid>
</Shell.FlyoutHeader>

플라이아웃이 열려 있는 상태에서 실행 중인 앱의 스크린샷. 이번에는 달 아이콘이 있는 플라이아웃에 헤더가 있습니다.

연습: 플라이아웃 탐색 구현

시작 솔루션 열기

플라이아웃 탐색 추가

아이콘 추가

플라이아웃 헤더 추가

피드백