Tata letak .NET MAUI TwoPaneView

Telusuri sampel

Kelas TwoPaneView mewakili kontainer dengan dua tampilan yang ukuran dan posisi konten di ruang yang tersedia, baik berdampingan atau atas ke bawah. TwoPaneView mewarisi dari Grid jadi cara term mudah untuk memikirkan properti ini adalah seolah-olah mereka diterapkan ke kisi.

Kontrol tata letak disediakan oleh paket NuGet Microsoft.Maui.Controls.Foldable.

Gambaran umum dukungan perangkat yang dapat dilipat

Perangkat yang dapat dilipat termasuk perangkat Microsoft Surface Duo dan Android dari produsen lain. Mereka menjenjang kesenjangan antara ponsel dan layar yang lebih besar seperti tablet dan desktop karena aplikasi mungkin perlu menyesuaikan dengan berbagai ukuran layar dan orientasi pada perangkat yang sama, termasuk beradaptasi dengan engsel atau lipatan di layar.

Kunjungi dokumen pengembang layar ganda untuk informasi selengkapnya tentang membangun aplikasi yang menargetkan perangkat yang dapat dilipat, termasuk pola desain dan pengalaman pengguna. Ada juga emulator Surface Duo yang dapat Anda unduh untuk Windows, Mac, dan Linux.

Penting

Kontrol TwoPaneView hanya beradaptasi dengan perangkat yang dapat dilipat Android yang mendukung API Jetpack Window Manager yang disediakan oleh Google (seperti Microsoft Surface Duo).

Pada semua platform dan perangkat lain (yaitu perangkat Android lainnya, iOS, macOS, Windows) ia bertindak seperti tampilan terpisah yang dapat dikonfigurasi dan responsif yang dapat menampilkan satu atau dua panel secara dinamis, berukuran proporsional di layar.

Menambahkan dan mengonfigurasi dukungan Foldable NuGet

1. Buka dialog Manajer Paket NuGet untuk solusi Anda.

2. Di bawah tab Telusuri , cari Microsoft.Maui.Controls.Foldable.

3. Instal paket ke Microsoft.Maui.Controls.Foldable solusi Anda.

4. UseFoldable() Tambahkan panggilan metode inisialisasi (dan namespace layanan) ke kelas proyekMauiApp, dalam CreateMauiApp metode :

   using Microsoft.Maui.Foldable; // ADD THIS NAMESPACE
   ...
   public static MauiApp CreateMauiApp()
   {
       var builder = MauiApp.CreateBuilder();
       ...
       builder.UseFoldable(); // ADD THIS LINE TO THE TEMPLATE
       return builder.Build();
   }
   

   Inisialisasi UseFoldable() diperlukan agar aplikasi dapat mendeteksi perubahan dalam status aplikasi, seperti terbentang di seluruh lipatan.

5. [Activity(...)] Perbarui atribut pada MainActivity kelas di Platform/Android, sehingga mencakup semua opsi iniConfigurationChanges:

   ConfigurationChanges = ConfigChanges.Orientation | ConfigChanges.ScreenSize
       | ConfigChanges.ScreenLayout | ConfigChanges.SmallestScreenSize | ConfigChanges.UiMode
   

   Nilai-nilai ini diperlukan sehingga perubahan konfigurasi dan status rentang dapat lebih andal dilaporkan untuk dukungan layar ganda yang andal.

Menyiapkan TwoPaneView

Untuk menambahkan tata letak ke TwoPaneView halaman Anda:

1. foldable Tambahkan alias namespace layanan untuk Foldable NuGet:

   xmlns:foldable="clr-namespace:Microsoft.Maui.Controls.Foldable;assembly=Microsoft.Maui.Controls.Foldable"
   

2. TwoPaneView Tambahkan sebagai elemen akar pada halaman, dan tambahkan kontrol ke Pane1 dan Pane2:

   <foldable:TwoPaneView x:Name="twoPaneView">
       <foldable:TwoPaneView.Pane1
           BackgroundColor="#dddddd">
           <Label
               Text="Hello, .NET MAUI!"
               SemanticProperties.HeadingLevel="Level1"
               FontSize="32"
               HorizontalOptions="Center" />
       </foldable:TwoPaneView.Pane1>
       <foldable:TwoPaneView.Pane2>
           <StackLayout BackgroundColor="{AppThemeBinding Light={StaticResource Secondary}, Dark={StaticResource Primary}}">
               <Label Text="Pane2 StackLayout"/>
           </StackLayout>
       </foldable:TwoPaneView.Pane2>
   </foldable:TwoPaneView>
   

Memahami mode TwoPaneView

Hanya salah satu mode ini yang dapat aktif:

• SinglePane hanya satu panel yang saat ini terlihat.
• Wide dua panel ditata secara horizontal. Satu panel berada di sebelah kiri dan panel lainnya berada di sebelah kanan. Ketika pada dua layar, ini adalah mode saat perangkat adalah potret.
• Tall dua panel ditata secara vertikal. Satu panel berada di atas dan panel lainnya berada di bawah. Ketika pada dua layar, ini adalah mode ketika perangkat adalah lanskap.

Mengontrol TwoPaneView saat hanya berada di satu layar

Properti berikut berlaku saat TwoPaneView menempati satu layar:

• MinTallModeHeight menunjukkan tinggi minimum kontrol harus memasuki Tall mode.
• MinWideModeWidth menunjukkan lebar minimum kontrol harus memasuki Wide mode.
• Pane1Length mengatur lebar Panel1 dalam Wide mode, tinggi Pane1 dalam Tall mode, dan tidak berpengaruh dalam SinglePane mode.
• Pane2Length mengatur lebar Pane2 dalam Wide mode, tinggi Pane2 dalam Tall mode, dan tidak berpengaruh dalam SinglePane mode.

Penting

TwoPaneView Jika dibentangkan di seluruh engsel atau melipat properti ini tidak berpengaruh.

Properti yang berlaku saat pada satu atau dua layar

Properti berikut berlaku saat TwoPaneView menempati satu layar atau dua layar:

• TallModeConfiguration menunjukkan, saat dalam Tall mode, pengaturan Atas/Bawah atau jika Anda hanya ingin satu panel terlihat seperti yang TwoPaneViewPriorityditentukan oleh .
• WideModeConfiguration menunjukkan, saat dalam Wide mode, pengaturan Kiri/Kanan atau jika Anda hanya ingin satu panel terlihat seperti yang TwoPaneViewPriorityditentukan oleh .
• PanePriority menentukan apakah akan ditampilkan Pane1 atau Pane2 jika dalam SinglePane mode.

Pemecahan Masalah

TwoPaneView Jika tata letak tidak berfungsi seperti yang diharapkan, periksa kembali instruksi penyetelan di halaman ini. Menghilangkan atau salah mengonfigurasi UseFoldable() metode atau ConfigurationChanges nilai atribut adalah penyebab umum kesalahan.