Xamarin. Forms-flexlayoutThe Xamarin.Forms FlexLayout

Beispiel herunterladen Das Beispiel herunterladenDownload Sample Download the sample

Verwenden Sie das flexlayout zum Stapeln oder Umpacken einer Auflistung untergeordneter Ansichten.Use FlexLayout for stacking or wrapping a collection of child views.

Die xamarin. Forms- FlexLayout ist neu in xamarin. Forms Version 3,0.The Xamarin.Forms FlexLayout is new in Xamarin.Forms version 3.0. Es basiert auf dem flexiblen CSS- Box-Layoutmodul, das auch als " flexlayout " oder " Flex-Box" bezeichnet wird, da es viele flexible Optionen zum Anordnen von untergeordneten Elementen im Layout enthält.It is based on the CSS Flexible Box Layout Module, commonly known as flex layout or flex-box, so called because it includes many flexible options to arrange children within the layout.

FlexLayout ähnelt der StackLayout xamarin. Forms darin, dass die untergeordneten Elemente horizontal und vertikal in einem Stapel angeordnet werden können.FlexLayout is similar to the Xamarin.Forms StackLayout in that it can arrange its children horizontally and vertically in a stack. Der FlexLayout kann jedoch auch seine untergeordneten Elemente umwickeln, wenn zu viele für eine einzelne Zeile oder eine einzelne Spalte vorhanden sind, und verfügt außerdem über viele Optionen für Ausrichtung, Ausrichtung und Anpassung an verschiedene Bildschirmgrößen.However, the FlexLayout is also capable of wrapping its children if there are too many to fit in a single row or column, and also has many options for orientation, alignment, and adapting to various screen sizes.

FlexLayout von Layout<View> abgeleitet und erbt eine Children -Eigenschaft vom Typ IList<View>.FlexLayout derives from Layout<View> and inherits a Children property of type IList<View>.

FlexLayout definiert sechs öffentliche bindbare Eigenschaften und fünf angefügte bindbare Eigenschaften, die sich auf die Größe, die Ausrichtung und die Ausrichtung der untergeordneten Elemente auswirken.FlexLayout defines six public bindable properties and five attached bindable properties that affect the size, orientation, and alignment of its child elements. (Wenn Sie mit den angefügten bindbaren Eigenschaften nicht vertraut sind, finden Sie weitere Informationen im Artikel angefügte Eigenschaften .) Diese Eigenschaften werden in den folgenden Abschnitten ausführlich beschrieben: Details zu den bindbaren Eigenschaften und die angefügten bindbaren Eigenschaften im Detail.(If you're not familiar with attached bindable properties, see the article Attached properties.) These properties are described in detail in the sections below on The bindable properties in detail and The attached bindable properties in detail. Dieser Artikel beginnt jedoch mit einem Abschnitt zu einigen gängigen Verwendungs Szenarios von FlexLayout, in denen viele dieser Eigenschaften informisch beschrieben werden.However, this article begins with a section on some Common usage scenarios of FlexLayout that describes many of these properties more informally. Am Ende des Artikels erfahren Sie, wie Sie FlexLayout mit CSS-Stylesheetskombinieren.Towards the end of the article, you'll see how to combine FlexLayout with CSS style sheets.

Häufige Verwendungs SzenarienCommon usage scenarios

Das Beispielprogramm " flexlayoutdemos " enthält mehrere Seiten, die einige gängige Verwendungsmöglichkeiten von FlexLayout veranschaulichen und es Ihnen ermöglichen, mit ihren Eigenschaften zu experimentieren.The FlexLayoutDemos sample program contains several pages that demonstrate some common uses of FlexLayout and allows you to experiment with its properties.

Verwenden von flexlayout für einen einfachen StapelUsing FlexLayout for a simple stack

Die Seite "Simple Stack" zeigt, wie FlexLayout ein StackLayout, aber mit einfachem Markup ersetzen kann.The Simple Stack page shows how FlexLayout can substitute for a StackLayout but with simpler markup. Alles in diesem Beispiel wird auf der XAML-Seite definiert.Everything in this sample is defined in the XAML page. Die FlexLayout enthält vier untergeordnete Elemente:The FlexLayout contains four children:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:FlexLayoutDemos"
             x:Class="FlexLayoutDemos.SimpleStackPage"
             Title="Simple Stack">

    <FlexLayout Direction="Column"
                AlignItems="Center"
                JustifyContent="SpaceEvenly">

        <Label Text="FlexLayout in Action"
               FontSize="Large" />

        <Image Source="{local:ImageResource FlexLayoutDemos.Images.SeatedMonkey.jpg}" />

        <Button Text="Do-Nothing Button" />

        <Label Text="Another Label" />
    </FlexLayout>
</ContentPage>

Dies ist die Seite, die unter IOS, Android und der universelle Windows-Plattform ausgeführt wird:Here's that page running on iOS, Android, and the Universal Windows Platform:

Die einfache Stapel SeiteThe Simple Stack Page

In der simplestackpage. XAML -Datei werden drei Eigenschaften FlexLayout angezeigt:Three properties of FlexLayout are shown in the SimpleStackPage.xaml file:

  • Die Direction -Eigenschaft wird auf einen Wert der FlexDirection -Enumeration festgelegt.The Direction property is set to a value of the FlexDirection enumeration. Der Standardwert ist Row.The default is Row. Das Festlegen der-Eigenschaft auf Column bewirkt, dass die untergeordneten Elemente des FlexLayout in einer einzelnen Spalte von Elementen angeordnet werden.Setting the property to Column causes the children of the FlexLayout to be arranged in a single column of items.

    Wenn Elemente in einer FlexLayout in einer Spalte angeordnet sind, wird die FlexLayout als vertikale Hauptachse und horizontale _Kreuz Achse_bezeichnet.When items in a FlexLayout are arranged in a column, the FlexLayout is said to have a vertical main axis and a horizontal cross axis.

  • Die AlignItems -Eigenschaft ist vom Typ FlexAlignItems und gibt an, wie Elemente an der Kreuz Achse ausgerichtet werden.The AlignItems property is of type FlexAlignItems and specifies how items are aligned on the cross axis. Die Option Center bewirkt, dass jedes Element horizontal zentriert wird.The Center option causes each item to be horizontally centered.

    Wenn Sie einen StackLayout anstelle eines FlexLayout für diese Aufgabe verwendet haben, würden Sie alle Elemente zentrieren, indem Sie die Eigenschaft HorizontalOptions der einzelnen Elemente Center zuweisen.If you were using a StackLayout rather than a FlexLayout for this task, you would center all the items by assigning the HorizontalOptions property of each item to Center. Die HorizontalOptions-Eigenschaft funktioniert nicht für untergeordnete Elemente eines FlexLayout, aber die einzelnen AlignItems-Eigenschaften erreichen dasselbe Ziel.The HorizontalOptions property doesn't work for children of a FlexLayout, but the single AlignItems property accomplishes the same goal. Wenn erforderlich, können Sie die Eigenschaft AlignSelf angehängter Bindung verwenden, um die AlignItems-Eigenschaft für einzelne Elemente zu überschreiben:If you need to, you can use the AlignSelf attached bindable property to override the AlignItems property for individual items:

    <Label Text="FlexLayout in Action"
           FontSize="Large"
           FlexLayout.AlignSelf="Start" />
    

    Bei dieser Änderung wird diese Label am linken Rand des FlexLayout positioniert, wenn die Lesefolge von links nach rechts ist.With that change, this one Label is positioned at the left edge of the FlexLayout when the reading order is left-to-right.

  • Die JustifyContent -Eigenschaft ist vom Typ FlexJustifyund gibt an, wie Elemente auf der Hauptachse angeordnet werden.The JustifyContent property is of type FlexJustify, and specifies how items are arranged on the main axis. Mit der Option SpaceEvenly werden alle verbliebenen vertikalen Leerzeichen gleichmäßig zwischen allen Elementen und oberhalb des ersten Elements und unterhalb des letzten Elements zugeordnet.The SpaceEvenly option allocates all leftover vertical space equally between all the items, and above the first item, and below the last item.

    Wenn Sie einen StackLayout verwendet haben, müssen Sie die VerticalOptions-Eigenschaft der einzelnen Elemente CenterAndExpand zuweisen, um einen ähnlichen Effekt zu erzielen.If you were using a StackLayout, you would need to assign the VerticalOptions property of each item to CenterAndExpand to achieve a similar effect. Die Option CenterAndExpand würde jedoch zweimal so viel Platz zwischen jedem Element als vor dem ersten Element und nach dem letzten Element zuordnen.But the CenterAndExpand option would allocate twice as much space between each item than before the first item and after the last item. Sie können die CenterAndExpand-Option von VerticalOptions imitieren, indem Sie die Eigenschaft JustifyContent von FlexLayout auf SpaceAround festlegen.You can mimic the CenterAndExpand option of VerticalOptions by setting the JustifyContent property of FlexLayout to SpaceAround.

Diese FlexLayout Eigenschaften werden im folgenden Abschnitt im Abschnitt " bindbare Eigenschaften im Detail " ausführlich erläutert.These FlexLayout properties are discussed in more detail in the section The bindable properties in detail below.

Verwenden von flexlayout zum Umwickeln von ElementenUsing FlexLayout for wrapping items

Die Seite Photo Wrapping des Beispiels " flexlayoutdemos " veranschaulicht, wie FlexLayout die untergeordneten Elemente in zusätzliche Zeilen oder Spalten umschließen können.The Photo Wrapping page of the FlexLayoutDemos sample demonstrates how FlexLayout can wrap its children to additional rows or columns. Die XAML-Datei instanziiert die FlexLayout und weist ihr zwei Eigenschaften zu:The XAML file instantiates the FlexLayout and assigns two properties of it:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FlexLayoutDemos.PhotoWrappingPage"
             Title="Photo Wrapping">
    <Grid>
        <ScrollView>
            <FlexLayout x:Name="flexLayout"
                        Wrap="Wrap"
                        JustifyContent="SpaceAround" />
        </ScrollView>

        <ActivityIndicator x:Name="activityIndicator"
                           IsRunning="True"
                           VerticalOptions="Center" />
    </Grid>
</ContentPage>

Die Direction-Eigenschaft dieser FlexLayout ist nicht festgelegt, sodass Sie die Standardeinstellung Row hat, was bedeutet, dass die untergeordneten Elemente in Zeilen angeordnet sind und die Hauptachse horizontal ist.The Direction property of this FlexLayout is not set, so it has the default setting of Row, meaning that the children are arranged in rows and the main axis is horizontal.

Die Wrap -Eigenschaft ist ein Enumerationstyp FlexWrap.The Wrap property is of an enumeration type FlexWrap. Wenn zu viele Elemente vorhanden sind, die in eine Zeile passen, bewirkt diese Eigenschafts Einstellung, dass die Elemente in die nächste Zeile eingebunden werden.If there are too many items to fit on a row, then this property setting causes the items to wrap to the next row.

Beachten Sie, dass der FlexLayout ein untergeordnetes Element eines ScrollView ist.Notice that the FlexLayout is a child of a ScrollView. Wenn zu viele Zeilen vorhanden sind, die auf die Seite passen, verfügt die ScrollView über die Standard Orientation Eigenschaft Vertical und ermöglicht das vertikale Scrollen.If there are too many rows to fit on the page, then the ScrollView has a default Orientation property of Vertical and allows vertical scrolling.

Die JustifyContent-Eigenschaft ordnet verbleibenden Speicherplatz auf der Hauptachse (der horizontalen Achse) zu, sodass jedes Element von derselben Menge an Leerraum umgeben ist.The JustifyContent property allocates leftover space on the main axis (the horizontal axis) so that each item is surrounded by the same amount of blank space.

Die Code-Behind-Datei greift auf eine Auflistung von Beispiel Fotos zu und fügt Sie der Children-Auflistung der FlexLayout hinzu:The code-behind file accesses a collection of sample photos and adds them to the Children collection of the FlexLayout:

public partial class PhotoWrappingPage : ContentPage
{
    // Class for deserializing JSON list of sample bitmaps
    [DataContract]
    class ImageList
    {
        [DataMember(Name = "photos")]
        public List<string> Photos = null;
    }

    public PhotoWrappingPage ()
    {
        InitializeComponent ();

        LoadBitmapCollection();
    }

    async void LoadBitmapCollection()
    {
        using (WebClient webClient = new WebClient())
        {
            try
            {
                // Download the list of stock photos
                Uri uri = new Uri("https://raw.githubusercontent.com/xamarin/docs-archive/master/Images/stock/small/stock.json");
                byte[] data = await webClient.DownloadDataTaskAsync(uri);

                // Convert to a Stream object
                using (Stream stream = new MemoryStream(data))
                {
                    // Deserialize the JSON into an ImageList object
                    var jsonSerializer = new DataContractJsonSerializer(typeof(ImageList));
                    ImageList imageList = (ImageList)jsonSerializer.ReadObject(stream);

                    // Create an Image object for each bitmap
                    foreach (string filepath in imageList.Photos)
                    {
                        Image image = new Image
                        {
                            Source = ImageSource.FromUri(new Uri(filepath))
                        };
                        flexLayout.Children.Add(image);
                    }
                }
            }
            catch
            {
                flexLayout.Children.Add(new Label
                {
                    Text = "Cannot access list of bitmap files"
                });
            }
        }

        activityIndicator.IsRunning = false;
        activityIndicator.IsVisible = false;
    }
}

Hier ist das Programm, das ausgeführt wird, und progressiv von oben nach unten:Here's the program running, progressively scrolled from top to bottom:

![Die Seite "Foto Wrapping"](flex-layout-images/PhotoWrapping.png "Die Seite "Foto Wrapping"")The Photo Wrapping Page

Seitenlayout mit flexlayoutPage layout with FlexLayout

Im Webdesign gibt es ein Standardlayout, das als Heiliger Gral bezeichnet wird, da es sich um ein Layout-Format handelt, das sehr wünschenswert ist, aber häufig mit der Perfektion schwer zu erkennen ist.There is a standard layout in web design called the holy grail because it's a layout format that is very desirable, but often hard to realize with perfection. Das Layout besteht aus einem Header am oberen Rand der Seite und einer Fußzeile im unteren Bereich, die beide auf die vollständige Breite der Seite ausdehnen.The layout consists of a header at the top of the page and a footer at the bottom, both extending to the full width of the page. Der Mittelpunkt der Seite ist der Hauptinhalt, häufig aber mit einem Spalten förmigen Menü links neben dem Inhalt und ergänzenden Informationen (manchmal auch als neben Bereich bezeichnet) auf der rechten Seite.Occupying the center of the page is the main content, but often with a columnar menu to the left of the content and supplementary information (sometimes called an aside area) at the right. Abschnitt 5.4.1 der flexiblen CSS-boxlayoutspezifikation beschreibt, wie das Heilige Gral-Layout mit einem flexfeld realisiert werden kann.Section 5.4.1 of the CSS Flexible Box Layout specification describes how the holy grail layout can be realized with a flex box.

Die Seite " Heiliges Grail-Layout " des Beispiels " flexlayoutdemos " zeigt eine einfache Implementierung dieses Layouts mithilfe eines FlexLayout das in einem anderen-Objekt eingebettet ist.The Holy Grail Layout page of the FlexLayoutDemos sample shows a simple implementation of this layout using one FlexLayout nested in another. Da diese Seite für ein Telefon im Hochformat konzipiert ist, sind die Bereiche Links und rechts vom Inhalts Bereich nur 50 Pixel breit:Because this page is designed for a phone in portrait mode, the areas to the left and right of the content area are only 50 pixels wide:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FlexLayoutDemos.HolyGrailLayoutPage"
             Title="Holy Grail Layout">

    <FlexLayout Direction="Column">

        <!-- Header -->
        <Label Text="HEADER"
               FontSize="Large"
               BackgroundColor="Aqua"
               HorizontalTextAlignment="Center" />

        <!-- Body -->
        <FlexLayout FlexLayout.Grow="1">

            <!-- Content -->
            <Label Text="CONTENT"
                   FontSize="Large"
                   BackgroundColor="Gray"
                   HorizontalTextAlignment="Center"
                   VerticalTextAlignment="Center"
                   FlexLayout.Grow="1" />

            <!-- Navigation items-->
            <BoxView FlexLayout.Basis="50"
                     FlexLayout.Order="-1"
                     Color="Blue" />

            <!-- Aside items -->
            <BoxView FlexLayout.Basis="50"
                     Color="Green" />

        </FlexLayout>

        <!-- Footer -->
        <Label Text="FOOTER"
               FontSize="Large"
               BackgroundColor="Pink"
               HorizontalTextAlignment="Center" />
    </FlexLayout>
</ContentPage>

Hier wird ausgeführt:Here it is running:

![Die Seite "Heiliges Grail-Layout"](flex-layout-images/HolyGrailLayout.png "Die Seite "Heiliges Grail-Layout"")The Holy Grail Layout Page

Die Navigations-und Nebenbereiche werden mit einer BoxView auf der linken und rechten Seite gerendert.The navigation and aside areas are rendered with a BoxView on the left and right.

Der erste FlexLayout in der XAML-Datei verfügt über eine vertikale Hauptachse und enthält drei untergeordnete Elemente, die in einer Spalte angeordnet sind.The first FlexLayout in the XAML file has a vertical main axis and contains three children arranged in a column. Dabei handelt es sich um den Header, den Text der Seite und die Fußzeile.These are the header, the body of the page, and the footer. Der FlexLayout der Schraffur verfügt über eine horizontale Hauptachse mit drei untergeordneten Elementen in einer Zeile.The nested FlexLayout has a horizontal main axis with three children arranged in a row.

In diesem Programm werden drei angefügte bindbare Eigenschaften veranschaulicht:Three attached bindable properties are demonstrated in this program:

  • Die Order angefügte bindbare Eigenschaft wird für den ersten BoxView festgelegt.The Order attached bindable property is set on the first BoxView. Diese Eigenschaft ist eine ganze Zahl mit dem Standardwert 0.This property is an integer with a default value of 0. Sie können diese Eigenschaft verwenden, um die layoutreihenfolge zu ändern.You can use this property to change the layout order. Im allgemeinen bevorzugen Entwickler, dass der Inhalt der Seite im Markup vor den Navigationselementen und anderen Elementen angezeigt wird.Generally developers prefer the content of the page to appear in markup prior to the navigation items and aside items. Wenn Sie die Order-Eigenschaft auf dem ersten BoxView auf einen Wert festlegen, der kleiner als die anderen gleich geordneten Elemente ist, wird er als erstes Element in der Zeile angezeigt.Setting the Order property on the first BoxView to a value less than its other siblings causes it to appear as the first item in the row. Entsprechend können Sie sicherstellen, dass ein Element zuletzt angezeigt wird, indem Sie die Order-Eigenschaft auf einen Wert festlegen, der größer als die zugehörigen gleich geordneten ElementeSimilarly, you can ensure that an item appears last by setting the Order property to a value greater than its siblings.

  • Die Basis angefügte bindbare-Eigenschaft wird für die beiden BoxView Elemente festgelegt, um Ihnen eine Breite von 50 Pixeln zu übergeben.The Basis attached bindable property is set on the two BoxView items to give them a width of 50 pixels. Diese Eigenschaft hat den Typ FlexBasis, eine-Struktur, die eine statische Eigenschaft des Typs FlexBasis mit dem Namen Auto definiert. Dies ist die Standardeinstellung.This property is of type FlexBasis, a structure that defines a static property of type FlexBasis named Auto, which is the default. Mit Basis können Sie eine Pixelgröße oder einen Prozentsatz angeben, der angibt, wie viel Speicherplatz das Element auf der Hauptachse einnimmt.You can use Basis to specify a pixel size or a percentage that indicates how much space the item occupies on the main axis. Sie wird als Basis bezeichnet, da Sie eine Elementgröße angibt, die die Basis für alle nachfolgenden Layouts ist.It is called a basis because it specifies an item size that is the basis of all subsequent layout.

  • Die Grow-Eigenschaft wird für die Layout und für das untergeordnete Label, das den Inhalt darstellt, festgelegt.The Grow property is set on the nested Layout and on the Label child representing the content. Diese Eigenschaft hat den Typ float und hat den Standardwert 0.This property is of type float and has a default value of 0. Wenn ein positiver Wert festgelegt wird, wird der gesamte verbleibende Platz entlang der Hauptachse diesem Element und gleich geordneten Elementen mit positiven Werten Grow zugeordnet.When set to a positive value, all the remaining space along the main axis is allocated to that item and to siblings with positive values of Grow. Der Speicherplatz wird proportional zu den Werten zugewiesen, ähnlich wie die Stern Angabe in einem Grid.The space is allocated proportionally to the values, somewhat like the star specification in a Grid.

    Der erste Grow angefügte-Eigenschaft wird für den geschachtelten FlexLayout festgelegt, der angibt, dass dieser FlexLayout den gesamten nicht verwendeten vertikalen Leerraum innerhalb der äußeren FlexLayout belegen soll.The first Grow attached property is set on the nested FlexLayout, indicating that this FlexLayout is to occupy all the unused vertical space within the outer FlexLayout. Die zweite Grow angefügte Eigenschaft wird für die Label festgelegt, die den Inhalt darstellt, und gibt an, dass dieser Inhalt den gesamten nicht verwendeten horizontalen Raum innerhalb der inneren FlexLayout belegen soll.The second Grow attached property is set on the Label representing the content, indicating that this content is to occupy all the unused horizontal space within the inner FlexLayout.

    Es gibt auch eine ähnliche Shrink angefügte bindbare Eigenschaft, die Sie verwenden können, wenn die Größe der untergeordneten Elemente die Größe des FlexLayout überschreitet, aber keine umfügung gewünscht ist.There is also a similar Shrink attached bindable property that you can use when the size of children exceeds the size of the FlexLayout but wrapping is not desired.

Katalog Elemente mit "flexlayout"Catalog items with FlexLayout

Die Seite Katalog Elemente im Beispiel " flexlayoutdemos " ähnelt Beispiel 1 in Abschnitt 1,1 der Spezifikation "CSS-flexlayoutbox " mit der Ausnahme, dass Sie eine horizontal scrollbare Reihe von Bildern und Beschreibungen von drei Affen anzeigt. :The Catalog Items page in the FlexLayoutDemos sample is similar to Example 1 in Section 1.1 of the CSS Flex Layout Box specification except that it displays a horizontally scrollable series of pictures and descriptions of three monkeys:

![Die Seite "Katalog Elemente"](flex-layout-images/CatalogItems.png "Die Seite "Katalog Elemente"")The Catalog Items Page

Jede der drei Affen ist eine FlexLayout, die in einem Frame enthalten ist, dem eine explizite Höhe und Breite zugewiesen ist, und der auch ein untergeordnetes Element eines größeren FlexLayout ist.Each of the three monkeys is a FlexLayout contained in a Frame that is given an explicit height and width, and which is also a child of a larger FlexLayout. In dieser XAML-Datei werden die meisten Eigenschaften der FlexLayout untergeordneten Elemente in Stilen angegeben, aber nur eines davon ist ein impliziter Stil:In this XAML file, most of the properties of the FlexLayout children are specified in styles, all but one of which is an implicit style:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:FlexLayoutDemos"
             x:Class="FlexLayoutDemos.CatalogItemsPage"
             Title="Catalog Items">
    <ContentPage.Resources>
        <Style TargetType="Frame">
            <Setter Property="BackgroundColor" Value="LightYellow" />
            <Setter Property="BorderColor" Value="Blue" />
            <Setter Property="Margin" Value="10" />
            <Setter Property="CornerRadius" Value="15" />
        </Style>

        <Style TargetType="Label">
            <Setter Property="Margin" Value="0, 4" />
        </Style>

        <Style x:Key="headerLabel" TargetType="Label">
            <Setter Property="Margin" Value="0, 8" />
            <Setter Property="FontSize" Value="Large" />
            <Setter Property="TextColor" Value="Blue" />
        </Style>

        <Style TargetType="Image">
            <Setter Property="FlexLayout.Order" Value="-1" />
            <Setter Property="FlexLayout.AlignSelf" Value="Center" />
        </Style>

        <Style TargetType="Button">
            <Setter Property="Text" Value="LEARN MORE" />
            <Setter Property="FontSize" Value="Large" />
            <Setter Property="TextColor" Value="White" />
            <Setter Property="BackgroundColor" Value="Green" />
            <Setter Property="BorderRadius" Value="20" />
        </Style>
    </ContentPage.Resources>

    <ScrollView Orientation="Both">
        <FlexLayout>
            <Frame WidthRequest="300"
                   HeightRequest="480">

                <FlexLayout Direction="Column">
                    <Label Text="Seated Monkey"
                           Style="{StaticResource headerLabel}" />
                    <Label Text="This monkey is laid back and relaxed, and likes to watch the world go by." />
                    <Label Text="  &#x2022; Doesn't make a lot of noise" />
                    <Label Text="  &#x2022; Often smiles mysteriously" />
                    <Label Text="  &#x2022; Sleeps sitting up" />
                    <Image Source="{local:ImageResource FlexLayoutDemos.Images.SeatedMonkey.jpg}"
                           WidthRequest="180"
                           HeightRequest="180" />
                    <Label FlexLayout.Grow="1" />
                    <Button />
                </FlexLayout>
            </Frame>

            <Frame WidthRequest="300"
                   HeightRequest="480">

                <FlexLayout Direction="Column">
                    <Label Text="Banana Monkey"
                           Style="{StaticResource headerLabel}" />
                    <Label Text="Watch this monkey eat a giant banana." />
                    <Label Text="  &#x2022; More fun than a barrel of monkeys" />
                    <Label Text="  &#x2022; Banana not included" />
                    <Image Source="{local:ImageResource FlexLayoutDemos.Images.Banana.jpg}"
                           WidthRequest="240"
                           HeightRequest="180" />
                    <Label FlexLayout.Grow="1" />
                    <Button />
                </FlexLayout>
            </Frame>

            <Frame WidthRequest="300"
                   HeightRequest="480">

                <FlexLayout Direction="Column">
                    <Label Text="Face-Palm Monkey"
                           Style="{StaticResource headerLabel}" />
                    <Label Text="This monkey reacts appropriately to ridiculous assertions and actions." />
                    <Label Text="  &#x2022; Cynical but not unfriendly" />
                    <Label Text="  &#x2022; Seven varieties of grimaces" />
                    <Label Text="  &#x2022; Doesn't laugh at your jokes" />
                    <Image Source="{local:ImageResource FlexLayoutDemos.Images.FacePalm.jpg}"
                           WidthRequest="180"
                           HeightRequest="180" />
                    <Label FlexLayout.Grow="1" />
                    <Button />
                </FlexLayout>
            </Frame>
        </FlexLayout>
    </ScrollView>
</ContentPage>

Der implizite Stil für die Image umfasst Einstellungen von zwei angefügten bindbaren Eigenschaften Flexlayout:The implicit style for the Image includes settings of two attached bindable properties of Flexlayout:

<Style TargetType="Image">
    <Setter Property="FlexLayout.Order" Value="-1" />
    <Setter Property="FlexLayout.AlignSelf" Value="Center" />
</Style>

Die Order Einstellung –1 bewirkt, dass das Image-Element in jeder der geschachtelten FlexLayout Ansichten angezeigt wird, unabhängig von der Position in der Children-Auflistung.The Order setting of –1 causes the Image element to be displayed first in each of the nested FlexLayout views regardless of its position within the children collection. Die AlignSelf-Eigenschaft von Center bewirkt, dass die Image innerhalb der FlexLayout zentriert werden.The AlignSelf property of Center causes the Image to be centered within the FlexLayout. Dies überschreibt die Einstellung der AlignItems-Eigenschaft, die den Standardwert Stretch aufweist. Dies bedeutet, dass die Label und Button untergeordneten Elemente auf die vollständige Breite des FlexLayout gestreckt werden.This overrides the setting of the AlignItems property, which has a default value of Stretch, meaning that the Label and Button children are stretched to the full width of the FlexLayout.

In jeder der drei FlexLayout Ansichten ist ein leeres Label vor dem Button, verfügt aber über die Grow Einstellung 1.Within each of the three FlexLayout views, a blank Label precedes the Button, but it has a Grow setting of 1. Dies bedeutet, dass der gesamte zusätzliche vertikale Bereich diesem leeren Label zugeordnet wird, wodurch die Button effektiv auf den unteren Rand übertragen wird.This means that all the extra vertical space is allocated to this blank Label, which effectively pushes the Button to the bottom.

Die bindbaren Eigenschaften im DetailThe bindable properties in detail

Nachdem Sie nun einige gängige Anwendungen von FlexLayout kennengelernt haben, können Sie die Eigenschaften von FlexLayout im Detail untersucht werden.Now that you've seen some common applications of FlexLayout, the properties of FlexLayout can be explored in more detail. FlexLayout definiert sechs bindbare Eigenschaften, die Sie für die FlexLayout selbst festlegen, entweder im Code oder in XAML, um die Ausrichtung und Ausrichtung zu steuern.FlexLayout defines six bindable properties that you set on the FlexLayout itself, either in code or XAML, to control orientation and alignment. (Eine dieser Eigenschaften, Position, wird in diesem Artikel nicht behandelt.)(One of these properties, Position, is not covered in this article.)

Sie können mit den fünf verbleibenden bindbaren Eigenschaften experimentieren, indem Sie die Seite " Experiment " des Beispiels " flexlayoutdemos " verwenden.You can experiment with the five remaining bindable properties using the Experiment page of the FlexLayoutDemos sample. Auf dieser Seite können Sie untergeordnete Elemente einer FlexLayout hinzufügen oder entfernen und Kombinationen der fünf bindbaren Eigenschaften festlegen.This page allows you to add or remove children from a FlexLayout and to set combinations of the five bindable properties. Alle untergeordneten Elemente der FlexLayout sind Label Sichten verschiedener Farben und Größen, wobei die Text-Eigenschaft auf eine Zahl festgelegt ist, die ihrer Position in der Children Auflistung entspricht.All the children of the FlexLayout are Label views of various colors and sizes, with the Text property set to a number corresponding to its position in the Children collection.

Wenn das Programm gestartet wird, werden in fünf Picker Ansichten die Standardwerte dieser fünf FlexLayout Eigenschaften angezeigt.When the program starts up, five Picker views display the default values of these five FlexLayout properties. Der FlexLayout unten auf dem Bildschirm enthält drei untergeordnete Elemente:The FlexLayout towards the bottom of the screen contains three children:

![Die Experiment Seite: Standard](flex-layout-images/ExperimentDefault.png "Die Seite "Experiment"-Standard")The Experiment Page: Default

Jede der Label Ansichten verfügt über einen grauen Hintergrund, der den Speicherplatz in der FlexLayout anzeigt, der Label zugeordnet ist.Each of the Label views has a gray background that shows the space allocated to that Label within the FlexLayout. Der Hintergrund des FlexLayout selbst ist Alice Blue.The background of the FlexLayout itself is Alice Blue. Es belegt den gesamten unteren Bereich der Seite, mit Ausnahme eines kleinen Randes auf der linken und rechten Seite.It occupies the entire bottom area of the page except for a little margin at the left and right.

Die Direction-EigenschaftThe Direction property

Die Direction -Eigenschaft ist vom Typ FlexDirection, eine Enumeration mit vier Membern:The Direction property is of type FlexDirection, an enumeration with four members:

  • Column
  • ColumnReverse (oder "Column-Reverse" in XAML)ColumnReverse (or "column-reverse" in XAML)
  • Row, der StandardwertRow, the default
  • RowReverse (oder "Zeilen Rückgängigmachen" in XAML)RowReverse (or "row-reverse" in XAML)

In XAML können Sie den Wert dieser Eigenschaft mit den Namen der Enumerationsmember in Kleinbuchstaben, Großbuchstaben oder gemischter Groß-/Kleinschreibung angeben, oder Sie können zwei zusätzliche Zeichen folgen verwenden, die in Klammern angezeigt werden, die mit den CSS-Indikatoren identisch sind.In XAML, you can specify the value of this property using the enumeration member names in lowercase, uppercase, or mixed case, or you can use two additional strings shown in parentheses that are the same as the CSS indicators. (Die "Column-Reverse"-und "Row-Reverse"-Zeichen folgen werden in der FlexDirectionTypeConverter Klasse definiert, die vom XAML-Parser verwendet wird.)(The "column-reverse" and "row-reverse" strings are defined in the FlexDirectionTypeConverter class used by the XAML parser.)

Hier ist die Experiment Seite (von links nach rechts), die Row Richtung, Column Richtung und ColumnReverse Richtung:Here's the Experiment page showing (from left to right), the Row direction, Column direction, and ColumnReverse direction:

Die Experiment Seite: RichtungThe Experiment Page: Direction

Beachten Sie, dass die Elemente für die Reverse Optionen rechts oder unten beginnen.Notice that for the Reverse options, the items start at the right or bottom.

Die Wrap-EigenschaftThe Wrap property

Die Wrap -Eigenschaft ist vom Typ FlexWrap, eine Enumeration mit drei Elementen:The Wrap property is of type FlexWrap, an enumeration with three members:

  • NoWrap, der StandardwertNoWrap, the default
  • Wrap
  • Reverse (oder "Wrap-Reverse" in XAML)Reverse (or "wrap-reverse" in XAML)

Von links nach rechts zeigen diese Bildschirme die Optionen NoWrap, Wrap und Reverse für 12 untergeordnete Elemente an:From left to right, these screens show the NoWrap, Wrap and Reverse options for 12 children:

Die Experiment Seite: WrapThe Experiment Page: Wrap

Wenn die Wrap-Eigenschaft auf NoWrap festgelegt ist und die Hauptachse eingeschränkt ist (wie in diesem Programm) und die Hauptachse nicht breit oder hoch genug ist, um alle untergeordneten Elemente zu erfüllen, versucht der FlexLayout, die Elemente zu verkleinern. , wie der IOS-Screenshot veranschaulicht.When the Wrap property is set to NoWrap and the main axis is constrained (as in this program), and the main axis is not wide or tall enough to fit all the children, the FlexLayout attempts to make the items smaller, as the iOS screenshot demonstrates. Sie können die Verkleinerung der Elemente mit der Shrink angefügten bindbare-Eigenschaft steuern.You can control the shrinkness of the items with the Shrink attached bindable property.

Die Eigenschaft "justifycontent"The JustifyContent property

Die JustifyContent -Eigenschaft ist vom Typ FlexJustify, eine Enumeration mit sechs Membern:The JustifyContent property is of type FlexJustify, an enumeration with six members:

  • Start (oder "Flex-Start" in XAML), StandardStart (or "flex-start" in XAML), the default
  • Center
  • End (oder "Flex-End" in XAML)End (or "flex-end" in XAML)
  • SpaceBetween (oder "Leerzeichen zwischen" in XAML)SpaceBetween (or "space-between" in XAML)
  • SpaceAround (oder "Leerraum" in XAML)SpaceAround (or "space-around" in XAML)
  • SpaceEvenly

Diese Eigenschaft gibt an, wie die Elemente auf der Hauptachse, d. h. die horizontale Achse in diesem Beispiel, in den Abstand gestellt werden:This property specifies how the items are spaced on the main axis, which is the horizontal axis in this example:

Die Experiment Seite: Inhalt rechtfertigenThe Experiment Page: Justify Content

In allen drei Screenshots wird die Wrap-Eigenschaft auf Wrap festgelegt.In all three screenshots, the Wrap property is set to Wrap. Der Start Standard wird im vorherigen Android-Bildschirmfoto angezeigt.The Start default is shown in the previous Android screenshot. Der IOS-Bildschirmfoto zeigt die Center Option an: alle Elemente werden in den Mittelpunkt verschoben.The iOS screenshot here shows the Center option: all the items are moved to the center. Die drei weiteren Optionen, die mit dem Wort beginnen, Space den zusätzlichen, nicht von den Elementen belegten Speicherplatz zuzuordnen.The three other options beginning with the word Space allocate the extra space not occupied by the items. SpaceBetween ordnet den Raum gleichmäßig zwischen den Elementen zu. SpaceAround fügt den gleichen Raum um jedes Element, während SpaceEvenly den gleichen Raum zwischen den einzelnen Elementen und vor dem ersten Element und hinter dem letzten Element in der Zeile einfügt.SpaceBetween allocates the space equally between the items; SpaceAround puts equal space around each item, while SpaceEvenly puts equal space between each item, and before the first item and after the last item on the row.

Die alignitems-EigenschaftThe AlignItems property

Die AlignItems -Eigenschaft ist vom Typ FlexAlignItems, eine Enumeration mit vier Membern:The AlignItems property is of type FlexAlignItems, an enumeration with four members:

  • Stretch, der StandardwertStretch, the default
  • Center
  • Start (oder "Flex-Start" in XAML)Start (or "flex-start" in XAML)
  • End (oder "Flex-End" in XAML)End (or "flex-end" in XAML)

Dies ist eine von zwei Eigenschaften (die andere wird AlignContent), die angibt, wie untergeordnete Elemente auf der Kreuz Achse ausgerichtet werden.This is one of two properties (the other being AlignContent) that indicates how children are aligned on the cross axis. In jeder Zeile werden die untergeordneten Elemente gestreckt (wie im vorherigen Screenshot dargestellt) oder am Anfang, Mittelpunkt oder Ende der einzelnen Elemente ausgerichtet, wie in den folgenden drei Screenshots gezeigt:Within each row, the children are stretched (as shown in the previous screenshot), or aligned on the start, center, or end of each item, as shown in the following three screenshots:

Die Experiment Seite: Elemente ausrichtenThe Experiment Page: Align Items

Im IOS-Screenshot werden die Spitzen aller untergeordneten Elemente ausgerichtet.In the iOS screenshot, the tops of all the children are aligned. In den Android-Screenshots werden die Elemente vertikal basierend auf dem höchsten untergeordneten Element zentriert.In the Android screenshots, the items are vertically centered based on the tallest child. Im UWP-Bildschirmfoto werden die untersten Elemente aller Elemente ausgerichtet.In the UWP screenshot, the bottoms of all the items are aligned.

Für jedes einzelne Element kann die AlignItems Einstellung mit der AlignSelf angefügten bindbaren Eigenschaft überschrieben werden.For any individual item, the AlignItems setting can be overridden with the AlignSelf attached bindable property.

Die aligncontent-EigenschaftThe AlignContent property

Die AlignContent -Eigenschaft ist vom Typ FlexAlignContent, eine Enumeration mit sieben Membern:The AlignContent property is of type FlexAlignContent, an enumeration with seven members:

  • Stretch, der StandardwertStretch, the default
  • Center
  • Start (oder "Flex-Start" in XAML)Start (or "flex-start" in XAML)
  • End (oder "Flex-End" in XAML)End (or "flex-end" in XAML)
  • SpaceBetween (oder "Leerzeichen zwischen" in XAML)SpaceBetween (or "space-between" in XAML)
  • SpaceAround (oder "Leerraum" in XAML)SpaceAround (or "space-around" in XAML)
  • SpaceEvenly

Wie AlignItems richtet die AlignContent-Eigenschaft auch untergeordnete Elemente auf der quer Achse aus, wirkt sich aber auf ganze Zeilen oder Spalten aus:Like AlignItems, the AlignContent property also aligns children on the cross axis, but affects entire rows or columns:

Die Experiment Seite: Inhalt ausrichtenThe Experiment Page: Align Content

Im IOS-Bildschirmfoto befinden sich beide Zeilen im oberen Bereich. im Android-Screenshot befinden Sie sich in der Mitte. und im UWP-Screenshot befinden Sie sich im unteren Bereich.In the iOS screenshot, both rows are at the top; in the Android screenshot they're in the center; and in the UWP screenshot they're at the bottom. Die Zeilen können auch auf unterschiedliche Weise verteilt werden:The rows can also be spaced in various ways:

Die Experiment Seite: Inhalt ausrichten 2The Experiment Page:  Align Content 2

Der AlignContent hat keine Auswirkung, wenn nur eine Zeile oder Spalte vorhanden ist.The AlignContent has no effect when there is only one row or column.

Details der angefügten bindbaren EigenschaftenThe attached bindable properties in detail

FlexLayout definiert fünf angefügte bindbare Eigenschaften.FlexLayout defines five attached bindable properties. Diese Eigenschaften werden auf untergeordnete Elemente der FlexLayout festgelegt und beziehen sich nur auf das jeweilige untergeordnete Element.These properties are set on children of the FlexLayout and pertain only to that particular child.

Die alignself-EigenschaftThe AlignSelf Property

Die AlignSelf angefügte bindbare-Eigenschaft ist vom Typ FlexAlignSelf, eine Enumeration mit fünf Membern:The AlignSelf attached bindable property is of type FlexAlignSelf, an enumeration with five members:

  • Auto, der StandardwertAuto, the default
  • Stretch
  • Center
  • Start (oder "Flex-Start" in XAML)Start (or "flex-start" in XAML)
  • End (oder "Flex-End" in XAML)End (or "flex-end" in XAML)

Für alle untergeordneten Elemente des FlexLayout überschreibt diese Eigenschafts Einstellung die AlignItems -Eigenschaft, die auf dem FlexLayout selbst festgelegt ist.For any individual child of the FlexLayout, this property setting overrides the AlignItems property set on the FlexLayout itself. Die Standardeinstellung Auto bedeutet, dass die AlignItems Einstellung verwendet werden soll.The default setting of Auto means to use the AlignItems setting.

Für ein Label Element mit dem Namen label (oder Beispiel) können Sie die AlignSelf-Eigenschaft in Code wie dem folgenden festlegen:For a Label element named label (or example), you can set the AlignSelf property in code like this:

FlexLayout.SetAlignSelf(label, FlexAlignSelf.Center);

Beachten Sie, dass es keinen Verweis auf das übergeordnete FlexLayout des Label gibt.Notice that there is no reference to the FlexLayout parent of the Label. In XAML legen Sie die-Eigenschaft wie folgt fest:In XAML, you set the property like this:

<Label ... FlexLayout.AlignSelf="Center" ... />

Die Order-EigenschaftThe Order Property

Die Order -Eigenschaft ist vom Typ int.The Order property is of type int. Der Standardwert ist 0.The default value is 0.

Mit der Order-Eigenschaft können Sie die Reihenfolge ändern, in der die untergeordneten Elemente des FlexLayout angeordnet werden.The Order property allows you to change the order that the children of the FlexLayout are arranged. In der Regel sind die untergeordneten Elemente eines FlexLayout die gleiche Reihenfolge wie in der Children Auflistung.Usually, the children of a FlexLayout are arranged is the same order that they appear in the Children collection. Sie können diese Reihenfolge außer Kraft setzen, indem Sie die Order angefügte bindbare Eigenschaft auf ein oder mehrere untergeordnete Elemente auf einen ganzzahligen Wert ungleich 0 festlegen.You can override this order by setting the Order attached bindable property to a non-zero integer value on one or more children. Der FlexLayout ordnet dann seine untergeordneten Elemente auf der Grundlage der Einstellung der Eigenschaft Order für jedes untergeordnete Element an, aber untergeordnete Elemente mit derselben Order Einstellung werden in der Reihenfolge angeordnet, in der Sie in der Children Auflistung angezeigt werden.The FlexLayout then arranges its children based on the setting of the Order property on each child, but children with the same Order setting are arranged in the order that they appear in the Children collection.

Die Basis EigenschaftThe Basis Property

Die Basis angefügte bindbare Eigenschaft gibt die Menge an Speicherplatz an, die einem untergeordneten Element des FlexLayout auf der Hauptachse zugeordnet ist.The Basis attached bindable property indicates the amount of space that is allocated to a child of the FlexLayout on the main axis. Die von der Basis-Eigenschaft angegebene Größe ist die Größe entlang der Hauptachse der übergeordneten FlexLayout.The size specified by the Basis property is the size along the main axis of the parent FlexLayout. Daher gibt Basis die Breite eines untergeordneten Elements an, wenn die untergeordneten Elemente in Zeilen angeordnet sind, oder die Höhe, wenn die untergeordneten Elemente in Spalten angeordnet sind.Therefore, Basis indicates the width of a child when the children are arranged in rows, or the height when the children are arranged in columns.

Die Basis-Eigenschaft ist vom Typ FlexBasis, eine-Struktur.The Basis property is of type FlexBasis, a structure. Die Größe kann entweder in geräteunabhängigen Einheiten oder als Prozentsatz der Größe des FlexLayout angegeben werden.The size can be specified in either device-independent units or as a percentage of the size of the FlexLayout. Der Standardwert der Basis-Eigenschaft ist die statische Eigenschaft FlexBasis.Auto. Dies bedeutet, dass die angeforderte Breite oder Höhe des untergeordneten Elements verwendet wird.The default value of the Basis property is the static property FlexBasis.Auto, which means that the child's requested width or height is used.

Im Code können Sie die Basis-Eigenschaft für eine Label mit dem Namen label auf 40 geräteunabhängige Einheiten wie folgt festlegen:In code, you can set the Basis property for a Label named label to 40 device-independent units like this:

FlexLayout.SetBasis(label, new FlexBasis(40, false));

Das zweite Argument für den FlexBasis-Konstruktor wird isRelative benannt und gibt an, ob die Größe relativ (true) oder absolut (false) ist.The second argument to the FlexBasis constructor is named isRelative and indicates whether the size is relative (true) or absolute (false). Das-Argument hat den Standardwert false, sodass Sie auch den folgenden Code verwenden können:The argument has a default value of false, so you can also use the following code:

FlexLayout.SetBasis(label, new FlexBasis(40));

Eine implizite Konvertierung von float in FlexBasis ist definiert, sodass Sie Sie noch weiter vereinfachen können:An implicit conversion from float to FlexBasis is defined, so you can simplify it even further:

FlexLayout.SetBasis(label, 40);

Sie können die Größe auf 25% des FlexLayout übergeordneten Elements festlegen, wie im folgenden Beispiel:You can set the size to 25% of the FlexLayout parent like this:

FlexLayout.SetBasis(label, new FlexBasis(0.25f, true));

Dieser Bruch Wert muss zwischen 0 und 1 liegen.This fractional value must be in the range of 0 to 1.

In XAML können Sie eine Zahl für eine Größe in geräteunabhängigen Einheiten verwenden:In XAML, you can use a number for a size in device-independent units:

<Label ... FlexLayout.Basis="40" ... />

Oder Sie können einen Prozentsatz im Bereich von 0% bis 100% angeben:Or you can specify a percentage in the range of 0% to 100%:

<Label ... FlexLayout.Basis="25%" ... />

Auf der Seite " Basis Experiment " des Beispiels " flexlayoutdemos " können Sie mit der Basis-Eigenschaft experimentieren.The Basis Experiment page of the FlexLayoutDemos sample allows you to experiment with the Basis property. Auf der Seite wird eine umschließende Spalte mit fünf Label Elementen mit wechselnden Hintergrund-und Vorder Grundfarben angezeigt.The page displays a wrapped column of five Label elements with alternating background and foreground colors. Mit zwei Slider-Elementen können Sie Basis Werte für das zweite und vierte Label angeben:Two Slider elements let you specify Basis values for the second and fourth Label:

Die Basis Experiment SeiteThe Basis Experiment Page

Der IOS-Screenshot auf der linken Seite zeigt die beiden Label Elemente in geräteunabhängigen Einheiten in Höhe von Höhen.The iOS screenshot at the left shows the two Label elements being given heights in device-independent units. Im Android-Bildschirm wird angezeigt, dass Ihnen Höhen zugewiesen werden, die ein Bruchteil der Gesamthöhe des FlexLayout sind.The Android screen shows them being given heights that are a fraction of the total height of the FlexLayout. Wenn die Basis auf 100% festgelegt ist, ist das untergeordnete Element die Höhe des FlexLayoutund wird mit der nächsten Spalte Umbruch und die gesamte Höhe dieser Spalte belegen, wie der UWP-Bildschirmfoto zeigt: Sie wird angezeigt, als ob die fünf untergeordneten Elemente in einer Zeile angeordnet sind. , aber Sie sind tatsächlich in fünf Spalten angeordnet.If the Basis is set at 100%, then the child is the height of the FlexLayout, and will wrap to the next column and occupy the entire height of that column, as the UWP screenshot demonstrates: It appears as if the five children are arranged in a row, but they're actually arranged in five columns.

Die Grow-EigenschaftThe Grow Property

Die Grow angefügte bindbare Eigenschaft ist vom Typ int.The Grow attached bindable property is of type int. Der Standardwert ist 0, und der Wert muss größer oder gleich 0 sein.The default value is 0, and the value must be greater than or equal to 0.

Die Grow-Eigenschaft spielt eine Rolle, wenn die Wrap-Eigenschaft auf NoWrap festgelegt ist und die Zeile der untergeordneten Elemente eine Gesamtbreite hat, die kleiner als die Breite der FlexLayout ist, oder die Spalte untergeordneter Elemente hat eine kürzere Höhe als die FlexLayout.The Grow property plays a role when the Wrap property is set to NoWrap and the row of children has a total width less than the width of the FlexLayout, or the column of children has a shorter height than the FlexLayout. Die Grow-Eigenschaft gibt an, wie der übrig gebliebene Leerraum zwischen den untergeordneten Elementen angezeigt werden soll.The Grow property indicates how to apportion the leftover space among the children.

Auf der Seite "wachsen" des Experiments werden fünf Label Elemente von wechselnden Farben in einer Spalte angeordnet, und mit zwei Slider Elementen können Sie die Grow-Eigenschaft des zweiten und vierten Label anpassen.In the Grow Experiment page, five Label elements of alternating colors are arranged in a column, and two Slider elements allow you to adjust the Grow property of the second and fourth Label. Der IOS-Screenshot ganz links zeigt die standardmäßigen Grow Eigenschaften von 0:The iOS screenshot at the far left shows the default Grow properties of 0:

Die Seite zum Vergrößern des ExperimentsThe Grow Experiment Page

Wenn einem untergeordneten Element ein positiver Grow Wert zugewiesen wird, nimmt das untergeordnete Element den gesamten verbleibenden Platz in Kauf, wie im Android-Bildschirmfoto veranschaulicht.If any one child is given a positive Grow value, then that child takes up all the remaining space, as the Android screenshot demonstrates. Dieser Speicherplatz kann auch unter zwei oder mehr untergeordneten Elementen zugeordnet werden.This space can also be allocated among two or more children. Im UWP-Bildschirmfoto wird die Grow-Eigenschaft des zweiten Label auf 0,5 festgelegt, während die Grow-Eigenschaft der vierten Label 1,5 ist. Dadurch erhält der vierte Label dreimal so viel wie der zweite Label.In the UWP screenshot, the Grow property of the second Label is set to 0.5, while the Grow property of the fourth Label is 1.5, which gives the fourth Label three times as much of the leftover space as the second Label.

Wie die untergeordnete Ansicht diesen Bereich verwendet, hängt vom jeweiligen Typ des untergeordneten Elements ab.How the child view uses that space depends on the particular type of child. Bei einem Label kann der Text im gesamten Bereich der Label mithilfe der Eigenschaften HorizontalTextAlignment und VerticalTextAlignment positioniert werden.For a Label, the text can be positioned within the total space of the Label using the properties HorizontalTextAlignment and VerticalTextAlignment.

Die Shrink-EigenschaftThe Shrink Property

Die Shrink angefügte bindbare Eigenschaft ist vom Typ int.The Shrink attached bindable property is of type int. Der Standardwert ist 1, und der Wert muss größer oder gleich 0 sein.The default value is 1, and the value must be greater than or equal to 0.

Die Shrink-Eigenschaft spielt eine Rolle, wenn die Wrap-Eigenschaft auf NoWrap festgelegt ist und die Aggregat Breite einer Zeile mit untergeordneten Elementen größer ist als die Breite der FlexLayout, oder die Aggregat Höhe einer einzelnen Spalte mit untergeordneten Elementen ist größer als die Höhe von. der FlexLayout.The Shrink property plays a role when the Wrap property is set to NoWrap and the aggregate width of a row of children is greater than the width of the FlexLayout, or the aggregate height of a single column of children is greater than the height of the FlexLayout. Normalerweise werden die FlexLayout diese untergeordneten Elemente anzeigen, indem Sie Ihre Größe überschreiten.Normally the FlexLayout will display these children by constricting their sizes. Die Shrink-Eigenschaft kann angeben, welche untergeordneten Elemente Priorität haben, wenn Sie in ihrer vollen Größe angezeigt werden.The Shrink property can indicate which children are given priority in being displayed at their full sizes.

Die Seite " Versuch verkleinern " erstellt eine FlexLayout mit einer einzelnen Zeile mit fünf Label untergeordneten Elementen, die mehr Platz als die FlexLayout Breite benötigen.The Shrink Experiment page creates a FlexLayout with a single row of five Label children that require more space than the FlexLayout width. Der IOS-Screenshot auf der linken Seite zeigt alle Label Elemente mit den Standardwerten 1 an:The iOS screenshot at the left shows all the Label elements with default values of 1:

![Die Seite "Versuch verkleinern"](flex-layout-images/ShrinkExperiment.png "Die Seite "Versuch verkleinern"")The Shrink Experiment Page

Im Android-Screenshot wird der Shrink Wert für die zweite Label auf 0 festgelegt, und die Label wird in der vollständigen Breite angezeigt.In the Android screenshot, the Shrink value for the second Label is set to 0, and that Label is displayed in its full width. Außerdem erhält der vierte Label einen Shrink Wert, der größer als 1 ist, und verkleinert.Also, the fourth Label is given a Shrink value greater than one, and it has shrunk. Der UWP-Bildschirm Abbildung zeigt, dass beide Label Elemente den Shrink Wert 0 erhalten, damit Sie in ihrer vollen Größe angezeigt werden können, falls dies möglich ist.The UWP screenshot shows both Label elements being given a Shrink value of 0 to allow them to be displayed in their full size, if that is possible.

Sie können die Werte für Grow und Shrink auf Situationen festlegen, in denen die aggregierten untergeordneten Größen manchmal kleiner als oder manchmal größer als die Größe des FlexLayout sein können.You can set both the Grow and Shrink values to accommodate situations where the aggregate child sizes might sometimes be less than or sometimes greater than the size of the FlexLayout.

CSS-Formatierung mit flexlayoutCSS styling with FlexLayout

Sie können die CSS -Formatierungsfunktion verwenden, die mit xamarin. Forms 3,0 in Verbindung mit FlexLayout eingeführt wurde.You can use the CSS styling feature introduced with Xamarin.Forms 3.0 in connection with FlexLayout. Die Seite CSS-Katalog Elemente des Beispiels " flexlayoutdemos " dupliziert das Layout der Seite " Katalog Elemente ", aber mit einem CSS-Stylesheet für viele der Stile:The CSS Catalog Items page of the FlexLayoutDemos sample duplicates the layout of the Catalog Items page, but with a CSS style sheet for many of the styles:

Die Seite CSS-Katalog ElementeThe CSS Catalog Items Page

Die ursprüngliche catalogitemspage. XAML -Datei enthält fünf Style Definitionen im Resources Abschnitt mit 15 Setter Objekten.The original CatalogItemsPage.xaml file has five Style definitions in its Resources section with 15 Setter objects. In der csscatalogitemspage. XAML -Datei, die auf zwei Style Definitionen mit nur vier Setter Objekten reduziert wurde.In the CssCatalogItemsPage.xaml file, that has been reduced to two Style definitions with just four Setter objects. Diese Stile ergänzen das CSS-Stylesheet für Eigenschaften, die von der xamarin. Forms-CSS-Formatierungsfunktion derzeit nicht unterstützt werden:These styles supplement the CSS style sheet for properties that the Xamarin.Forms CSS styling feature currently doesn't support:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:FlexLayoutDemos"
             x:Class="FlexLayoutDemos.CssCatalogItemsPage"
             Title="CSS Catalog Items">
    <ContentPage.Resources>
        <StyleSheet Source="CatalogItemsStyles.css" />

        <Style TargetType="Frame">
            <Setter Property="BorderColor" Value="Blue" />
            <Setter Property="CornerRadius" Value="15" />
        </Style>

        <Style TargetType="Button">
            <Setter Property="Text" Value="LEARN MORE" />
            <Setter Property="BorderRadius" Value="20" />
        </Style>
    </ContentPage.Resources>

    <ScrollView Orientation="Both">
        <FlexLayout>
            <Frame>
                <FlexLayout Direction="Column">
                    <Label Text="Seated Monkey" StyleClass="header" />
                    <Label Text="This monkey is laid back and relaxed, and likes to watch the world go by." />
                    <Label Text="  &#x2022; Doesn't make a lot of noise" />
                    <Label Text="  &#x2022; Often smiles mysteriously" />
                    <Label Text="  &#x2022; Sleeps sitting up" />
                    <Image Source="{local:ImageResource FlexLayoutDemos.Images.SeatedMonkey.jpg}" />
                    <Label StyleClass="empty" />
                    <Button />
                </FlexLayout>
            </Frame>

            <Frame>
                <FlexLayout Direction="Column">
                    <Label Text="Banana Monkey" StyleClass="header" />
                    <Label Text="Watch this monkey eat a giant banana." />
                    <Label Text="  &#x2022; More fun than a barrel of monkeys" />
                    <Label Text="  &#x2022; Banana not included" />
                    <Image Source="{local:ImageResource FlexLayoutDemos.Images.Banana.jpg}" />
                    <Label StyleClass="empty" />
                    <Button />
                </FlexLayout>
            </Frame>

            <Frame>
                <FlexLayout Direction="Column">
                    <Label Text="Face-Palm Monkey" StyleClass="header" />
                    <Label Text="This monkey reacts appropriately to ridiculous assertions and actions." />
                    <Label Text="  &#x2022; Cynical but not unfriendly" />
                    <Label Text="  &#x2022; Seven varieties of grimaces" />
                    <Label Text="  &#x2022; Doesn't laugh at your jokes" />
                    <Image Source="{local:ImageResource FlexLayoutDemos.Images.FacePalm.jpg}" />
                    <Label StyleClass="empty" />
                    <Button />
                </FlexLayout>
            </Frame>
        </FlexLayout>
    </ScrollView>
</ContentPage>

Auf das CSS-Stylesheet wird in der ersten Zeile des Resources Abschnitts verwiesen:The CSS style sheet is referenced in the first line of the Resources section:

<StyleSheet Source="CatalogItemsStyles.css" />

Beachten Sie auch, dass zwei Elemente in jedem der drei Elemente StyleClass Einstellungen einschließen:Notice also that two elements in each of the three items include StyleClass settings:

<Label Text="Seated Monkey" StyleClass="header" />
···
<Label StyleClass="empty" />

Diese beziehen sich auf Selektoren im catalogitemsstyles. CSS -Stylesheet:These refer to selectors in the CatalogItemsStyles.css style sheet:

frame {
    width: 300;
    height: 480;
    background-color: lightyellow;
    margin: 10;
}

label {
    margin: 4 0;
}

label.header {
    margin: 8 0;
    font-size: large;
    color: blue;
}

label.empty {
    flex-grow: 1;
}

image {
    height: 180;
    order: -1;
    align-self: center;
}

button {
    font-size: large;
    color: white;
    background-color: green;
}

An dieser Stelle wird auf mehrere FlexLayout angefügte bindbare Eigenschaften verwiesen.Several FlexLayout attached bindable properties are referenced here. Im label.empty Selector sehen Sie das flex-grow-Attribut, das eine leere Label formatiert, um einen leeren Bereich oberhalb der Button bereitzustellen.In the label.empty selector, you'll see the flex-grow attribute, which styles an empty Label to provide some blank space above the Button. Der image Selektor enthält ein order Attribut und ein align-self Attribut, die beide FlexLayout zugeordneten bindbaren Eigenschaften entsprechen.The image selector contains an order attribute and an align-self attribute, both of which correspond to FlexLayout attached bindable properties.

Sie haben gesehen, dass Sie Eigenschaften direkt für die FlexLayout festlegen können, und Sie können angefügte bindbare Eigenschaften für die untergeordneten Elemente einer FlexLayout festlegen.You've seen that you can set properties directly on the FlexLayout and you can set attached bindable properties on the children of a FlexLayout. Oder Sie können diese Eigenschaften indirekt mithilfe herkömmlicher XAML-basierter Stile oder CSS-Stile festlegen.Or, you can set these properties indirectly using traditional XAML-based styles or CSS styles. Wichtig ist es, diese Eigenschaften zu kennen und zu verstehen.What's important is to know and understand these properties. Diese Eigenschaften machen die FlexLayout wirklich flexibel.These properties are what makes the FlexLayout truly flexible.

Flexlayout mit xamarin. UniversityFlexLayout with Xamarin.University

Xamarin. Forms 3,0-flexlayoutvideoXamarin.Forms 3.0 Flex Layout video