대부분의.NET MAUI 앱은 플라이아웃, 사이드바(고정 플라이아웃) 또는 탭(상단 또는 하단)을 사용하여 콘텐츠 보기 사이를 이동합니다. 핵심 UX 주체는 wayfinding 이며, 사용자가 애플리케이션(또는 정보)의 구조, 특히 해당 구조 내에 있는 위치를 이해하는 데 도움이 됩니다.

따라서 플라이아웃 항목과 탭은 .NET MAUI에서 기본적으로 일반 및 선택된 시각적 상태를 지원합니다. 하지만 이미지를 추가하면 어떻게 될까요?

<FlyoutItem Title="Home" FlyoutIcon="tab_home.png">
  <ShellContent ContentTemplate="{DataTemplate page:HomePage}"/>
</FlyoutItem>

이제 선택한 상태는 한 가지 보기만 있기 때문에 일반 상태와 다르지 않습니다. 상태 트리거를 사용하면 일반 이미지를 선택한 이미지로 교체하는 스타일을 쉽게 제공할 수 있습니다. AFlyoutItem는 사용자가 플라이아웃으로 탐색할 때 업데이트되는 속성ShellItem이 있는 IsChecked의 별칭입니다. Atrigger는 속성을 감시하고 속성이 변경될 때마다 실행합니다.

<Style TargetType="FlyoutItem" x:Key="HomeFlyout">
    <Style.Triggers>
        <Trigger TargetType="FlyoutItem"
                    Property="IsChecked" Value="False">
            <Setter Property="FlyoutIcon" Value="tab_home.png"/>
        </Trigger>
        <Trigger TargetType="FlyoutItem"
                    Property="IsChecked" Value="True">
            <Setter Property="FlyoutIcon" Value="tab_home_on.png"/>
        </Trigger>
    </Style.Triggers>
</Style>

이제 고정 이미지 할당을 제거하고 스타일을 지정할 수 있습니다.

<FlyoutItem Title="Home" Style="{StaticResource HomeFlyout}">
  <ShellContent ContentTemplate="{DataTemplate page:HomePage}"/>
</FlyoutItem>

훨씬 낫다! 일부 텍스트 레이블은 포함하는 또 다른 유익한 요소입니다.

닷넷 / 마우이 샘플

.NET 다중 플랫폼 앱 UI(.NET MAUI)용 샘플

.NET MAUI 샘플

.NET 다중 플랫폼 앱 UI(.NET MAUI)로 빌드된 샘플.
.NET MAUI은 C# 및 XAML을 사용하여 모바일 및 데스크톱 앱을 만들기 위한 교차 플랫폼 프레임워크입니다. .NET MAUI를 사용하면 단일 공유 코드베이스에서 Android, iOS, iPadOS, macOS 및 Windows에서 실행할 수 있는 앱을 개발할 수 있습니다.

공식 샘플

Weather '21 App

Calculator App

.NET Podcasts App

Navigation Samples

Beginner's Series Task App Sample

커뮤니티 샘플

Rachel's Recipes App

Awesome .NET MAUI

.NET MAUI 링크

.NET MAUI Website

.NET MAUI Documentation

.NET MAUI Blog

.NET MAUI GitHub

.NET 재단

GitHub에는 많은 .NET 관련 프로젝트가 있습니다.

.NET home repo - Microsoft 및 커뮤니티의 수백 가지 .NET 프로젝트에 대한 링크입니다.

ASP.NET Core home - ASP.NET Core 학습을 시작하기에 가장 좋은 곳입니다.

이 프로젝트는 커뮤니티에서 예상되는 행동을 명확히 하기 위해 Contributor Covenant에서 정의한 행동 강령을 채택했습니다. 이상…

View on GitHub