Xamarin.Forms
Xamarin-Formularlayouts

ContentPresenter

Ein Layout-Manager für Vorlagen mit Vorlagen. Wird in einer ControlTemplate verwendet, um zu markieren, wo der anzuzeigende Inhalt angezeigt wird.

ContentView

Ein Element mit einem einzigen Inhalt. ContentView hat wenig Eigennutz. Sein Zweck ist es, als Basisklasse für benutzerdefinierte zusammengesetzte Ansichten zu dienen.

XAML

<ContentView>
<Label Text="Hi, I'm a simple Label inside of a simple ContentView"
HorizontalOptions="Center"
VerticalOptions="Center"/>
</ContentView>

Code

var contentView = new ContentView {
Content = new Label {
 Text = "Hi, I'm a simple Label inside of a simple ContentView",
 HorizontalOptions = LayoutOptions.Center,
 VerticalOptions = LayoutOptions.Center
}
};

Rahmen

Ein Element, das ein einzelnes Kind enthält, mit einigen Gestaltungsoptionen. Der Rahmen hat einen Standardwert von Xamarin.Forms.Layout.Padding von 20.

XAML

<Frame>
<Label Text="I've been framed!"
HorizontalOptions="Center"
VerticalOptions="Center" />
</Frame>

Code

var frameView = new Frame {
Content = new Label {
 Text = "I've been framed!",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center
},
OutlineColor = Color.Red
};

ScrollView

Ein Element, das scrollen kann, wenn der Content erfordert.

ScrollView enthält Layouts und ermöglicht das ScrollView . ScrollView wird auch verwendet, um zuzulassen, dass Ansichten automatisch zum sichtbaren Teil des Bildschirms wechseln, wenn die Tastatur angezeigt wird.

Hinweis: ScrollViews sollten nicht verschachtelt sein. Außerdem sollte ScrollViews nicht mit anderen Steuerelementen verschachtelt werden, die einen Bildlauf ermöglichen, wie WebView . B. ListView und WebView .

Ein ScrollView ist leicht zu definieren. In XAML:

<ContentPage.Content>
    <ScrollView>
        <StackLayout>
            <BoxView BackgroundColor="Red" HeightRequest="600" WidthRequest="150" />
            <Entry />
        </StackLayout>
    </ScrollView>
</ContentPage.Content>

Dieselbe Definition im Code:

var scroll = new ScrollView();
Content = scroll;
var stack = new StackLayout();
stack.Children.Add(new BoxView { BackgroundColor = Color.Red,   HeightRequest = 600, WidthRequest = 600 });
stack.Children.Add(new Entry());

TemplatedView

Ein Element, das Inhalt mit einer Steuerelementvorlage und die Basisklasse für ContentView .

AbsoluteLayout

AbsoluteLayout positioniert und sortiert untergeordnete Elemente proportional zu ihrer eigenen Größe und Position oder zu absoluten Werten. Untergeordnete Ansichten können mit proportionalen Werten oder statischen Werten positioniert und deren Größe angepasst werden. Proportionale und statische Werte können gemischt werden.

Eine Definition eines AbsoluteLayout in XAML sieht folgendermaßen aus:

<AbsoluteLayout>
    <Label Text="I'm centered on iPhone 4 but no other device"
        AbsoluteLayout.LayoutBounds="115,150,100,100" LineBreakMode="WordWrap"  />
    <Label Text="I'm bottom center on every device."
        AbsoluteLayout.LayoutBounds=".5,1,.5,.1" AbsoluteLayout.LayoutFlags="All"
        LineBreakMode="WordWrap"  />
    <BoxView Color="Olive"  AbsoluteLayout.LayoutBounds="1,.5, 25, 100"
        AbsoluteLayout.LayoutFlags="PositionProportional" />
    <BoxView Color="Red" AbsoluteLayout.LayoutBounds="0,.5,25,100"
        AbsoluteLayout.LayoutFlags="PositionProportional" />
    <BoxView Color="Blue" AbsoluteLayout.LayoutBounds=".5,0,100,25"
        AbsoluteLayout.LayoutFlags="PositionProportional" />
    <BoxView Color="Blue" AbsoluteLayout.LayoutBounds=".5,0,1,25"
        AbsoluteLayout.LayoutFlags="PositionProportional, WidthProportional" />
</AbsoluteLayout>

Das gleiche Layout würde im Code so aussehen:

Title = "Absolute Layout Exploration - Code";
var layout = new AbsoluteLayout();

var centerLabel = new Label {
Text = "I'm centered on iPhone 4 but no other device.",
LineBreakMode = LineBreakMode.WordWrap};

AbsoluteLayout.SetLayoutBounds (centerLabel, new Rectangle (115, 159, 100, 100));
// No need to set layout flags, absolute positioning is the default

var bottomLabel = new Label { Text = "I'm bottom center on every device.", LineBreakMode = LineBreakMode.WordWrap };
AbsoluteLayout.SetLayoutBounds (bottomLabel, new Rectangle (.5, 1, .5, .1));
AbsoluteLayout.SetLayoutFlags (bottomLabel, AbsoluteLayoutFlags.All);

var rightBox = new BoxView{ Color = Color.Olive };
AbsoluteLayout.SetLayoutBounds (rightBox, new Rectangle (1, .5, 25, 100));
AbsoluteLayout.SetLayoutFlags (rightBox, AbsoluteLayoutFlags.PositionProportional);

var leftBox = new BoxView{ Color = Color.Red };
AbsoluteLayout.SetLayoutBounds (leftBox, new Rectangle (0, .5, 25, 100));
AbsoluteLayout.SetLayoutFlags (leftBox, AbsoluteLayoutFlags.PositionProportional);

var topBox = new BoxView{ Color = Color.Blue };
AbsoluteLayout.SetLayoutBounds (topBox, new Rectangle (.5, 0, 100, 25));
AbsoluteLayout.SetLayoutFlags (topBox, AbsoluteLayoutFlags.PositionProportional);

var twoFlagsBox = new BoxView{ Color = Color.Blue };
AbsoluteLayout.SetLayoutBounds (topBox, new Rectangle (.5, 0, 1, 25));
AbsoluteLayout.SetLayoutFlags (topBox, AbsoluteLayoutFlags.PositionProportional | AbsoluteLayout.WidthProportional);

layout.Children.Add (bottomLabel);
layout.Children.Add (centerLabel);
layout.Children.Add (rightBox);
layout.Children.Add (leftBox);
layout.Children.Add (topBox);

Mit dem Steuerelement AbsoluteLayout in Xamarin.Forms können Sie angeben, wo genau die untergeordneten Elemente auf dem Bildschirm angezeigt werden sollen, sowie deren Größe und Form (Begrenzungen).

Es gibt verschiedene Möglichkeiten, die Grenzen der untergeordneten Elemente basierend auf der AbsoluteLayoutFlags-Enumeration festzulegen, die während dieses Prozesses verwendet werden. Die Aufzählung AbsoluteLayoutFlags enthält die folgenden Werte:

• Alle : Alle Maße sind proportional.
• HeightProportional : Die Höhe ist proportional zum Layout.
• Keine : Es wird keine Interpretation vorgenommen.
• PositionProportional : Kombiniert XProportional und YProportional.
• SizeProportional : Kombiniert WidthProportional und HeightProportional.
• WidthProportional : Die Breite ist proportional zum Layout.
• XProportional : X-Eigenschaft ist proportional zum Layout.
• YProportional : Die Y-Eigenschaft ist proportional zum Layout.

Die Arbeit mit dem Layout des AbsoluteLayout-Containers mag auf den ersten Blick etwas uninteressant erscheinen, aber mit ein wenig Einsatz wird er vertraut. Nachdem Sie Ihre untergeordneten Elemente erstellt haben, müssen Sie drei Schritte ausführen, um sie an eine absolute Position innerhalb des Containers zu setzen. Sie möchten die den Elementen zugewiesenen Flags mit der AbsoluteLayout.SetLayoutFlags () -Methode festlegen. Sie möchten auch die AbsoluteLayout.SetLayoutBounds () - Methode verwenden, um den Elementen ihre Grenzen zu geben. Schließlich möchten Sie die untergeordneten Elemente der Children-Sammlung hinzufügen. Da Xamarin.Forms eine Abstraktionsschicht zwischen Xamarin und den gerätespezifischen Implementierungen ist, können die Positionswerte unabhängig von den Gerätepixeln sein. Hier kommen die zuvor genannten Layout-Flags ins Spiel. Sie können auswählen, wie der Layoutprozess der Xamarin.Forms-Steuerelemente die von Ihnen definierten Werte interpretieren soll.

Gitter

Ein Layout mit Ansichten, die in Zeilen und Spalten angeordnet sind.

Dies ist eine typische Grid Definition in XAML.

<Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height="2*" />
    <RowDefinition Height="*" />
    <RowDefinition Height="200" />
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto" />
    <ColumnDefinition Width="*" />
  </Grid.ColumnDefinitions>
    
  <ContentView Grid.Row="0" Grid.Column="0"/>
  <ContentView Grid.Row="1" Grid.Column="0"/>
  <ContentView Grid.Row="2" Grid.Column="0"/>

  <ContentView Grid.Row="0" Grid.Column="1"/>
  <ContentView Grid.Row="1" Grid.Column="1"/>
  <ContentView Grid.Row="2" Grid.Column="1"/>

</Grid>

Das gleiche im Code definierte Grid sieht folgendermaßen aus:

var grid = new Grid();
grid.RowDefinitions.Add (new RowDefinition { Height = new GridLength(2, GridUnitType.Star) });
grid.RowDefinitions.Add (new RowDefinition { Height = new GridLength (1, GridUnitType.Star) });
grid.RowDefinitions.Add (new RowDefinition { Height = new GridLength(200)});
grid.ColumnDefinitions.Add (new ColumnDefinition{ Width = new GridLength (200) });

So fügen Sie Elemente zum Raster hinzu: In XAML :

<Grid>
      
   <--DEFINITIONS...--!>
        
   <ContentView Grid.Row="0" Grid.Column="0"/>
   <ContentView Grid.Row="1" Grid.Column="0"/>
   <ContentView Grid.Row="2" Grid.Column="0"/>

   <ContentView Grid.Row="0" Grid.Column="1"/>
   <ContentView Grid.Row="1" Grid.Column="1"/>
   <ContentView Grid.Row="2" Grid.Column="1"/>

</Grid>

In C # -Code:

var grid = new Grid();
//DEFINITIONS...
var topLeft = new Label { Text = "Top Left" };
var topRight = new Label { Text = "Top Right" };
var bottomLeft = new Label { Text = "Bottom Left" };
var bottomRight = new Label { Text = "Bottom Right" };
grid.Children.Add(topLeft, 0, 0);
grid.Children.Add(topRight, 0, 1);
grid.Children.Add(bottomLeft, 1, 0);
grid.Children.Add(bottomRight, 1, 1);

Für Height und Width mehrere Einheiten zur Verfügung.

• Auto - Größen automatisch Inhalt in der Zeile oder Spalte zu passen. Wird in C # als GridUnitType.Auto oder in XAML als Auto angegeben.
• Proportional - Größe der Spalten und Zeilen im Verhältnis zum verbleibenden Platz. Wird als Wert und GridUnitType.Star in C # und als # * in XAML angegeben, wobei # der gewünschte Wert ist. Wenn Sie eine Zeile / Spalte mit * angeben, füllt sie den verfügbaren Platz.
• Absolut - Größe von Spalten und Zeilen mit bestimmten festen Werten für Höhe und Breite. Wird als Wert und als GridUnitType.Absolute in C # und als # in XAML angegeben, wobei # der gewünschte Wert ist.

Hinweis: Die Breitenwerte für Spalten werden standardmäßig in Xamarin.Forms auf Auto festgelegt. Dies bedeutet, dass die Breite von der Größe der untergeordneten Elemente bestimmt wird. Beachten Sie, dass dies von der Implementierung von XAML auf Microsoft-Plattformen abweicht, bei denen die Standardbreite * ist, wodurch der verfügbare Speicherplatz gefüllt wird.

RelativesLayout

Ein Layout , das Constraints für das Layout der Constraints Layout verwendet.

RelativeLayout wird verwendet, um Ansichten relativ zu Eigenschaften des Layouts oder der gleichgeordneten Ansichten zu positionieren und deren Größe zu ändern. Im Gegensatz zu AbsoluteLayout verfügt RelativeLayout nicht über das Konzept des beweglichen Ankers und hat keine Möglichkeit, Elemente relativ zum unteren oder rechten Rand des Layouts zu positionieren. RelativeLayout unterstützt die Positionierung von Elementen außerhalb der eigenen Grenzen.

Ein relativesLayout in XAML sieht folgendermaßen aus:

<RelativeLayout>
    <BoxView Color="Red" x:Name="redBox"
        RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent,
            Property=Height,Factor=.15,Constant=0}"
        RelativeLayout.WidthConstraint="{ConstraintExpression
            Type=RelativeToParent,Property=Width,Factor=1,Constant=0}"
        RelativeLayout.HeightConstraint="{ConstraintExpression
            Type=RelativeToParent,Property=Height,Factor=.8,Constant=0}" />
    <BoxView Color="Blue"
        RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToView,
            ElementName=redBox,Property=Y,Factor=1,Constant=20}"
        RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToView,
            ElementName=redBox,Property=X,Factor=1,Constant=20}"
        RelativeLayout.WidthConstraint="{ConstraintExpression
            Type=RelativeToParent,Property=Width,Factor=.5,Constant=0}"
        RelativeLayout.HeightConstraint="{ConstraintExpression
            Type=RelativeToParent,Property=Height,Factor=.5,Constant=0}" />
</RelativeLayout>

Dasselbe Layout kann mit diesem Code erreicht werden:

layout.Children.Add (redBox, Constraint.RelativeToParent ((parent) => {
        return parent.X;
    }), Constraint.RelativeToParent ((parent) => {
        return parent.Y * .15;
    }), Constraint.RelativeToParent((parent) => {
        return parent.Width;
    }), Constraint.RelativeToParent((parent) => {
        return parent.Height * .8;
    }));
layout.Children.Add (blueBox, Constraint.RelativeToView (redBox, (Parent, sibling) => {
        return sibling.X + 20;
    }), Constraint.RelativeToView (blueBox, (parent, sibling) => {
        return sibling.Y + 20;
    }), Constraint.RelativeToParent((parent) => {
        return parent.Width * .5;
    }), Constraint.RelativeToParent((parent) => {
        return parent.Height * .5;
    }));

StackLayout

StackLayout organisiert Ansichten in einer eindimensionalen Linie ("Stack") entweder horizontal oder vertikal. Views in einem StackLayout können basierend auf dem Platz im Layout unter Verwendung der StackLayout in der Größe StackLayout werden. Die Positionierung wird dadurch bestimmt, dass die Bestellansichten zum Layout und zu den Layoutoptionen der Ansichten hinzugefügt wurden.

Verwendung in XAML

<StackLayout>
    <Label Text="This will be on top" />
    <Button Text="This will be on the bottom" />
</StackLayout>

Verwendung im Code

StackLayout stackLayout = new StackLayout
{
    Spacing = 0,
    VerticalOptions = LayoutOptions.FillAndExpand,
    Children = 
    {
        new Label
        {
            Text = "StackLayout",
            HorizontalOptions = LayoutOptions.Start
        },
        new Label
        {
            Text = "stacks its children",
            HorizontalOptions = LayoutOptions.Center
        },
        new Label
        {
            Text = "vertically",
            HorizontalOptions = LayoutOptions.End
        },
        new Label
        {
            Text = "by default,",
            HorizontalOptions = LayoutOptions.Center
        },
        new Label
        {
            Text = "but horizontal placement",
            HorizontalOptions = LayoutOptions.Start
        },
        new Label
        {
            Text = "can be controlled with",
            HorizontalOptions = LayoutOptions.Center
        },
        new Label
        {
            Text = "the HorizontalOptions property.",
            HorizontalOptions = LayoutOptions.End
        },
        new Label
        {
            Text = "An Expand option allows one or more children " +
                   "to occupy the an area within the remaining " +
                   "space of the StackLayout after it's been sized " +
                   "to the height of its parent.",
            VerticalOptions = LayoutOptions.CenterAndExpand,
            HorizontalOptions = LayoutOptions.End
        },
        new StackLayout
        {
            Spacing = 0,
            Orientation = StackOrientation.Horizontal,
            Children = 
            {
                new Label
                {
                    Text = "Stacking",
                },
                new Label
                {
                    Text = "can also be",
                    HorizontalOptions = LayoutOptions.CenterAndExpand
                },
                new Label
                {
                    Text = "horizontal.",
                },
            }
        }
    }
};