AbsoluteLayout
Durchsuchen des Beispiels
Die .NET Multi-platform App UI (.NET MAUI) AbsoluteLayout wird verwendet, um die Position und Größe von untergeordneten Elementen mit expliziten Werten zu bestimmen. Die Position wird durch die obere linke Ecke des untergeordneten Elements relativ zur oberen linken Ecke des AbsoluteLayout in geräteunabhängigen Einheiten angegeben. AbsoluteLayout implementiert außerdem eine Funktion für proportionale Positionierung und Größenanpassung. Außerdem kann AbsoluteLayout im Gegensatz zu einigen anderen Layout-Klassen Kinder so positionieren, dass sie sich überlappen.
Ein AbsoluteLayout sollte als Speziallayout betrachtet werden, das nur dann verwendet wird, wenn Sie den untergeordneten Elementen eine bestimmte Größe vorschreiben können oder wenn die Größe des Elements die Positionierung anderer untergeordneter Elemente nicht beeinflusst.
Die AbsoluteLayout-Klasse definiert die folgenden Eigenschaften:
LayoutBounds, vom TypRect, das eine angehängte Eigenschaft ist, die die Position und Größe eines untergeordneten Elements darstellt. Der Standardwert für diese Eigenschaft ist (0,0,AutoSize,AutoSize).LayoutFlags, vom TypAbsoluteLayoutFlags, eine angehängte Eigenschaft, die angibt, ob Eigenschaften der Layoutgrenzen, die zur Positionierung und Größe des untergeordneten Elements verwendet werden, proportional interpretiert werden. Der Standardwert dieser Eigenschaft istAbsoluteLayoutFlags.None.
All diese Eigenschaften werden durch BindableProperty-Objekte unterstützt, was bedeutet, dass sie Ziele von Datenbindungen sein können und formatiert werden können. Weitere Informationen über angehängte Eigenschaften finden Sie unter .NET MAUI angehängte Eigenschaften.
Positionieren und Größenanpassung untergeordneter Elemente
Die Position und Größe der untergeordneten Elemente in einem AbsoluteLayout wird durch die Einstellung der AbsoluteLayout.LayoutBounds angehängten Eigenschaft jedes untergeordneten Elements definiert, wobei absolute oder proportionale Werte verwendet werden. Absolute und proportionale Werte können für Kinder gemischt werden, wenn die Position skaliert werden soll, die Größe aber konstant bleiben soll, oder umgekehrt. Informationen über absolute Werte finden Sie unter Absolute Positionierung und Größenbestimmung. Informationen über proportionale Werte finden Sie unter Proportionale Positionierung und Größenbestimmung.
Die angehängte Eigenschaft AbsoluteLayout.LayoutBounds kann in zwei Formaten eingestellt werden, unabhängig davon, ob absolute oder proportionale Werte verwendet werden:
x, y. Bei diesem Format geben die Wertexundydie Position der oberen linken Ecke des untergeordneten Elements im Verhältnis zu seinem übergeordneten Element an. Das untergeordnete Element ist ungebunden und legt seine Größe selbst fest.x, y, width, height. Bei diesem Format geben die Wertexundydie Position der linken oberen Ecke des untergeordneten Elements relativ zu seinem übergeordneten Element an, während die Wertewidthundheightdie Größe des untergeordneten Elements angeben.
Um festzulegen, dass sich ein untergeordnetes Element horizontal oder vertikal oder beides vergrößert, setzen Sie die Werte width und/oder height auf die Eigenschaft AbsoluteLayout.AutoSize. Die übermäßige Verwendung dieser Eigenschaft kann jedoch die Leistung der Anwendung beeinträchtigen, da sie die Layout-Engine veranlasst, zusätzliche Layout-Berechnungen durchzuführen.
Wichtig
Die Eigenschaften HorizontalOptions und VerticalOptions haben keinen Effekt auf untergeordnete Elemente eines AbsoluteLayout.
Absolute Positionierung und Größenbestimmung
Standardmäßig positioniert und skaliert ein AbsoluteLayout Kinder anhand absoluter Werte, die in geräteunabhängigen Einheiten angegeben werden, die explizit festlegen, wo Kinder im Layout platziert werden sollen. Dies wird erreicht, indem man untergeordnete Elemente zu einem AbsoluteLayout hinzufügt und die AbsoluteLayout.LayoutBounds angehängte Eigenschaft jedes untergeordneten Elements auf absolute Positions- und/oder Größenwerte setzt.
Warnung
Die Verwendung absoluter Werte für die Positionierung und Größenanpassung von untergeordneten Elementen kann problematisch sein, da verschiedene Geräte unterschiedliche Bildschirmgrößen und Auflösungen haben. Daher können die Koordinaten für die Mitte des Bildschirms auf einem Gerät auf anderen Geräten versetzt sein.
Die folgende XAML zeigt ein AbsoluteLayout, dessen untergeordnete Elemente mit absoluten Werten positioniert werden:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="AbsoluteLayoutDemos.Views.XAML.StylishHeaderDemoPage"
Title="Stylish header demo">
<AbsoluteLayout Margin="20">
<BoxView Color="Silver"
AbsoluteLayout.LayoutBounds="0, 10, 200, 5" />
<BoxView Color="Silver"
AbsoluteLayout.LayoutBounds="0, 20, 200, 5" />
<BoxView Color="Silver"
AbsoluteLayout.LayoutBounds="10, 0, 5, 65" />
<BoxView Color="Silver"
AbsoluteLayout.LayoutBounds="20, 0, 5, 65" />
<Label Text="Stylish Header"
FontSize="24"
AbsoluteLayout.LayoutBounds="30, 25" />
</AbsoluteLayout>
</ContentPage>
In diesem Beispiel wird die Position jedes BoxView-Objekts anhand der ersten beiden absoluten Werte definiert, die in der angehängten Eigenschaft AbsoluteLayout.LayoutBounds angegeben sind. Die Größe der einzelnen BoxView wird durch den dritten und vierten Wert bestimmt. Die Position des Label-Objekts wird über die beiden absoluten Werte definiert, die in der angehängten Eigenschaft AbsoluteLayout.LayoutBounds angegeben sind. Für Label sind keine Größenwerte angegeben, so dass er sich selbständig vergrößern kann. In allen Fällen handelt es sich bei den absoluten Werten um geräteunabhängige Einheiten.
Der folgende Screenshot zeigt das Layout, das sich ergibt:
Der entsprechende C#-Code ist unten dargestellt:
public class StylishHeaderDemoPage : ContentPage
{
public StylishHeaderDemoPage()
{
AbsoluteLayout absoluteLayout = new AbsoluteLayout
{
Margin = new Thickness(20)
};
absoluteLayout.Add(new BoxView
{
Color = Colors.Silver
}, new Rect(0, 10, 200, 5));
absoluteLayout.Add(new BoxView
{
Color = Colors.Silver
}, new Rect(0, 20, 200, 5));
absoluteLayout.Add(new BoxView
{
Color = Colors.Silver
}, new Rect(10, 0, 5, 65));
absoluteLayout.Add(new BoxView
{
Color = Colors.Silver
}, new Rect(20, 0, 5, 65));
absoluteLayout.Add(new Label
{
Text = "Stylish Header",
FontSize = 24
}, new Point(30,25));
Title = "Stylish header demo";
Content = absoluteLayout;
}
}
In diesem Beispiel wird die Position und Größe jedes BoxView durch ein Rect-Objekt definiert. Die Position des Label wird über ein Point-Objekt definiert. Das C#-Beispiel verwendet die folgenden Add-Erweiterungsmethoden, um dem AbsoluteLayout untergeordnete Elemente hinzuzufügen:
using Microsoft.Maui.Layouts;
namespace Microsoft.Maui.Controls
{
public static class AbsoluteLayoutExtensions
{
public static void Add(this AbsoluteLayout absoluteLayout, IView view, Rect bounds, AbsoluteLayoutFlags flags = AbsoluteLayoutFlags.None)
{
if (view == null)
throw new ArgumentNullException(nameof(view));
if (bounds.IsEmpty)
throw new ArgumentNullException(nameof(bounds));
absoluteLayout.Add(view);
absoluteLayout.SetLayoutBounds(view, bounds);
absoluteLayout.SetLayoutFlags(view, flags);
}
public static void Add(this AbsoluteLayout absoluteLayout, IView view, Point position)
{
if (view == null)
throw new ArgumentNullException(nameof(view));
if (position.IsEmpty)
throw new ArgumentNullException(nameof(position));
absoluteLayout.Add(view);
absoluteLayout.SetLayoutBounds(view, new Rect(position.X, position.Y, AbsoluteLayout.AutoSize, AbsoluteLayout.AutoSize));
}
}
}
In C# ist es auch möglich, die Position und Größe eines untergeordneten Elements eines AbsoluteLayout zu bestimmen, nachdem es dem Layout hinzugefügt wurde, indem die Methode AbsoluteLayout.SetLayoutBounds verwendet wird. Das erste Argument dieser Methode ist das untergeordnete Element, das zweite ist ein Rect-Objekt.
Hinweis
Ein AbsoluteLayout, das absolute Werte verwendet, kann untergeordnete Elemente so positionieren und vergrößern, dass sie nicht in die Grenzen des Layouts passen.
Proportionale Positionierung und Größenanpassung
Ein AbsoluteLayout kann untergeordnete Elemente mit Hilfe von proportionalen Werten positionieren und vergrößern. Dies wird erreicht, indem man dem AbsoluteLayout untergeordnete Elemente hinzufügt und die AbsoluteLayout.LayoutBounds angehängte Eigenschaft für jedes untergeordnete Element auf proportionale Positions- und/oder Größenwerte im Bereich 0–1 setzt. Die Werte für Position und Größe werden proportional gemacht, indem die AbsoluteLayout.LayoutFlags angehängte Eigenschaft auf jedes Kind gesetzt wird.
Die angehängte Eigenschaft AbsoluteLayout.LayoutFlags vom Typ AbsoluteLayoutFlags ermöglicht es Ihnen, ein Flag zu setzen, das angibt, dass die Werte für Position und Größe der Layoutgrenzen für ein untergeordnetes Element proportional zur Größe des AbsoluteLayout sind. Beim Anlegen eines untergeordneten Elements skaliert AbsoluteLayout die Positions- und Größenwerte entsprechend auf jede Gerätegröße.
Die AbsoluteLayoutFlags-Enumeration definiert die folgenden Member:
None, gibt an, dass die Werte als absolut interpretiert werden. Dies ist der Standardwert der angefügtenAbsoluteLayout.LayoutFlags-Eigenschaft.XProportionalbedeutet, dass der Wertxals proportional interpretiert wird, während alle anderen Werte als absolut behandelt werden.YProportionalbedeutet, dass der Wertyals proportional interpretiert wird, während alle anderen Werte als absolut behandelt werden.WidthProportionalbedeutet, dass der Wertwidthals proportional interpretiert wird, während alle anderen Werte als absolut behandelt werden.HeightProportionalbedeutet, dass der Wertheightals proportional interpretiert wird, während alle anderen Werte als absolut behandelt werden.PositionProportionalbedeutet, dass die Wertexundyals proportional interpretiert werden, während die Größenwerte als absolut interpretiert werden.SizeProportionalbedeutet, dass die Wertewidthundheightals proportional interpretiert werden, während die Positionswerte als absolut interpretiert werden.All, bedeutet, dass alle Werte als proportional interpretiert werden.
Tipp
Die AbsoluteLayoutFlags-Enumeration ist eine Flags-Enumeration, was bedeutet, dass Enumerationselemente kombiniert werden können. Dies wird in XAML mit einer kommagetrennten Liste und in C# mit dem Operator bitwise OR erreicht.
Wenn Sie z. B. das Kennzeichen SizeProportional verwenden und die Breite eines untergeordneten Elements auf 0,25 und die Höhe auf 0,1 setzen, hat das untergeordnete Element ein Viertel der Breite von AbsoluteLayout und ein Zehntel der Höhe. Das PositionProportional-Flag ist ähnlich. Eine Position von (0,0) setzt das untergeordnete Element in die obere linke Ecke, während eine Position von (1,1) das untergeordnete Element in die untere rechte Ecke setzt, und eine Position von (0,5,0,5) das untergeordnete Element innerhalb des AbsoluteLayout zentriert.
Die folgende XAML zeigt ein AbsoluteLayout, dessen untergeordnete Elemente anhand von proportionalen Werten positioniert werden:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="AbsoluteLayoutDemos.Views.XAML.ProportionalDemoPage"
Title="Proportional demo">
<AbsoluteLayout>
<BoxView Color="Blue"
AbsoluteLayout.LayoutBounds="0.5,0,100,25"
AbsoluteLayout.LayoutFlags="PositionProportional" />
<BoxView Color="Green"
AbsoluteLayout.LayoutBounds="0,0.5,25,100"
AbsoluteLayout.LayoutFlags="PositionProportional" />
<BoxView Color="Red"
AbsoluteLayout.LayoutBounds="1,0.5,25,100"
AbsoluteLayout.LayoutFlags="PositionProportional" />
<BoxView Color="Black"
AbsoluteLayout.LayoutBounds="0.5,1,100,25"
AbsoluteLayout.LayoutFlags="PositionProportional" />
<Label Text="Centered text"
AbsoluteLayout.LayoutBounds="0.5,0.5,110,25"
AbsoluteLayout.LayoutFlags="PositionProportional" />
</AbsoluteLayout>
</ContentPage>
In diesem Beispiel wird jedes untergeordnete Element anhand von Proportionalwerten positioniert, die Größe jedoch anhand von Absolutwerten bestimmt. Dies wird erreicht, indem die AbsoluteLayout.LayoutFlags angehängte Eigenschaft eines jeden untergeordneten Elements auf PositionProportional gesetzt wird. Die ersten beiden Werte, die in der angehängten Eigenschaft AbsoluteLayout.LayoutBounds für jedes untergeordnete Element angegeben werden, definieren die Position anhand von proportionalen Werten. Die Größe der einzelnen untergeordneten Elemente wird mit dem dritten und vierten Absolutwert definiert, wobei geräteunabhängige Einheiten verwendet werden.
Der folgende Screenshot zeigt das Layout, das sich ergibt:
Der entsprechende C#-Code ist unten dargestellt:
public class ProportionalDemoPage : ContentPage
{
public ProportionalDemoPage()
{
BoxView blue = new BoxView { Color = Colors.Blue };
AbsoluteLayout.SetLayoutBounds(blue, new Rect(0.5, 0, 100, 25));
AbsoluteLayout.SetLayoutFlags(blue, AbsoluteLayoutFlags.PositionProportional);
BoxView green = new BoxView { Color = Colors.Green };
AbsoluteLayout.SetLayoutBounds(green, new Rect(0, 0.5, 25, 100));
AbsoluteLayout.SetLayoutFlags(green, AbsoluteLayoutFlags.PositionProportional);
BoxView red = new BoxView { Color = Colors.Red };
AbsoluteLayout.SetLayoutBounds(red, new Rect(1, 0.5, 25, 100));
AbsoluteLayout.SetLayoutFlags(red, AbsoluteLayoutFlags.PositionProportional);
BoxView black = new BoxView { Color = Colors.Black };
AbsoluteLayout.SetLayoutBounds(black, new Rect(0.5, 1, 100, 25));
AbsoluteLayout.SetLayoutFlags(black, AbsoluteLayoutFlags.PositionProportional);
Label label = new Label { Text = "Centered text" };
AbsoluteLayout.SetLayoutBounds(label, new Rect(0.5, 0.5, 110, 25));
AbsoluteLayout.SetLayoutFlags(label, AbsoluteLayoutFlags.PositionProportional);
Title = "Proportional demo";
Content = new AbsoluteLayout
{
Children = { blue, green, red, black, label }
};
}
}
In diesem Beispiel werden die Position und die Größe der einzelnen untergeordneten Elemente mit der Methode AbsoluteLayout.SetLayoutBounds festgelegt. Das erste Argument der Methode ist das untergeordnete Element, das zweite ist ein Rect-Objekt. Die Position jedes untergeordneten Elements wird mit proportionalen Werten festgelegt, während die Größe jedes untergeordneten Elements mit absoluten Werten festgelegt wird, wobei geräteunabhängige Einheiten verwendet werden.
Hinweis
Ein AbsoluteLayout, das proportionale Werte verwendet, kann untergeordnete Elemente so positionieren und vergrößern, dass sie nicht in die Grenzen des Layouts passen, indem es Werte außerhalb des Bereichs 0-1 verwendet.
Feedback
Bald verfügbar: Im Laufe des Jahres 2024 werden wir GitHub-Issues stufenweise als Feedbackmechanismus für Inhalte abbauen und durch ein neues Feedbacksystem ersetzen. Weitere Informationen finden Sie unter https://aka.ms/ContentUserFeedback.
Feedback senden und anzeigen für