Modifiche al comportamento del layout da Xamarin.Forms

  • Articolo

Quando si esegue l'app .NET Multipiattaforma (.NET MAUI) aggiornata, è possibile notare che il comportamento del layout è diverso. Alcuni di questi sono il risultato delle modifiche apportate ai valori di spaziatura del layout. Per altre informazioni, vedere Modifiche dei valori predefiniti da Xamarin.Forms.

La tabella seguente illustra modifiche aggiuntive del comportamento tra i layout in Xamarin.Forms e .NET MAUI:

Layout Xamarin.Forms .NET MAUI Elemento consigliato
Tutte le date In alcuni casi le richieste di ridimensionamento non vengono rispettate. Le richieste di ridimensionamento vengono rispettate.
Grid Le colonne e le righe possono essere dedotte da XAML. Le colonne e le righe devono essere dichiarate in modo esplicito. Aggiungere ColumnDefinitions e RowDefinitions.
HorizontalStackLayout *AndExpand non ha alcun effetto.
RelativeLayout Richiede lo spazio dei nomi di compatibilità. Usare Grid invece o aggiungere per xmlns lo spazio dei nomi di compatibilità.
StackLayout Gli elementi figlio possono riempire lo spazio nella direzione di impilamento. Gli elementi figlio sono impilati e andranno oltre lo spazio disponibile. Se sono necessarie visualizzazioni figlio per riempire lo spazio, passare a .Grid
VerticalStackLayout *AndExpand non ha alcun effetto.

I controlli MAUI .NET in genere onorgano richieste di dimensioni esplicite. Se si chiede a un controllo di avere una larghezza di 200 unità indipendenti dal dispositivo, .NET MAUI farà in modo che tale controllo sia largo 200 unità, anche se il contenitore del controllo è largo solo 100 unità.

Modifiche del valore di layout predefinito da Xamarin.Forms

Xamarin.Forms usa valori predefiniti arbitrari per alcuni valori di proprietà, ad esempio spaziatura interna, margini e spaziatura. .NET MAUI modifica i valori di queste proprietà arbitrarie su zero.

Per mantenere i valori predefiniti di Xamarin.Forms nei progetti che non impostano valori espliciti, aggiungere stili impliciti al progetto. Per altre informazioni sugli stili impliciti, vedere Stili impliciti.

Nota

Il modello di progetto .NET MAUI include dizionari risorse che forniscono stili predefiniti per la maggior parte dei controlli. È consigliabile adottare un approccio simile nelle app modificando o ereditando da questi dizionari risorse.

Nella tabella seguente sono elencati i valori delle proprietà di layout modificati tra Xamarin.Forms e .NET MAUI:

Proprietà Valore di Xamarin.Forms Valore MAUI .NET
Grid.ColumnSpacing 6 0
Grid.RowSpacing 6 0
StackLayout.Spacing 6 0

Gli stili seguenti mantengono le impostazioni predefinite di 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 è stato sostituito in .NET MAUI da Border. Tuttavia, è incluso per semplificare la migrazione da Xamarin.Forms. Il layout MAUI .NET misura FramePadding correttamente in tutte le piattaforme, mentre Xamarin.Forms presenta alcune discrepanze tra le piattaforme. Ciò può comportare che le app non siano uguali in .NET MAUI. L'esempio precedente si verifica se si usano valori predefiniti.

Griglia

La modifica più importante del Grid comportamento tra Xamarin.Forms e .NET MAUI è che le griglie non aggiungono automaticamente righe e colonne mancanti. Ad esempio, in Xamarin.Forms è possibile aggiungere controlli a un oggetto Grid senza specificare il comportamento di riga:

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

In Xamarin.Forms, nonostante non dichiari che Grid contiene due righe, verrà aggiunta automaticamente una seconda riga. .NET MAUI non esegue questa operazione. È invece necessario specificare in modo esplicito il numero di righe in Grid con la RowDefinitions proprietà .

Importante

Per impostazione predefinita, .NET MAUI crea un oggetto Grid con una colonna e una riga. Pertanto, non è necessario impostare le ColumnDefinitions proprietà e RowDefinitions se si tratta dell'intenzione.

StackLayout

Esistono diverse differenze tra i layout dello stack in .NET MAUI (StackLayout, VerticalStackLayoute ) e HorizontalStackLayoutin StackLayout Xamarin.Forms.

La differenza principale è che i layout dello stack .NET MAUI sono molto semplici. Eseguono lo stack delle visualizzazioni figlio in un'unica direzione fino a quando non vengono impilate tutte. Continueranno ad andare avanti fino a quando l'ultimo figlio è stato impilati, anche se li prende oltre lo spazio disponibile nella direzione di impilamento. Pertanto, i layout dello stack MAUI .NET dispongono i controlli in una particolare direzione. Non suddividono uno spazio. Questo comportamento è completamente diverso da Xamarin.Forms StackLayout, che modifica il comportamento del layout in base alle circostanze e alla presenza di qualsiasi *AndExpand opzione di layout, ad esempio FillAndExpand o CenterAndExpand. Xamarin.Forms StackLayout a volte suddivide lo spazio, espandendosi o arrestando al bordo del contenitore. In altri casi, si espande oltre il relativo contenitore.

I nuovi layout dello stack in .NET MAUI HorizontalStackLayout e VerticalStackLayout, non riconoscono le opzioni di *AndExpand layout. Se incontrano un bambino con tali opzioni di layout, lo considerano semplicemente come se AndExpand non fosse presente. Ad esempio, FillAndExpand diventa Fill. Tuttavia, per semplicità di migrazione da Xamarin.Forms, .NET MAUI StackLayout rispetta le *AndExpand opzioni di layout, anche se sono state contrassegnate come obsolete. Per evitare avvisi sull'uso di membri obsoleti, è necessario convertire i layout che usano *AndExpand le opzioni di layout nel tipo di layout appropriato. L'oggetto può essere ottenuto nel modo seguente:

  1. Se il layout è diverso da , StackLayoutrimuovere tutti gli usi di AndExpand. Proprio come in Xamarin.Forms, in .NET MAUI le AndExpand opzioni di layout non hanno alcun effetto su alcun layout diverso da StackLayout.

  2. Rimuovere tutte AndExpand le proprietà ortogonali nella direzione di impilamento. Ad esempio, se si dispone di un StackLayout oggetto con un Orientation di Verticale ha un elemento figlio con un HorizontalAligment="CenterAndExpand" oggetto , le opzioni di layout non hanno alcun effetto e possono essere rimosse.

  3. Se sono presenti proprietà rimanenti AndExpand in un StackLayoutoggetto , è necessario convertirlo StackLayout in un Gridoggetto . Un Grid oggetto è progettato per suddividere uno spazio e fornirà il layout AndExpand fornito in Xamarin.Forms. L'esempio seguente illustra un oggetto Xamarin.Forms StackLayout che usa una AndExpand proprietà :

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

    Questa operazione può essere convertita in in Grid .NET MAUI:

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

    Quando si esegue questa conversione, qualsiasi elemento contrassegnato AndExpand in StackLayout deve entrare nella propria riga o colonna con una dimensione di * in Grid.

Importante

Un StackLayout oggetto continua nella direzione di impilamento fino a quando non esaurisce il contenuto. Non suddivide il contenitore lungo l'asse. Se si desidera limitare il contenuto a uno spazio vincolato in una direzione, è consigliabile usare un altro layout, ad esempio .Grid

RelativeLayout

L'uso di RelativeLayout non è consigliato in .NET MAUI. Usare invece un oggetto Grid laddove possibile.

Se è assolutamente necessario , RelativeLayoutè possibile trovarlo nello spazio dei Microsoft.Maui.Controls.Compatibility nomi :

<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

Anche se ScrollView spesso non è considerato un layout, può essere considerato come un layout usato per scorrere il contenuto figlio. In Xamarin.Forms ScrollView non si comporta in modo coerente durante lo stack. Ha alcuni limiti arbitrari sulle dimensioni minime che dipendono parzialmente dal suo contenuto e talvolta comprimere per consentire ad altri elementi di adattarsi alla pagina all'interno di un StackLayout modo incoerente e talvolta sorprendente.

In .NET MAUI, l'oggetto ScrollView si espande fino a qualsiasi dimensione che vuole essere vincolato in altro modo. Ciò significa che all'interno di un VerticalStackLayoutoggetto , che può espandersi infinitamente, un ScrollView oggetto espanderà fino all'altezza del contenuto completo e non scorre. Questo comportamento può generare confusione se si è un utente di Xamarin.Forms.