Layoutverhaltensänderungen von Xamarin.Forms

Artikel
05/14/2024

Wenn Sie Ihre aktualisierte .NET Multiplatform App UI (.NET MAUI) Anwendung ausführen, werden Sie feststellen, dass sich das Layout anders verhält. Dies ist das Ergebnis von Änderungen an Layoutabstandswerten. Weitere Informationen finden Sie unter Standardwertänderungen von Xamarin.Forms.

Die folgende Tabelle zeigt zusätzliche Verhaltensänderungen zwischen Layouts in Xamarin.Forms und .NET MAUI:

Layout	Xamarin.Forms	.NET MAUI	Empfehlung
Alle	In bestimmten Fällen werden Größenanpassungsanforderungen nicht berücksichtigt.	Größenanpassungsanforderungen werden berücksichtigt.
Grid	Spalten und Zeilen können aus XAML abgeleitet werden.	Spalten und Zeilen müssen explizit deklariert werden.	Fügen Sie ColumnDefinitions und RowDefinitions hinzu.
HorizontalStackLayout		`*AndExpand` hat keinerlei Auswirkung.
RelativeLayout		Erfordert den Kompatibilitätsnamespace.	Verwenden Sie stattdessen Grid, oder fügen Sie `xmlns` für den Kompatibilitätsnamespace hinzu.
StackLayout	Untergeordnete Elemente können Platz in der Stapelrichtung ausfüllen.	Untergeordnete Elemente werden gestapelt und gehen über den verfügbaren Platz hinaus.	Wenn Sie untergeordnete Ansichten benötigen, um Platz zu füllen wechseln Sie zu Grid.
VerticalStackLayout		`*AndExpand` hat keinerlei Auswirkung.

.NET MAUI-Steuerelemente erfüllen in der Regel explizite Größenanforderungen. Wenn Sie verlangen, dass ein Steuerelement 200 geräteunabhängige Einheiten breit ist, dann macht .NET MAUI dieses Steuerelement 200 Einheiten breit, auch wenn der Container des Steuerelements nur 100 Einheiten breit ist.

Standardlayoutwertänderungen von Xamarin.Forms

Xamarin.Forms verwendet beliebige Standardwerte für einige Eigenschaftswerte, z. B. Abstand, Seitenränder und Abstände. .NET MAUI ändert diese beliebigen Eigenschaftswerte in Null.

Um die Xamarin.Forms-Standardwerte in Projekten zu erhalten, die keine expliziten Werte festlegen, fügen Sie Ihrem Projekt implizite Stile hinzu. Für weitere Informationen über implizite Stile, siehe Implizite Stile.

Hinweis

Die .NET MAUI-Projektvorlage enthält Ressourcenwörterbücher, die Standardstile für die meisten Steuerelemente bereitstellen. Es wird empfohlen, dass Sie in Ihren Anwendungen einen ähnlichen Ansatz verfolgen, indem Sie diese Ressourcen-Wörterbücher modifizieren oder von ihnen erben.

In der folgenden Tabelle sind die Layouteigenschaftenwerte aufgeführt, die sich zwischen Xamarin.Forms und .NET MAUI geändert haben:

Eigenschaft	Xamarin.Forms-Wert	.NET MAUI-Wert
`Grid.ColumnSpacing`	6	0
`Grid.RowSpacing`	6	0
`StackLayout.Spacing`	6	0

Die folgenden Formatvorlagen behalten die Standardwerte für Xamarin.Forms bei:

<!-- 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 wurde in .NET MAUI durch Border ersetzt. Es ist jedoch enthalten, um die Migration von Xamarin.Forms zu vereinfachen. Das .NET MAUI-Layout misst FramePadding auf allen Plattformen korrekt, während Xamarin.Forms auf verschiedenen Plattformen Abweichungen aufwies. Dies kann dazu führen, dass Ihre Apps in .NET MAUI nicht gleich aussehen. Dies wird im obigen Beispiel verdeutlicht, wenn Sie die Standardwerte verwenden.

Raster

Die größte Änderung im Grid-Verhalten zwischen Xamarin.Forms und .NET MAUI besteht darin, dass Grids fehlende Zeilen und Spalten nicht automatisch für Sie hinzufügen. In Xamarin.Forms können Sie z. B. Steuerelemente zu einem Grid hinzufügen, ohne deren Zeilenverhalten festzulegen:

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

In Xamarin.Forms, trotz nicht deklarieren, dass die Grid zwei Zeilen enthält, würde eine zweite Zeile automatisch für Sie hinzugefügt werden. .NET MAUI tut dies nicht. Stattdessen müssen Sie mit der Eigenschaft RowDefinitions explizit angeben, wie viele Zeilen sich im Grid befinden.

Wichtig

Standardmäßig erstellt .NET MAUI ein Grid mit einer Spalte und einer Zeile. Daher ist es nicht erforderlich, die ColumnDefinitions-Eigenschaften RowDefinitions festzulegen, wenn dies Ihre Absicht ist.

StackLayout

Es gibt mehrere Unterschiede zwischen den Stapel-Layouts in .NET MAUI (StackLayout, VerticalStackLayout und HorizontalStackLayout) und dem StackLayout in Xamarin.Forms.

Der Hauptunterschied besteht darin, dass die Layouts der .NET MAUI-Stapel sehr einfach sind. Sie stapeln ihre untergeordneten Ansichten in einer einzigen Richtung, bis alle gestapelt wurden. Sie werden so lange weitermachen, bis das letzte Kind gestapelt ist, auch wenn dadurch der verfügbare Platz in Stapelrichtung überschritten wird. Daher ordnen .NET MAUI-Stapel-Layouts Steuerelemente in einer bestimmten Richtung an. Sie unterteilen keinen Raum. Dies unterscheidet sich grundlegend vom Xamarin.Forms StackLayout, das sein Layout-Verhalten abhängig von den Umständen und dem Vorhandensein von *AndExpand-Layoutoptionen wie FillAndExpand oder CenterAndExpand ändert. Das Xamarin.Forms StackLayout unterteilt manchmal den Raum, indem es sich bis zum Rand seines Containers ausdehnt oder dort stoppt. In anderen Fällen wird es über den Container hinaus erweitert.

Die neuen Stapel-Layouts in .NET MAUI, HorizontalStackLayout und VerticalStackLayout, erkennen die *AndExpand-Layoutoptionen nicht. Wenn sie auf ein untergeordnetes Element mit solchen Layout-Optionen stoßen, behandeln sie es einfach so, als ob das AndExpand nicht vorhanden wäre. Beispielsweise wird FillAndExpand zu Fill. Um die Migration von Xamarin.Forms zu vereinfachen, berücksichtigt das .NET MAUI StackLayout jedoch die *AndExpand-Layoutoptionen, obwohl diese als veraltet markiert wurden. Um Warnungen über die Verwendung veralteter Elemente zu vermeiden, sollten Sie Ihre Layouts, die *AndExpand-Layoutoptionen verwenden, in den entsprechenden Layouttyp konvertieren. Dies kann wie folgt erreicht werden:

Wenn Ihr Layout etwas anderes als ein StackLayout ist, entfernen Sie alle Verwendungen von AndExpand. Genau wie in Xamarin.Forms haben die AndExpand-Layoutoptionen in .NET MAUI keine Auswirkung auf ein anderes Layout als StackLayout.
Entfernen Sie alle AndExpand Eigenschaften, die orthogonal zur Stapelrichtung sind. Wenn Sie zum Beispiel ein StackLayout mit einem Orientation von Vertical haben, und es hat ein untergeordnetes Element mit einem HorizontalAligment="CenterAndExpand" – diese Layout-Optionen haben keine Wirkung und können entfernt werden.
Wenn Sie noch AndExpand Eigenschaften auf einem StackLayout haben, sollten Sie dieses StackLayout in ein Grid umwandeln. Ein Grid dient dazu, einen Bereich zu unterteilen, und bietet das Layout, das AndExpand in Xamarin.Forms bietet. Das folgende Beispiel zeigt ein Xamarin.Forms StackLayout, das eine AndExpand-Eigenschaft verwendet:
```
<StackLayout>
    <Label Text="Hello world!"/>
    <Image VerticalOptions="FillAndExpand" Source="dotnetbot.png"/>
</StackLayout>
```
Dies kann in .NET MAUI in ein Grid umgewandelt werden:
```
<Grid RowDefinitions="Auto, *">
    <Label Text="Hello world!"/>
    <Image Grid.Row="1" Source="dotnetbot.png"/>
</Grid>
```
Beim Ausführen dieser Konvertierung sollte alles, was als AndExpand im StackLayout markiert wurde, in einer eigene Zeile oder Spalte mit einer Größe von * im Grid angezeigt werden.

Wichtig

Ein StackLayout-Vorgang wird in der Stapelrichtung fortgesetzt, bis der Inhalt nicht mehr angezeigt wird. Er unterteilt seinen Container nicht entlang dieser Achse. Wenn Sie Ihre Inhalte auf einen eingeschränkten Platz in eine Richtung beschränken möchten, sollten Sie ein anderes Layout, wie beispielsweise ein Grid verwenden.

RelativeLayout

Die Verwendung von RelativeLayout wird in .NET MAUI nicht empfohlen. Verwenden Sie stattdessen nach Möglichkeit ein Grid.

Wenn Sie unbedingt ein RelativeLayout benötigen, finden Sie es im Microsoft.Maui.Controls.Compatibility-Namenspace:

<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

Obwohl ScrollView oft nicht als Layout betrachtet wird, kann es als Layout angesehen werden, da es zum Blättern des untergeordneten Inhalts verwendet wird. In Xamarin.Forms verhält sich ScrollView beim Stapeln nicht konsistent. Es hat einige willkürliche Grenzen für die Mindestgröße, die teilweise von seinem Inhalt abhängen, und es wird manchmal komprimiert, damit andere Elemente auf der Seite innerhalb eines StackLayout in einer Weise passen, die inkonsistent und manchmal überraschend ist.

In .NET MAUI lässt sich ScrollView auf jede beliebige Größe ausdehnen, sofern keine anderen Einschränkungen gelten. Das bedeutet, dass sich ein ScrollView innerhalb eines VerticalStackLayout, das sich unendlich ausdehnen kann, auf seine volle Inhaltshöhe ausdehnt und nicht scrollt. Dieses Verhalten kann verwirrend sein, wenn Sie Xamarin.Forms verwenden.

Share via