.NET MAUI TwoPaneView düzeni

Örneğe göz atın

TwoPaneView sınıfı, içeriği kullanılabilir alana ya yan yana ya da yukarıdan aşağıya doğru boyutlandıran ve konumlandıran iki görünüme sahip bir kapsayıcıyı temsil eder. TwoPaneView devralır Grid , bu nedenle bu özellikleri düşünmenin en kolay yolu bir kılavuza uygulanmış gibi olmasıdır.

Düzen denetimi Microsoft.Maui.Controls.Foldable NuGet paketi tarafından sağlanır.

Katlanabilir cihaz desteğine genel bakış

Katlanabilir cihazlar arasında Microsoft Surface Duo ve diğer üreticilerin Android cihazları bulunur. Telefonlar ile tabletler ve masaüstleri gibi daha büyük ekranlar arasındaki boşluğu kapatırlar çünkü uygulamaların aynı cihazda menteşeye uyum sağlama veya ekrana katlama dahil olmak üzere çeşitli ekran boyutlarına ve yönlendirmelerine uyum sağlaması gerekebilir.

Tasarım desenleri ve kullanıcı deneyimleri de dahil olmak üzere katlanabilir cihazları hedefleyen uygulamalar oluşturma hakkında daha fazla bilgi için çift ekranlı geliştirici belgelerini ziyaret edin. Ayrıca Windows, Mac ve Linux için indirebileceğiniz bir Surface Duo öykünücüsü de vardır.

Önemli

Denetim TwoPaneView yalnızca Google (Microsoft Surface Duo gibi) tarafından sağlanan Jetpack Window Manager API'sini destekleyen Android katlanabilir cihazlara uyarlanır.

Diğer tüm platformlarda ve cihazlarda (diğer Android cihazlar, iOS, macOS, Windows) ekranda orantılı olarak boyutlandırılmış bir veya iki bölmeyi dinamik olarak gösterebilen yapılandırılabilir ve duyarlı bir bölünmüş görünüm gibi davranır.

Katlanabilir Destek NuGet'i ekleme ve yapılandırma

1. Çözümünüz için NuGet Paket Yöneticisi iletişim kutusunu açın.

2. Gözat sekmesinin altında öğesini arayınMicrosoft.Maui.Controls.Foldable.

3. Microsoft.Maui.Controls.Foldable Paketi çözümünüzde yükleyin.

4. projenin sınıfına UseFoldable() MauiApp başlatma yöntemi (ve ad alanı) çağrısını yöntemine CreateMauiApp ekleyin:

   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();
   }
   

   Uygulamanın UseFoldable() durumundaki değişiklikleri algılayabilmesi için başlatma gereklidir (örneğin, katlama boyunca yayılma).

5. [Activity(...)] Platformlar/Android sınıfında özniteliğini güncelleştirerek şu seçeneklerin tümünü ConfigurationChanges içermesini MainActivity sağlayın:

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

   Bu değerler, yapılandırma değişikliklerinin ve yayılma durumunun güvenilir çift ekran desteği için daha güvenilir bir şekilde bildirilmesi için gereklidir.

TwoPaneView'ı ayarlama

Sayfanıza düzen eklemek TwoPaneView için:

1. Katlanabilir NuGet için bir foldable ad alanı diğer adı ekleyin:

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

2. TwoPaneView öğesini sayfaya kök öğesi olarak ekleyin ve ve Pane2öğesine Pane1 denetimler ekleyin:

   <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>
   

TwoPaneView modlarını anlama

Bu modlardan yalnızca biri etkin olabilir:

• SinglePane şu anda yalnızca bir bölme görünür durumda.
• Wide iki bölme yatay olarak düzenlenir. Bölmelerden biri sol tarafta, diğeri sağ taraftadır. İki ekrandayken, cihaz dikey olduğunda bu moddur.
• Tall iki bölme dikey olarak düzenlenir. Bir bölme üstte, diğeri alttadır. İki ekrandayken, cihaz yatay olduğunda bu moddur.

Yalnızca bir ekrandayken TwoPaneView'ı denetleme

aşağıdaki özellikler, tek bir ekran kapladığında TwoPaneView geçerlidir:

• MinTallModeHeight , denetimin moda girmek Tall için olması gereken en düşük yüksekliği gösterir.
• MinWideModeWidth , denetimin moda girmek Wide için olması gereken en düşük genişliği gösterir.
• Pane1Length , Mod'da Pane1'in Wide genişliğini, modun yüksekliğini Pane1 Tall ayarlar ve modda SinglePane hiçbir etkisi yoktur.
• Pane2Lengthmodun Pane2 Wide genişliğini, modun Tall Pane2 yüksekliğini ayarlar ve modda SinglePane hiçbir etkisi yoktur.

Önemli

TwoPaneView Menteşenin üzerinden yayılmışsa veya katlanmışsa bu özelliklerin etkisi yoktur.

Bir veya iki ekrandayken uygulanan özellikler

aşağıdaki özellikler, tek bir ekran veya iki ekran kapladığında TwoPaneView geçerlidir:

• TallModeConfiguration , modundayken Tall , Üst/Alt düzenlemesini veya yalnızca tek bir bölmenin tarafından tanımlandığı şekilde görünür olmasını isteyip istemediğinizi TwoPaneViewPrioritygösterir.
• WideModeConfiguration , modundayken Wide , Sol/Sağ düzenlemesini veya yalnızca tek bir bölmenin tarafından tanımlandığı şekilde görünür olmasını isteyip istemediğinizi TwoPaneViewPrioritygösterir.
• PanePrioritymodunda gösterilip gösterilmeyeceğini Pane1 SinglePane belirlerPane2.

Sorun giderme

TwoPaneView Düzen beklendiği gibi çalışmıyorsa, bu sayfadaki kurulum yönergelerini bir kez daha denetleyin. Yöntemin veya öznitelik değerlerinin UseFoldable() ConfigurationChanges atlanması veya yanlış yapılandırılması hataların yaygın nedenleridir.