.NET MAUI 익히기 - slog

dimohy · 5월 5, 2022, 1:43오전

이 페이지를 통해 하나씩 MAUI에 대한 기능을 익혀보려 합니다. 문서는 상당히 자세하게 구성되어 있습니다.

먼저 MAUI는 무엇일까요? 문서에서는 .NET 다중 플랫폼 앱 UI로 정의하고 있습니다. WPF또는 UWP또는 Xamarin.Forms 처럼 XAML을 이용해서 모바일 및 데스크톱 앱을 다중 플랫폼으로 개발할 수 있습니다.

저 그림 보면 Xamarin.Forms랑 같은데? 생각이 드는데 맞습니다. Xamarin.Forms를 성능 및 확장성을 위해 다시 설계되었습니다.

기본 기능으로 구현된 동일한 앱을 Xamarin.Forms 및 MAUI 성능비교 정보가 있으면 좋겠네요 ^^;

MAUI는 누구를 위한 것일까요? .NET 및 C#을 기반으로 크로스플랫폼 모바일 및 데스크톱 앱을 개발하기 위한 서비스 개발 회사 또는 개발자가 됩니다.

크로스플랫폼 개발 프레임워크 중 Xamarin.Forms의 지분을 살펴보겠습니다.

(How large is Flutter vs React Native community in 2021 - DEV Community)

GitHub 별은 개발자의 지지를 의미하므로 Flutter가 강력한 지지를 받고 있는것을 볼 수 있습니다.

dimohy · 5월 5, 2022, 2:01오후

Visual Studio 2022 Preview를 통해 모바일 개발 워크로드를 선택하면 .NET MAUI 개발환경이 구성됩니다.

새 프로젝트 만들기에서 .NET MAUI 앱으로 프로젝트를 만들면 MAUI 기본 템플릿이 생성되는데 다음처럼 단일 프로젝트로 개발을 진행할 수 있기 때문에

프로젝트 관리가 좀 더 편해졌습니다.

글꼴 및 이미지와 같은 리소스는 공통으로 관리할 수 있으며 플렛폼에 의존적인 자연은 플렛폼 별로 별도로 구성할 수도 있습니다.

타겟 플랫폼에 따라 Platforms의 각 디렉토리는 컴파일되거나 컴파일 되지 않습니다. 또한 사용자 설정에 따라 플랫폼별 항목을 추가할 수 있습니다.

<ItemGroup Condition="$(TargetFramework.StartsWith('net6.0-android')) != true">
  <Compile Remove="**\**\*.Android.cs" />
  <None Include="**\**\*.Android.cs" Exclude="$(DefaultItemExcludes);$(DefaultExcludesInProjectFolder)" />
</ItemGroup>

<ItemGroup Condition="$(TargetFramework.StartsWith('net6.0-ios')) != true AND $(TargetFramework.StartsWith('net6.0-maccatalyst')) != true">
  <Compile Remove="**\**\*.iOS.cs" />
  <None Include="**\**\*.iOS.cs" Exclude="$(DefaultItemExcludes);$(DefaultExcludesInProjectFolder)" />
</ItemGroup>

<ItemGroup Condition="$(TargetFramework.Contains('-windows')) != true ">
  <Compile Remove="**\*.Windows.cs" />
  <None Include="**\*.Windows.cs" Exclude="$(DefaultItemExcludes);$(DefaultExcludesInProjectFolder)" />
</ItemGroup>

일단 이부분은 아직은 깊게 들어가진 않고 하나의 프로젝트로 다중 플렛폼에 대한 구성이 가능해졌다 정도로 넘어갑니다.

dimohy · 5월 5, 2022, 2:04오후

마이크로소프트에서 제공하는 MAUI 문서의 품질은 과거에 비해서 상당히 높은 편입니다. 이 문서만으로도 어느정도의 학습이 가능할 것 같네요.

XAML에 관련된 내용은 WPF나 UWP를 해본 개발자라면 넘어가도 됩니다.

dimohy · 5월 5, 2022, 2:26오후

시멘틱

시멘틱 정보는 일종의 메타정보이며 사람이 식별하거나 기기에서 식별할 수 있는 정보를 제공합니다.

앱 수명 주기

앱 수명주기를 MAUI 관점에서 또는 플렛폼별로 관여할 수 있습니다.

앱 시작

MauiProgram.cs을 통해 시작 시 여러가지 설정을 할 수 있습니다. 글꼴이나 폰트를 등록할 수 있고 핸들러나 서비스를 등록할 수 있습니다.

렌더러 역시 핸들러를 통해 처리될 수 있는데 다음의 코드처럼 각 플렛폼별로 렌더러를 등록할 수 있습니다.

...
                #if ANDROID
                .ConfigureMauiHandlers(handlers =>
                {
                    handlers.AddCompatibilityRenderer(typeof(Microsoft.Maui.Controls.BoxView),
                        typeof(Microsoft.Maui.Controls.Compatibility.Platform.Android.BoxRenderer));
                    handlers.AddCompatibilityRenderer(typeof(Microsoft.Maui.Controls.Frame),
                        typeof(Microsoft.Maui.Controls.Compatibility.Platform.Android.FastRenderers.FrameRenderer));
                });
                #elif IOS
                .ConfigureMauiHandlers(handlers =>
                {
                    handlers.AddCompatibilityRenderer(typeof(Microsoft.Maui.Controls.BoxView),
                        typeof(Microsoft.Maui.Controls.Compatibility.Platform.iOS.BoxRenderer));
                    handlers.AddCompatibilityRenderer(typeof(Microsoft.Maui.Controls.Frame),
                        typeof(Microsoft.Maui.Controls.Compatibility.Platform.iOS.FrameRenderer));
                });
                #endif  
...

Behavior

상속을 하지 않고도 사용자 인터페이스 컨트롤에 기능을 추가 할 수 있습니다. WPF 그것과 유사합니다.

...
public static class AttachedNumericValidationBehavior
{
    public static readonly BindableProperty AttachBehaviorProperty =
        BindableProperty.CreateAttached("AttachBehavior", typeof(bool), typeof(AttachedNumericValidationBehavior), false, propertyChanged: OnAttachBehaviorChanged);
...

데이터 바인딩

별도 정리

제스처

Drag&Drop, Pan, Pinch, Swipe, Tap의 다양한 제스처를 처리할 수 있습니다.

속성

바인딩 가능 속성(Bindable property)과, 첨부 속성(Attached property) 모두 WPF의 그것과 유사합니다.

메시지 게시 및 구독

발행-구독 패턴은 발행자와 구독자를 직접 참조하지 않고도 필요한 메시지를 보내고 받을 수 있는 패턴입니다. MAUI에서는 MessagingCenter를 이용해 이 패턴을 사용할 수 있습니다. 이를 이용해 컨트롤와 컨트롤간 메시지를 주고 받을 수 있습니다.

리소스 사전

ResourceDictionary를 이용해 리소스를 레파지토리로 관리할 수 있습니다. WPF의 그것과 유사합니다.

Shell

.NET MAUI 익히기 - slog 🧵 Slog

시멘틱 시멘틱 정보는 일종의 메타정보이며 사람이 식별하거나 기기에서 식별할 수 있는 정보를 제공합니다. https://docs.microsoft.com/en-us/dotnet/maui/fundamentals/accessibility 앱 수명 주기 [image] 앱 수명주기를 MAUI 관점에서 또는 플렛폼별로 관여할 수 있습니다. https://docs.microsoft.com/en-us/dotnet/maui/fundamentals/app-lifecycle 앱 시작 MauiProgram.cs을 통해 시작 시 여러가지 설정을 할 수 있습니다. 글꼴이나 폰트를 등록할 수 있고 핸들러나 서비스를 등록할 수 있습니다. 렌더러 역시 핸들러를 통해 처리될 수 있는데 다음의 코드처럼 각 플렛폼별로 렌더러를 등록할 수 있습니다. ... #if ANDROID .ConfigureMauiHandlers(handlers => …

단일 프로젝트

다양한 프로젝트 설정으로 리소스에 대한 디렉토리 경로를 지정할 수 있습니다.

<ItemGroup>
    <!-- Images -->
    <MauiImage Include="Resources\Images\*" />

    <!-- Fonts -->
    <MauiFont Include="Resources\Fonts\*" />

    <!-- Assets -->
    <MauiAsset Include="Resources\Assets\*" />
</ItemGroup>

템플릿

WPF의 그것과 같이 ControlTemplate, DateTemplate을 사용합니다.

트리거

트리거를 통해 XAML에서 다양한 변화를 감지하여 다른 동작에 연결할 수 있습니다. 구성은 WPF의 트리거와 유사합니다.

창

오늘 기초부분을 전반적으로 살펴봤는데 WPF 개발자라면 빠르게 MAUI에 익숙해질 수 있도록 기존 기술을 거의 대부분 계승해서 사용했네요. 다음 시간에는 MAUI 컨트롤을 중점적으로 배워볼 생각입니다.

dimohy · 5월 6, 2022, 12:14오전

Shell (1)

Shell은 특히 모바일 구성에 필수 구성 및 기능을 제공해서 앱 개발을 쉽게 하도록 합니다.

앱의 시각적 계층 구조를 표현
탐색 기능을 제공
페이지에 URI 기반 접근 가능
통합 검색 처리

Shell은 다음의 상속 구조를 가집니다.

Shell → Page → VisualElement → NavigableElement → Element → BindableObject

Shell은 일반적으로 App의 MainPage가 됩니다.

| App.xaml.cs

	public App()
	{
		InitializeComponent();

		Application.Current.UserAppTheme = AppTheme.Light;

		MainPage = new AppShell();
	}

dimohy · 5월 6, 2022, 1:58오전

구삼님이 MAUI Shell에 대해 정리한 글이 있습니다!

.NET MAUI Shell에 대해 ❎ Xamarin/MAUI 소모임

드디어 .NET MAUI의 RC 버전이 나왔습니다. 이전에도 있었는지는 모르겠으나, 적어도 제가 MAUI 발표준비를 했었던 1월까지는 없었던 Shell이라는 개념이 등장하였습니다. 이 Shell은 Xamarin에 익숙한 분들이라면 조금 낯선 개념일텐데 이 기능이 무엇을 하는지에 대해 잠깐 알아봅니다. 이 글은 제가 개인적으로 이해한 것에 따르므로, 잘못된 내용이 있으면 자유롭게 피드백 부탁드립니다. 먼저 Shell은 MSDN에 설명이 자세히 나왔있으나 사실 읽어봐도 개념이 잘 와닿지 않습니다. 하지만 내용을 바탕으로 조금 생각해보면 프로그램의 UI에 해당할 수 있는 가장 안쪽을 Shell이라는 개념을 적용하여 그 위에서 페이지를 자유롭게 이동할 수 있는 것은 아닐까 합니다. 일단 기본적인 구성은 FlyoutItem, TabItem, ShellContent 3가지가 있습니다. 앞의 두 개는 UI 구성 방법을 Flyout 방식이냐 Tab 방식이냐를 나타낼 뿐이고, 이…

플렛폼 기능은 Microsoft.Maui.Essentials를 이용해 사용할 수 있습니다.

스플래쉬 화면은 프로젝트 설정으로 매우 쉽게 추가할 수 있습니다. @honeyhead 님이 소개해주셨습니다.

.NET MAUI로 진화해야 하는 이유에 대한 글입니다. 사실 다양한 (광고성) 이유가 있지만 사실은 다음처럼만 준비된다면 .NET 개발자로선 대환영입니다.

작은 패키지 사이즈
빠른 시작 시간
빠른 동작 시간
플랫폼의 기능 제약 없는 대부분의 기능 제공
디버그를 정확하고 빠르게
플랫폼에 맞는 이질감 없는 앱 작성

.NET MAUI로 진화해야 하는 이유 | 샘 바수 👓 읽을 거리

Microsoft MVP이자 Telerik 제품의 Progress Developer Advocate인 샘 바수님이 작성한 글입니다. .NET MAUI의 청사진을 말하고 있습니다. .NET MAUI이 성공한다면, 재밌는 .NET 생태계가 준비가 될 것 같습니다. 다음은 .NET 개발자가 .NET MAUI를 기대하면서 얻을 수 있는 10가지 사항입니다. 멈추고 장미 냄새를 맡아야 합니다. 당신이 항상 미래를 내다보고 있다면 당신은 현재에 감사하고 있는 것이 아닙니다. 이것은 현실을 바꾸려고 할 때 젊음의 활기에 전해지는 일반적인 조언입니다. 그러나 세상을 바꾸는 사람들은 현상에 만족하지 않고 더 나은 내일을 꿈꾸는 사람들이 많습니다. 우리는 더 통합된 런타임, 언어 성숙도 및 더 나은 개발자 도구를 제공하는 대규모 .NET 6 릴리스 의 정점에 있습니다. Xamarin.Forms는 모바일 및 데스크톱 앱을 대상으로 하는 최신 오픈 소스 플랫폼 간 스택인 .NET MAUI로 진화…