Perubahan perilaku tata letak dari Xamarin.Forms

Anda mungkin melihat saat menjalankan aplikasi .NET Multi-platform App UI (.NET MAUI) yang ditingkatkan bahwa perilaku tata letak berbeda. Beberapa di antaranya adalah hasil perubahan pada nilai penspasian tata letak. Untuk informasi selengkapnya, lihat Perubahan nilai default dari Xamarin.Forms.

Tabel berikut ini memperlihatkan perubahan perilaku tambahan antara tata letak di Xamarin.Forms dan .NET MAUI:

Kontrol MAUI .NET umumnya menghormati permintaan ukuran eksplisit. Jika Anda meminta kontrol menjadi 200 unit independen perangkat, maka .NET MAUI akan membuat kontrol tersebut lebar 200 unit, bahkan jika kontainer kontrol hanya lebar 100 unit.

Perubahan nilai tata letak default dari Xamarin.Forms

Xamarin.Forms menggunakan nilai default arbitrer untuk beberapa nilai properti, seperti padding, margin, dan spasi. .NET MAUI mengubah nilai properti arbitrer ini menjadi nol.

Untuk mempertahankan nilai default Xamarin.Forms dalam proyek yang tidak mengatur nilai eksplisit, tambahkan gaya implisit ke proyek Anda. Untuk informasi selengkapnya tentang gaya implisit, lihat Gaya implisit.

Tabel berikut mencantumkan nilai properti tata letak yang telah berubah antara Xamarin.Forms dan .NET MAUI:

Gaya berikut mempertahankan default 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>

Menengah

Frame telah diganti dalam .NET MAUI oleh Border. Namun, ini termasuk untuk memudahkan migrasi dari Xamarin.Forms. Tata letak MAUI .NET mengukur Frame Padding dengan benar di semua platform, sedangkan Xamarin.Forms memiliki beberapa perbedaan di seluruh platform. Ini dapat mengakibatkan aplikasi Anda tidak terlihat sama di .NET MAUI. Contoh di atas memperkirakan hal ini jika Anda menggunakan nilai default.

Kisi

Perubahan terbesar dalam Grid perilaku antara Xamarin.Forms dan .NET MAUI adalah bahwa kisi tidak secara otomatis menambahkan baris dan kolom yang hilang untuk Anda. Misalnya, di Xamarin.Forms Anda dapat menambahkan kontrol ke Grid tanpa menentukan perilaku barisnya:

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

Dalam Xamarin.Forms, meskipun tidak menyatakan bahwa Grid berisi dua baris, baris kedua akan secara otomatis ditambahkan untuk Anda. .NET MAUI tidak melakukan ini. Sebagai gantinya, Anda harus secara eksplisit menentukan berapa banyak baris yang ada di Grid dengan RowDefinitions properti .

Dalam Xamarin.Forms, ketika berada Label di kolom tempat lebarnya ColumnDefinition diatur ke Auto, pemisah baris seperti pembungkus kata dan pemotongan ekor secara implisit terjadi. Di .NET MAUI, dalam skenario ini hentian baris tidak secara implisit terjadi karena kolom meluas melewati lebar layar untuk mengakomodasi konten anak. Jika Anda ingin Label membungkus di tepi Grid , Anda harus mengatur yang sesuai ColumnDefinition ke salah satu * atau nilai.

StackLayout

Ada beberapa perbedaan antara tata letak tumpukan di .NET MAUI (StackLayout, VerticalStackLayout, dan HorizontalStackLayout) dan StackLayout dalam Xamarin.Forms.

Perbedaan utamanya adalah tata letak tumpukan .NET MAUI sangat sederhana. Mereka menumpuk tampilan anak mereka ke satu arah sampai semuanya telah ditumpuk. Mereka akan terus berjalan sampai anak terakhir ditumpuk, bahkan jika itu membawanya melampaui ruang yang tersedia ke arah tumpukan. Oleh karena itu, tata letak tumpukan .NET MAUI mengatur kontrol ke arah tertentu. Mereka tidak membahayakan ruang. Ini sama sekali berbeda dengan Xamarin.Forms StackLayout, yang mengubah perilaku tata letaknya berdasarkan keadaan dan adanya opsi tata letak apa pun *AndExpand , seperti FillAndExpand atau CenterAndExpand. Xamarin.Forms StackLayout terkadang membagi ruang, memperluas ke atau berhenti di tepi kontainernya. Dalam kasus lain, ia memperluas di luar kontainernya.

Tata letak tumpukan baru di .NET MAUI, HorizontalStackLayout dan VerticalStackLayout, tidak mengenali *AndExpand opsi tata letak. Jika mereka menemukan anak dengan opsi tata letak seperti itu, mereka hanya memperlakukannya seolah-olah AndExpand tidak ada. Misalnya, FillAndExpand menjadi Fill. Namun, untuk kesederhanaan migrasi dari Xamarin.Forms, .NET MAUI StackLayout menghormati *AndExpand opsi tata letak, meskipun telah ditandai sebagai usang. Untuk menghindari peringatan tentang menggunakan anggota usang, Anda harus mengonversi tata letak yang menggunakan *AndExpand opsi tata letak ke jenis tata letak yang sesuai. dapat dicapai sebagai berikut:

1. Jika tata letak Anda adalah apa pun selain StackLayout, hapus semua penggunaan AndExpand. Sama seperti dalam Xamarin.Forms, di .NET MAUI AndExpand opsi tata letak tidak berpengaruh pada tata letak apa pun selain StackLayout.

2. Hapus properti apa pun AndExpand yang ortogonal ke arah tumpukan. Misalnya, jika Anda memiliki StackLayout dengan Orientation , Verticaldan memiliki anak dengan HorizontalAligment="CenterAndExpand" - opsi tata letak tersebut tidak berpengaruh dan dapat dihapus.

3. Jika Anda memiliki properti yang tersisa AndExpand pada , Anda harus mengonversinya StackLayout menjadi GridStackLayout. A Grid dirancang untuk membahayakan ruang, dan akan menyediakan tata letak yang AndExpand disediakan dalam Xamarin.Forms. Contoh berikut menunjukkan Xamarin.Forms StackLayout yang menggunakan AndExpand properti:

   <StackLayout>
       <Label Text="Hello world!"/>
       <Image VerticalOptions="FillAndExpand" Source="dotnetbot.png"/>
   </StackLayout>
   

   Ini dapat dikonversi ke Grid dalam .NET MAUI:

   <Grid RowDefinitions="Auto, *">
       <Label Text="Hello world!"/>
       <Image Grid.Row="1" Source="dotnetbot.png"/>
   </Grid>
   

   Saat melakukan konversi ini, apa pun yang ditandai AndExpand dalam StackLayout harus masuk ke baris atau kolomnya sendiri dengan ukuran * dalam Grid.

RelativeLayout

Penggunaan RelativeLayout tidak disarankan dalam .NET MAUI. Sebagai gantinya, gunakan sedapat Grid mungkin.

Jika Anda benar-benar memerlukan RelativeLayout, itu dapat ditemukan di Microsoft.Maui.Controls.Compatibility namespace:

<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

Meskipun ScrollView sering kali tidak dianggap sebagai tata letak, tata letak dapat dianggap sebagai tata letak seperti yang digunakan untuk menggulir konten anaknya. Dalam Xamarin.Forms, ScrollView tidak bertingkah konsisten saat menumpuk. Ini memiliki beberapa batas arbitrer pada ukuran minimum yang bergantung sebagian pada kontennya, dan kadang-kadang akan memadatkan untuk memungkinkan item lain agar pas di halaman di dalam StackLayout dengan cara yang tidak konsisten dan kadang-kadang mengejutkan.

Di .NET MAUI, ScrollView meluas ke ukuran apa pun yang diinginkannya kecuali dibatasi. Ini berarti bahwa di dalam VerticalStackLayout, yang dapat berkembang tanpa batas, ScrollView akan meluas ke tinggi konten lengkapnya dan tidak menggulir. Perilaku ini bisa membingungkan jika Anda adalah pengguna Xamarin.Forms.