Xamarin.Forms의 레이아웃 동작 변경

아티클
07/18/2024

업그레이드된 .NET 다중 플랫폼 앱 UI(.NET MAUI) 앱을 실행할 때 레이아웃 동작이 다르다는 것을 알 수 있습니다. 이 중 일부는 레이아웃 간격 값이 변경된 결과입니다. 자세한 내용은 Xamarin.Forms의 기본값 변경 내용을 참조 하세요.

다음 표에서는 Xamarin.Forms와 .NET MAUI의 레이아웃 간에 추가 동작 변경을 보여 줍니다.

레이아웃	Xamarin.Forms	.NET MAUI	추천
모두	경우에 따라 크기 조정 요청이 적용되지 않습니다.	크기 조정 요청이 적용됩니다.
Grid	XAML에서 열과 행을 유추할 수 있습니다.	열과 행을 명시적으로 선언해야 합니다.	ColumnDefinitions 및 RowDefinitions를 추가합니다.
HorizontalStackLayout		`*AndExpand` 에는 아무런 영향이 없습니다.
RelativeLayout		호환성 네임스페이스가 필요합니다.	대신 사용 Grid 하거나 호환성 네임스페이 `xmlns` 스에 대한 네임스페이스를 추가합니다.
StackLayout	자식은 누적 방향으로 공간을 채울 수 있습니다.	자식은 누적되며 사용 가능한 공간을 초과합니다.	공간을 채우기 위해 자식 보기가 필요한 경우 .로 Grid변경합니다.
VerticalStackLayout		`*AndExpand` 에는 아무런 영향이 없습니다.

.NET MAUI 컨트롤은 일반적으로 명시적 크기 요청을 존중합니다. 컨트롤의 너비가 200개인 디바이스 독립적 단위를 컨트롤에 요청하는 경우 .NET MAUI는 컨트롤의 컨테이너 너비가 100개에 불과하더라도 컨트롤 너비를 200단원으로 만듭니다.

Xamarin.Forms에서 기본 레이아웃 값 변경

Xamarin.Forms는 안쪽 여백, 여백 및 간격과 같은 일부 속성 값에 대해 임의의 기본값을 사용합니다. .NET MAUI는 이러한 임의 속성 값을 0으로 변경합니다.

명시적 값을 설정하지 않은 프로젝트에서 Xamarin.Forms 기본값을 유지하려면 프로젝트에 암시적 스타일을 추가합니다. 암시적 스타일에 대한 자세한 내용은 암시적 스타일을 참조 하세요.

참고 항목

.NET MAUI 프로젝트 템플릿에는 대부분의 컨트롤에 대한 기본 스타일을 제공하는 리소스 사전이 포함되어 있습니다. 이러한 리소스 사전을 수정하거나 상속하여 앱에서 비슷한 접근 방식을 사용하는 것이 좋습니다.

다음 표에서는 Xamarin.Forms와 .NET MAUI 간에 변경된 레이아웃 속성 값을 나열합니다.

속성	Xamarin.Forms 값	.NET MAUI 값
`Grid.ColumnSpacing`	6	0
`Grid.RowSpacing`	6	0
`StackLayout.Spacing`	6	0

다음 스타일은 Xamarin.Forms 기본값을 유지합니다.

<!-- Forms defaults -->
<Style TargetType="Grid">
    <Setter Property="ColumnSpacing" Value="6"/>
    <Setter Property="RowSpacing" Value="6"/>
</Style>
<Style TargetType="StackLayout">
    <Setter Property="Spacing" Value="6"/>
</Style>
<Style TargetType="Frame">
    <Setter Property="Padding" Value="{OnPlatform 20,iOS=19}"/>
</Style>

Frame

Frame .NET MAUI에서 ..NET MAUI로 Border대체되었습니다. 그러나 Xamarin.Forms에서 쉽게 마이그레이션할 수 있도록 포함되어 있습니다. .NET MAUI 레이아웃은 모든 플랫폼에서 올바르게 측정 Frame Padding 되는 반면 Xamarin.Forms는 플랫폼 간에 약간의 불일치가 있었습니다. 이로 인해 앱이 .NET MAUI에서 동일하게 보이지 않을 수 있습니다. 위의 예제에서는 기본값을 사용하는 경우 이를 설명합니다.

그리드

Xamarin.Forms와 .NET MAUI 간의 동작에서 Grid 가장 큰 변화는 그리드가 누락된 행과 열을 자동으로 추가하지 않는다는 것입니다. 예를 들어 Xamarin.Forms에서 행 동작을 지정하지 않고 컨트롤을 a Grid 에 추가할 수 있습니다.

<Grid>
    <Label Text="Hello"/>
    <Label Grid.Row="1" Text="World"/>
</Grid>

Xamarin.Forms에서는 두 개의 행이 포함되어 있다고 Grid 선언하지 않았음에도 불구하고 두 번째 행이 자동으로 추가됩니다. .NET MAUI는 이 작업을 수행하지 않습니다. 대신 속성을 사용하여 행 수를 명시적으로 지정 Grid RowDefinitions 해야 합니다.

Important

기본적으로 .NET MAUI는 하나의 열과 하나의 행을 Grid 사용하여 만듭니다. 따라서 의도한 경우 속성과 RowDefinitions 속성을 설정할 ColumnDefinitions 필요가 없습니다.

Xamarin.Forms에서 너비가 설정된 Auto열 ColumnDefinition 에 있는 Label 경우 단어 줄 바꿈 및 테일 잘림과 같은 줄 바꿈이 암시적으로 발생합니다. .NET MAUI에서 이 시나리오에서는 열이 자식의 콘텐츠를 수용하기 위해 화면 너비를 지나 확장되므로 암시적으로 발생하지 않습니다. 가장자리 Grid 에서 Label 래핑하려면 적절한 ColumnDefinition 값을 값으로 * 설정해야 합니다.

StackLayout

.NET MAUI(StackLayout VerticalStackLayout및) 및 HorizontalStackLayoutXamarin.Forms의 스택 레이아웃에는 몇 가지 차이점이 StackLayout 있습니다.

주요 차이점은 .NET MAUI 스택 레이아웃이 매우 간단하다는 것입니다. 모두 쌓일 때까지 자식 보기를 한 방향으로 쌓습니다. 마지막 자식이 쌓일 때까지 계속 진행됩니다. 따라서 .NET MAUI 스택 레이아웃은 컨트롤을 특정 방향으로 정렬합니다. 공백을 세분화하지 않습니다. 이는 상황 및 레이아웃 옵션(예FillAndExpand: 또는 CenterAndExpand)의 *AndExpand 존재 여부에 따라 레이아웃 동작을 변경하는 Xamarin.FormsStackLayout와 완전히 다릅니다. Xamarin.Forms StackLayout 는 때때로 공간을 세분화하여 컨테이너 가장자리로 확장하거나 중지합니다. 다른 경우에는 컨테이너를 넘어 확장됩니다.

.NET MAUI HorizontalStackLayout 의 새 스택 레이아웃 및 VerticalStackLayout레이아웃 옵션을 인식하지 *AndExpand 않습니다. 이러한 레이아웃 옵션을 가진 자식이 발견되면, 그들은 단순히 거기에없는 것처럼 AndExpand 취급합니다. 예를 들어 FillAndExpand은 Fill이 됩니다. 그러나 Xamarin.Forms에서 마이그레이션을 간단히 하기 위해 .NET MAUI StackLayout 는 사용되지 않는 것으로 표시되었지만 레이아웃 옵션을 적용 *AndExpand 합니다. 사용되지 않는 멤버 사용에 대한 경고를 방지하려면 레이아웃 옵션을 사용하는 *AndExpand 레이아웃을 적절한 레이아웃 유형으로 변환해야 합니다. 다음과 같이 수행할 수 있습니다.

레이아웃이 아닌 다른 항목인 StackLayout경우 .의 AndExpand모든 사용을 제거합니다. Xamarin.Forms에서와 마찬가지로 .NET MAUI에서 AndExpand 레이아웃 옵션은 StackLayout.
누적 방향에 직교하는 속성을 모두 AndExpand 제거합니다. 예를 들어 해당 레이아웃 옵션이 적용되지 않으며 제거할 수 있는 자식이 있는 경우 StackLayout Orientation VerticalHorizontalAligment="CenterAndExpand"
나머지 AndExpand 속성이 있는 StackLayout경우 해당 StackLayout 속성을 .로 Grid변환해야 합니다. A Grid 는 공간을 세분화하도록 설계되었으며 Xamarin.Forms에 제공된 레이아웃 AndExpand 을 제공합니다. 다음 예제에서는 속성을 사용하는 Xamarin.Forms StackLayout 를 AndExpand 보여줍니다.
```
<StackLayout>
    <Label Text="Hello world!"/>
    <Image VerticalOptions="FillAndExpand" Source="dotnetbot.png"/>
</StackLayout>
```
.NET MAUI에서 변환 Grid 할 수 있습니다.
```
<Grid RowDefinitions="Auto, *">
    <Label Text="Hello world!"/>
    <Image Grid.Row="1" Source="dotnetbot.png"/>
</Grid>
```
이 변환을 수행할 때 표시된 AndExpand StackLayout 모든 항목은 해당 행 또는 열에서 크기 * 가 1인 Grid상태로 이동해야 합니다.

Important

StackLayout 콘텐츠가 부족할 때까지 누적 방향으로 계속됩니다. 해당 축을 따라 컨테이너를 세분화하지 않습니다. 콘텐츠를 한 방향으로 제한된 공간으로 제한하려면 다음과 같은 다른 레이아웃을 Grid사용해야 합니다.

RelativeLayout

RelativeLayout.NET MAUI에서는 사용하지 않는 것이 좋습니다. 대신 가능한 한 Grid 사용합니다.

반드시 필요한 RelativeLayout경우 네임스페이스에서 Microsoft.Maui.Controls.Compatibility 찾을 수 있습니다.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:compat="clr-namespace:Microsoft.Maui.Controls.Compatibility;assembly=Microsoft.Maui.Controls"
             x:Class="MyMauiApp.MyPage"
             Title="MyPage">
    <compat:RelativeLayout>
        <!-- Your code goes here -->
    </compat:RelativeLayout>
</ContentPage>

ScrollView

레이아웃으로 간주되지 않는 경우가 많지만 ScrollView 자식 콘텐츠를 스크롤하는 데 사용되므로 레이아웃으로 간주할 수 있습니다. Xamarin.Forms ScrollView 에서는 스택할 때 일관되게 동작하지 않습니다. 콘텐츠에 부분적으로 의존하는 최소 크기에 대한 임의 제한이 있으며, 일관성이 없고 때로는 놀라운 방식으로 다른 항목이 페이지에 StackLayout 맞도록 압축하는 경우가 있습니다.

.NET MAUI ScrollView 에서 제한되지 않는 한 원하는 크기로 확장됩니다. 즉, ScrollView 무한히 확장할 수 있는 내부VerticalStackLayout는 전체 콘텐츠 높이로 확장되고 스크롤되지 않습니다. Xamarin.Forms 사용자인 경우 이 동작은 혼동될 수 있습니다.

다음을 통해 공유