XAML의 플랫폼별 값

앱의 시각적 개체 환경은 플랫폼마다 다릅니다. 사용하는 시각적 요소에 따라 각 플랫폼의 UI를 조정해야 하는 경우가 종종 있습니다. .NET MAUI를 사용하면 이러한 디바이스 속성에 따라 앱의 레이아웃을 관리할 수 있습니다.

이 단원에서는 앱이 실행 중인 플랫폼에 따라 앱의 UI를 조정하는 .NET MAUI의 기능에 대해 알아봅니다.

Device 클래스 사용

DeviceInfo 클래스는 앱이 실행 중인 디바이스에 대한 디바이스별 정보를 제공하는 유틸리티 클래스입니다. 속성 집합을 통해 이 정보를 노출합니다. 가장 중요한 속성은 DeviceInfo.Platform(으)로, 현재 사용 중인 디바이스 유형을 나타내는 문자열을 반환합니다. 예: Android, iOS, WinUI 또는 macOS.

이 기능을 사용할 수 있는 경우의 예로 다음 시나리오를 생각해보겠습니다. .NET MAUI iOS 앱의 기본 동작은 페이지에 추가된 콘텐츠가 화면 맨 위에 있는 iOS 상태 표시줄을 침범하는 것입니다. 이 동작을 변경하려면 가장 간단한 해결 방법은 페이지에서 콘텐츠를 아래로 이동하는 것입니다. 이전 연습에서 만든 Notes 솔루션은 콘텐츠를 60포인트 아래로 이동하도록 Padding 컨트롤의 VerticalStackLayout 속성이 콘텐츠를 60포인트 만큼 아래로 이동하도록 설정하여 이 문제를 해결합니다.

<VerticalStackLayout x:Name="MyStackLayout" Padding="30,60,30,30">
    ...
</VerticalStackLayout>

하지만 iOS 경우에만 적용할 수 있다는 것이 문제입니다. Android WinUI에서 콘텐츠를 이렇게 많이 이동하면 페이지 맨 위에 화면 자산이 낭비됩니다.

DeviceInfo.Platform 속성을 쿼리하여 이 디스플레이 문제를 해결할 수 있습니다. 앱의 페이지 생성자에 다음 코드를 추가하여 페이지 맨 위에 있는 안쪽 여백을 확장할 수 있지만 iOS에만 해당됩니다.

MyStackLayout.Padding = 
    DeviceInfo.Platform == DevicePlatform.iOS
        ? new Thickness(30, 60, 30, 30) // Shift down by 60 points on iOS only
        : new Thickness(30); // Set the default margin to be 30 points

이 코드는 작동하기는 하지만, 페이지의 코드 숨김 파일에 있습니다. 안쪽 여백은 사용자 인터페이스 특정 값입니다. 틀림없이 코드 숨김 대신 XAML에서 수행하는 것이 더 적절하고 편리합니다.

OnPlatform 태그 확장 사용

.NET MAUI XAML은 XAML 코드 내에서 런타임 플랫폼을 검색할 수 있는 OnPlatform 태그 확장이 가능합니다. 속성 값을 설정하는 XAML 코드의 일부로 이 태그 확장을 적용할 수 있습니다. 확장을 사용하려면 속성 형식과 함께 플랫폼에 따라 속성 값을 설정하는 일련의 On Platform 블록을 제공해야 합니다.

다음과 같이 Padding 속성을 설정할 수 있습니다. Padding 속성의 형식은 Thickness입니다.

<VerticalStackLayout>
    <VerticalStackLayout.Padding>
        <OnPlatform x:TypeArguments="Thickness">
            <On Platform="iOS" Value="30,60,30,30" />
        </OnPlatform>
    </VerticalStackLayout.Padding>
    <!--XAML for other controls goes here -->
    ...
</VerticalStackLayout>

iOS 이외의 플랫폼의 경우 안쪽 여백은 기본값 “0,0,0,0”으로 설정한 상태가 유지됩니다. WinUI 및 Android 경우 추가 OnPlatform 블록을 사용하여 안쪽 여백을 30포인트로 설정할 수 있습니다.

<VerticalStackLayout>
    <VerticalStackLayout.Padding>
        <OnPlatform x:TypeArguments="Thickness">
            <On Platform="iOS" Value="30,60,30,30" />
            <On Platform="Android" Value="30" />
            <On Platform="WinUI" Value="30" />
        </OnPlatform>
    </VerticalStackLayout.Padding>
    ...
</VerticalStackLayout>

이 동일한 기술을 다른 속성에 적용할 수 있습니다. 다음은 페이지의 스택 레이아웃 배경색을 iOS에서 은색, Android에서 녹색, Windows에서 노란색으로 변경하는 예제입니다.

<VerticalStackLayout>
    ...
    <VerticalStackLayout.BackgroundColor>
        <OnPlatform x:TypeArguments="Color">
            <On Platform="iOS" Value="Silver" />
            <On Platform="Android" Value="Green" />
            <On Platform="WinUI" Value="Yellow" />
        </OnPlatform>
    </VerticalStackLayout.BackgroundColor>
    ...
</VerticalStackLayout>

이 구문은 약간 자세하지만 OnPlatform 확장에 사용할 수 있는 줄어든 구문이 있습니다. 다음과 같이 안쪽 여백을 설정하는 예제를 간소화할 수 있습니다.

<VerticalStackLayout Padding="{OnPlatform iOS='30,60,30,30', Default='30'}">
    <!--XAML for other controls goes here -->
</VerticalStackLayout>

플랫폼별 값과 함께 속성의 기본값을 지정할 수 있습니다. 이 양식에서 형식 매개 변수는 OnPlatform 특성이 적용되는 속성에서 유추됩니다.

배경색을 설정하려면 앞의 두 번째 예제 대신 이 XAML 조각을 사용할 수 있습니다.

<VerticalStackLayout BackgroundColor="{OnPlatform WinUI=Yellow, iOS=Silver, Android=Green}">
    ...
</VerticalStackLayout>