Layoutverhaltensänderungen von Xamarin.Forms
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.
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 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.
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.
Wenn sich in Xamarin.Forms ein Label
in einer Spalte befindet, in der die Breite von ColumnDefinition
auf Auto
festgelegt ist, treten Zeilenumbrüche (z. B. durch Worttrennung) und Kürzungen implizit auf. In .NET MAUI treten in diesem Szenario Zeilenwechsel nicht implizit auf, da die Spalte um die Breite des Bildschirms erweitert wird, um den Inhalt des untergeordneten Elements einzuschließen. Wenn der Zeilenumbruch für Label am Rand von Grid erfolgen soll, sollten Sie die entsprechende ColumnDefinition
entweder auf *
oder einen Wert festlegen.
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 dieAndExpand
-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 einemOrientation
vonVertical
haben, und es hat ein untergeordnetes Element mit einemHorizontalAligment="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, dasAndExpand
in Xamarin.Forms bietet. Das folgende Beispiel zeigt ein Xamarin.FormsStackLayout
, das eineAndExpand
-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
imStackLayout
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.
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>
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.
Feedback zu .NET MAUI
.NET MAUI ist ein Open Source-Projekt. Wählen Sie einen Link aus, um Feedback zu geben: