HorizontalStackLayout and VerticalStackLayout (#228)

* Horizontal and Vertical StackLayout. * Edit. * Edit. * Edit. * Edits. * VerticalStackLayout updates. * HorizontalStackLayout updates. * Fix linting errors. * Edits. * Edit. * Edit. * Feedback incorporated. * Christmas docs (#242) * Splash screen (#232) * Splash screens. * Edits. * Edits. * Edit. * Update docs/user-interface/splashscreen.md Co-authored-by: Andy (Steve) De George <67293991+adegeo@users.noreply.github.com> * Feedback incorporated. * Edits. * File rename. * Feedback incorporated. * Fix image link. * Delete image. * Feedback incorporated. Co-authored-by: Andy (Steve) De George <67293991+adegeo@users.noreply.github.com> * BlazorWebView (#231) * Initial content. * Fixed image link. * Edits. * Edit. * Update docs/user-interface/controls/blazorwebview.md Co-authored-by: Eilon Lipton <Eilon@users.noreply.github.com> * Update docs/user-interface/controls/blazorwebview.md Co-authored-by: Eilon Lipton <Eilon@users.noreply.github.com> * Update docs/user-interface/controls/blazorwebview.md Co-authored-by: Eilon Lipton <Eilon@users.noreply.github.com> * Mac Catalyst -> macOS * Use media folder. * Feedback incorporated. * TOC updated. * Add preview note. * Edit. * Update docs/user-interface/controls/blazorwebview.md Co-authored-by: Eilon Lipton <Eilon@users.noreply.github.com> * Feedback incorporated. Co-authored-by: Eilon Lipton <Eilon@users.noreply.github.com> * Multi-targeting (#222) * Configure multi-targeting doc. * Fix image link. * Edits. * Edit. * Edit. * Edit. * Edit. * Invoking platform code (#221) * Invoke platform code. * Add to TOC. * Image resize. * Edit. * Edits. * Back parenthesis (#230) Fixes the missing back parenthesis. Co-authored-by: sashi <82739042+sashi0034@users.noreply.github.com> * Edit. * Border control (#223) * Border doc. * Edits. * Use media folder. * Back parenthesis (#230) Fixes the missing back parenthesis. * Feedback incorporated. * Image cropped. * Edit. * Add Border to TOC. * TOC updated. Co-authored-by: sashi <82739042+sashi0034@users.noreply.github.com> * Shadow (#224) * Shadow control. * Edits. * Use media folder. * Back parenthesis (#230) Fixes the missing back parenthesis. * Feedback incorporated. * TOC fixed. * Edit. Co-authored-by: sashi <82739042+sashi0034@users.noreply.github.com> * Remove native. * Accessibility (#225) * Initial content. * Edits. * Fix heading. * Heading edit. * Back parenthesis (#230) Fixes the missing back parenthesis. * Update docs/fundamentals/accessibility.md Co-authored-by: Rachel Kang <rachelkang@microsoft.com> * Update docs/fundamentals/accessibility.md Co-authored-by: Rachel Kang <rachelkang@microsoft.com> * Update docs/fundamentals/accessibility.md Co-authored-by: Rachel Kang <rachelkang@microsoft.com> * Update docs/fundamentals/accessibility.md Co-authored-by: Rachel Kang <rachelkang@microsoft.com> * Update docs/fundamentals/accessibility.md Co-authored-by: Rachel Kang <rachelkang@microsoft.com> * Update docs/fundamentals/accessibility.md Co-authored-by: Rachel Kang <rachelkang@microsoft.com> * Update docs/fundamentals/accessibility.md Co-authored-by: Rachel Kang <rachelkang@microsoft.com> * Update docs/fundamentals/accessibility.md Co-authored-by: Rachel Kang <rachelkang@microsoft.com> * Accessibility checklist added. * Fix linting error. * Update docs/fundamentals/accessibility.md Co-authored-by: Rachel Kang <rachelkang@microsoft.com> * More feedback incorporated. * Feedback incorporated. * Add to TOC. Co-authored-by: sashi <82739042+sashi0034@users.noreply.github.com> Co-authored-by: Rachel Kang <rachelkang@microsoft.com> * GraphicsView and Maui.Graphics (#241) * Maui.Graphics: Paint * Build fixes. * TOC update. * Resize images. * Disable borders. * Edit. * GraphicsView. * Update TOC/index. * Edit. * Draw objects: Line and ellipse. * Resized images. * Rectangle, rounded rectangle, arc. * Image resizing. * Edits. * Paths, shadow, line cap, line join, dashed objects. * More drawing methods. * Resized images. * Replaced image. * Image edit. * Pattern paint. * Edits. * Image paint. * Image link fixed. * Edit. * Edits. * Transforms. * Edit. * Affine transforms. * Edits. * Path updates. * Winding modes. * Edits. * Draw with fill and stroke. * Corrections. * Better use of dirtyRect. * Explanatory text. * Edit. * Differentiate from shapes/brushes. * Blend modes (WIP). * Porter-duff blend modes. * Edits. * Image edit. * Images. * Sample link placeholders inserted. * Images doc added to TOC. * Edits. * Removed 2D. * Edits. * Link fixed. * Acrolinx edits. * Title suffix for Maui.Graphics. * Revert "Title suffix for Maui.Graphics." This reverts commit df4de77. * Fixed alt-text. * Fixed usage of .NET MAUI acronym. * Linting errors fixed. * Remove .NET MAUI from H1s. * Remove suffix from metadata. * Stop calling .NET MAUI graphics a library. * Colors. * Edit. * Edits. * Fix lint error. * Use media folders. * Back parenthesis (#230) Fixes the missing back parenthesis. * Add searchScope. (#235) * Re-org paint content. * More content re-org. * Links fixed. * Edits. * Edits. * Edits. * Edit. Co-authored-by: sashi <82739042+sashi0034@users.noreply.github.com> * Edits. * Edits. * Update index. Co-authored-by: Andy (Steve) De George <67293991+adegeo@users.noreply.github.com> Co-authored-by: Eilon Lipton <Eilon@users.noreply.github.com> Co-authored-by: sashi <82739042+sashi0034@users.noreply.github.com> Co-authored-by: Rachel Kang <rachelkang@microsoft.com> * Remove Children property info. * Add new layouts to TOC. Co-authored-by: Andy (Steve) De George <67293991+adegeo@users.noreply.github.com> Co-authored-by: Eilon Lipton <Eilon@users.noreply.github.com> Co-authored-by: sashi <82739042+sashi0034@users.noreply.github.com> Co-authored-by: Rachel Kang <rachelkang@microsoft.com>
dotnet · Jan 7, 2022 · a62cb55 · a62cb55
1 parent 6d898c4
commit a62cb55
Show file tree

Hide file tree

Showing 11 changed files with 368 additions and 0 deletions.
diff --git a/docs/TOC.yml b/docs/TOC.yml
@@ -55,6 +55,12 @@
  items:
  - name: Splash screen
  href: user-interface/images/splashscreen.md
+ - name: Layouts
+ items:
+ - name: HorizontalStackLayout
+ href: user-interface/layouts/horizontalstacklayout.md
+ - name: VerticalStackLayout
+ href: user-interface/layouts/verticalstacklayout.md
  - name: Shadows
  href: user-interface/shadow.md
  - name: Platform integration

diff --git a/docs/user-interface/layouts/horizontalstacklayout.md b/docs/user-interface/layouts/horizontalstacklayout.md
@@ -0,0 +1,161 @@
+---
+title: ".NET MAUI HorizontalStackLayout"
+description: "Learn how the .NET MAUI HorizontalStackLayout organizes child views in a one-dimensional horizontal stack."
+ms.date: 12/06/2021
+---
+
+# HorizontalStackLayout
+
+A `HorizontalStackLayout` organizes child views in a one-dimensional horizontal stack, and is a more performant alternative to a `StackLayout`. In addition, a `HorizontalStackLayout` can be used as a parent layout that contains other child layouts.
+
+The `HorizontalStackLayout` defines the following properties:
+
+- `Spacing`, of type `double`, indicates the amount of space between each child view. The default value of this property is 0.
+
+This property is backed by a `BindableProperty` object, which means that it can be the target of data bindings and styled.
+
+<!--
+> [!TIP]
+> To obtain the best possible layout performance, follow the guidelines at [Optimize layout performance](~/xamarin-forms/deploy-test/performance.md#optimize-layout-performance).
+-->
+
+The following XAML shows how to create a `HorizontalStackLayout` that contains different child views:
+
+```xaml
+<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+ xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+ x:Class="StackLayoutDemos.Views.HorizontalStackLayoutPage">
+ <HorizontalStackLayout Margin="20">
+ <Rectangle Fill="Red"
+ HeightRequest="30"
+ WidthRequest="30" />
+ <Label Text="Red"
+ FontSize="Large" />
+ </HorizontalStackLayout>
+</ContentPage>
+```
+
+This example creates a `HorizontalStackLayout` containing a `Rectangle` and a `Label` object. By default, there is no space between the child views:
+
+:::image type="content" source="media/horizontalstacklayout/basic.png" alt-text="HorizontalStackLayout displaying two views screenshot.":::
+
+> [!NOTE]
+> The value of the `Margin` property represents the distance between an element and its adjacent elements. <!--For more information, see [Margin and Padding](margin-and-padding.md).-->
+
+## Space between child views
+
+The spacing between child views in a `HorizontalStackLayout` can be changed by setting the `Spacing` property to a `double` value:
+
+```xaml
+<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+ xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+ x:Class="StackLayoutDemos.Views.HorizontalStackLayoutPage">
+ <HorizontalStackLayout Margin="20"
+ Spacing="10">
+ <Rectangle Fill="Red"
+ HeightRequest="30"
+ WidthRequest="30" />
+ <Label Text="Red"
+ FontSize="Large" />
+ </HorizontalStackLayout>
+</ContentPage>
+```
+
+This example creates a `HorizontalStackLayout` containing a `Rectangle` and a `Label` object, that have ten device-independent units of space between them:
+
+:::image type="content" source="media/horizontalstacklayout/spacing.png" alt-text="HorizontalStackLayout displaying two spaced views screenshot.":::
+
+> [!TIP]
+> The `Spacing` property can be set to negative values to make child views overlap.
+
+## Position and size child views
+
+The size and position of child views within a `HorizontalStackLayout` depends upon the values of the child views' `HeightRequest` and `WidthRequest` properties, and the values of their `VerticalOptions` properties. In a `HorizontalStackLayout`, child views expand to fill the available height when their size isn't explicitly set.
+
+The `VerticalOptions` properties of a `HorizontalStackLayout`, and its child views, can be set to fields from the `LayoutOptions` struct, which encapsulates an *alignment* layout preference. This layout preference determines the position and size of a child view within its parent layout.
+
+The following XAML example sets alignment preferences on each child view in the `HorizontalStackLayout`:
+
+```xaml
+<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+ xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+ x:Class="StackLayoutDemos.Views.HorizontalStackLayoutPage">
+ <HorizontalStackLayout Margin="20"
+ HeightRequest="200">
+ <Label Text="Start"
+ BackgroundColor="Gray"
+ VerticalOptions="Start" />
+ <Label Text="Center"
+ BackgroundColor="Gray"
+ VerticalOptions="Center" />
+ <Label Text="End"
+ BackgroundColor="Gray"
+ VerticalOptions="End" />
+ <Label Text="Fill"
+ BackgroundColor="Gray"
+ VerticalOptions="Fill" />
+ </HorizontalStackLayout>
+</ContentPage>
+```
+
+In this example, alignment preferences are set on the `Label` objects to control their position within the `HorizontalStackLayout`. The `Start`, `Center`, `End`, and `Fill` fields are used to define the alignment of the `Label` objects within the parent `HorizontalStackLayout`:
+
+:::image type="content" source="media/horizontalstacklayout/alignment.png" alt-text="HorizontalStackLayout displaying aligned views screenshot.":::
+
+A `HorizontalStackLayout` only respects the alignment preferences on child views that are in the opposite direction to the orientation of the layout. Therefore, the `Label` child views within the `HorizontalStackLayout` set their `VerticalOptions` properties to one of the alignment fields:
+
+- `Start`, which positions the `Label` at the start of the `HorizontalStackLayout`.
+- `Center`, which vertically centers the `Label` in the `HorizontalStackLayout`.
+- `End`, which positions the `Label` at the end of the `HorizontalStackLayout`.
+- `Fill`, which ensures that the `Label` fills the height of the `HorizontalStackLayout`.
+
+<!--
+For more information about alignment, see [Layout Options in .NET MAUI](layout-options.md).
+-->
+
+## Nest HorizontalStackLayout objects
+
+A `HorizontalStackLayout` can be used as a parent layout that contains other nested child layouts.
+
+The following XAML shows an example of nesting `VerticalStackLayout` objects in a `HorizontalStackLayout`:
+
+```xaml
+<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
+ xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+ x:Class="StackLayoutDemos.Views.HorizontalStackLayoutPage">
+ <HorizontalStackLayout Margin="20"
+ Spacing="6">
+ <Label Text="Primary colors:" />
+ <VerticalStackLayout Spacing="6">
+ <Rectangle Fill="Red"
+ WidthRequest="30"
+ HeightRequest="30" />
+ <Rectangle Fill="Yellow"
+ WidthRequest="30"
+ HeightRequest="30" />
+ <Rectangle Fill="Blue"
+ WidthRequest="30"
+ HeightRequest="30" />
+ </VerticalStackLayout>
+ <Label Text="Secondary colors:" />
+ <VerticalStackLayout Spacing="6">
+ <Rectangle Fill="Green"
+ WidthRequest="30"
+ HeightRequest="30" />
+ <Rectangle Fill="Orange"
+ WidthRequest="30"
+ HeightRequest="30" />
+ <Rectangle Fill="Purple"
+ WidthRequest="30"
+ HeightRequest="30" />
+ </VerticalStackLayout>
+ </HorizontalStackLayout>
+</ContentPage>
+```
+
+In this example, the parent `HorizontalStackLayout` contains two nested `HorizontalStackLayout` objects:
+
+:::image type="content" source="media/horizontalstacklayout/nested.png" alt-text="HorizontalStackLayout displaying two nested HorizontalStackLayout objects screenshot.":::
+
+> [!IMPORTANT]
+> The deeper you nest layout objects, the more the nested layouts will impact performance. <!--For more information, see [Choose the correct layout](~/xamarin-forms/deploy-test/performance.md#choose-the-correct-layout). -->
diff --git a/docs/user-interface/layouts/media/horizontalstacklayout/alignment.png b/docs/user-interface/layouts/media/horizontalstacklayout/alignment.png
diff --git a/docs/user-interface/layouts/media/horizontalstacklayout/basic.png b/docs/user-interface/layouts/media/horizontalstacklayout/basic.png
diff --git a/docs/user-interface/layouts/media/horizontalstacklayout/nested.png b/docs/user-interface/layouts/media/horizontalstacklayout/nested.png
diff --git a/docs/user-interface/layouts/media/horizontalstacklayout/spacing.png b/docs/user-interface/layouts/media/horizontalstacklayout/spacing.png
diff --git a/docs/user-interface/layouts/media/verticalstacklayout/alignment.png b/docs/user-interface/layouts/media/verticalstacklayout/alignment.png
diff --git a/docs/user-interface/layouts/media/verticalstacklayout/basic.png b/docs/user-interface/layouts/media/verticalstacklayout/basic.png
diff --git a/docs/user-interface/layouts/media/verticalstacklayout/nested.png b/docs/user-interface/layouts/media/verticalstacklayout/nested.png
diff --git a/docs/user-interface/layouts/media/verticalstacklayout/spacing.png b/docs/user-interface/layouts/media/verticalstacklayout/spacing.png
diff --git a/docs/user-interface/layouts/verticalstacklayout.md b/docs/user-interface/layouts/verticalstacklayout.md
@@ -0,0 +1,201 @@
+---
+title: "VerticalStackLayout"
+description: "Learn how the .NET MAUI VerticalStackLayout organizes child views in a one-dimensional vertical stack."
+ms.date: 12/06/2021
+---
+
+# VerticalStackLayout
+
+A `VerticalStackLayout` organizes child views in a one-dimensional vertical stack, and is a more performant alternative to a `StackLayout`. In addition, a `VerticalStackLayout` can be used as a parent layout that contains other child layouts.
+
+The `VerticalStackLayout` defines the following properties:
+
+- `Spacing`, of type `double`, indicates the amount of space between each child view. The default value of this property is 0.
+
+This property is backed by a `BindableProperty` object, which means that it can be the target of data bindings and styled.
+
+<!--
+> [!TIP]
+> To obtain the best possible layout performance, follow the guidelines at [Optimize layout performance](~/xamarin-forms/deploy-test/performance.md#optimize-layout-performance).
+-->
+
+The following XAML shows how to create a `VerticalStackLayout` that contains different child views:
+
+```xaml
+<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+ xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+ x:Class="StackLayoutDemos.Views.VerticalStackLayoutPage">
+ <VerticalStackLayout Margin="20">
+ <Label Text="Primary colors" />
+ <Rectangle Fill="Red"
+ HeightRequest="30"
+ WidthRequest="300" />
+ <Rectangle Fill="Yellow"
+ HeightRequest="30"
+ WidthRequest="300" />
+ <Rectangle Fill="Blue"
+ HeightRequest="30"
+ WidthRequest="300" />
+ <Label Text="Secondary colors" />
+ <Rectangle Fill="Green"
+ HeightRequest="30"
+ WidthRequest="300" />
+ <Rectangle Fill="Orange"
+ HeightRequest="30"
+ WidthRequest="300" />
+ <Rectangle Fill="Purple"
+ HeightRequest="30"
+ WidthRequest="300" />
+ </VerticalStackLayout>
+</ContentPage>
+```
+
+This example creates a `VerticalStackLayout` containing `Label` and `Rectangle` objects. By default, there is no space between the child views:
+
+:::image type="content" source="media/verticalstacklayout/basic.png" alt-text="VerticalStackLayout displaying different child views screenshot.":::
+
+> [!NOTE]
+> The value of the `Margin` property represents the distance between an element and its adjacent elements. <!--For more information, see [Margin and Padding](margin-and-padding.md).-->
+
+## Space between child views
+
+The spacing between child views in a `VerticalStackLayout` can be changed by setting the `Spacing` property to a `double` value:
+
+```xaml
+<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+ xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+ x:Class="StackLayoutDemos.Views.VerticalStackLayoutPage">
+ <VerticalStackLayout Margin="20"
+ Spacing="10">
+ <Label Text="Primary colors" />
+ <Rectangle Fill="Red"
+ HeightRequest="30"
+ WidthRequest="300" />
+ <Rectangle Fill="Yellow"
+ HeightRequest="30"
+ WidthRequest="300" />
+ <Rectangle Fill="Blue"
+ HeightRequest="30"
+ WidthRequest="300" />
+ <Label Text="Secondary colors" />
+ <Rectangle Fill="Green"
+ HeightRequest="30"
+ WidthRequest="300" />
+ <Rectangle Fill="Orange"
+ HeightRequest="30"
+ WidthRequest="300" />
+ <Rectangle Fill="Purple"
+ HeightRequest="30"
+ WidthRequest="300" />
+ </VerticalStackLayout>
+</ContentPage>
+```
+
+This example creates a `VerticalStackLayout` containing `Label` and `Rectangle` objects that have ten device-independent units of space between the child views:
+
+:::image type="content" source="media/verticalstacklayout/spacing.png" alt-text="VerticalStackLayout displaying different child views with spacing screenshot.":::
+
+> [!TIP]
+> The `Spacing` property can be set to negative values to make child views overlap.
+
+## Position and size child views
+
+The size and position of child views within a `VerticalStackLayout` depends upon the values of the child views' `HeightRequest` and `WidthRequest` properties, and the values of their `HorizontalOptions` properties. In a `VerticalStackLayout`, child views expand to fill the available width when their size isn't explicitly set.
+
+The `HorizontalOptions` properties of a `VerticalStackLayout`, and its child views, can be set to fields from the `LayoutOptions` struct, which encapsulates an *alignment* layout preference. This layout preference determines the position and size of a child view within its parent layout.
+
+> [!TIP]
+> Don't set the `HorizontalOptions` property of a `VerticalStackLayout` unless you need to. The default value of `LayoutOptions.Fill` allows for the best layout optimization. Changing this property has a cost and consumes memory, even when setting it back to its default value.
+
+The following XAML example sets alignment preferences on each child view in the `VerticalStackLayout`:
+
+```xaml
+<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+ xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+ StackLayoutDemos.Views.VerticalStackLayoutPage>
+ <VerticalStackLayout Margin="20"
+ Spacing="6">
+ <Label Text="Start"
+ BackgroundColor="Gray"
+ HorizontalOptions="Start" />
+ <Label Text="Center"
+ BackgroundColor="Gray"
+ HorizontalOptions="Center" />
+ <Label Text="End"
+ BackgroundColor="Gray"
+ HorizontalOptions="End" />
+ <Label Text="Fill"
+ BackgroundColor="Gray"
+ HorizontalOptions="Fill" />
+ </VerticalStackLayout>
+</ContentPage>
+```
+
+In this example, alignment preferences are set on the `Label` objects to control their position within the `VerticalStackLayout`. The `Start`, `Center`, `End`, and `Fill` fields are used to define the alignment of the `Label` objects within the parent `VerticalStackLayout`:
+
+:::image type="content" source="media/verticalstacklayout/alignment.png" alt-text="VerticalStackLayout displaying aligned child views screenshot.":::
+
+A `VerticalStackLayout` only respects the alignment preferences on child views that are in the opposite direction to the orientation of the layout. Therefore, the `Label` child views within the `VerticalStackLayout` set their `HorizontalOptions` properties to one of the alignment fields:
+
+- `Start`, which positions the `Label` on the left-hand side of the `VerticalStackLayout`.
+- `Center`, which centers the `Label` in the `VerticalStackLayout`.
+- `End`, which positions the `Label` on the right-hand side of the `VerticalStackLayout`.
+- `Fill`, which ensures that the `Label` fills the width of the `VerticalStackLayout`.
+
+<!--
+For more information about alignment, see [Layout Options in .NET MAUI](layout-options.md).
+-->
+
+## Nest VerticalStackLayout objects
+
+A `VerticalStackLayout` can be used as a parent layout that contains other nested child layouts.
+
+The following XAML shows an example of nesting `HorizontalStackLayout` objects in a `VerticalStackLayout`:
+
+```xaml
+<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
+ xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+ x:Class="StackLayoutDemos.Views.VerticalStackLayoutPage">
+ <VerticalStackLayout Margin="20"
+ Spacing="6">
+ <Label Text="Primary colors" />
+ <Frame BorderColor="Black"
+ Padding="5">
+ <HorizontalStackLayout Spacing="15">
+ <Rectangle Fill="Red"
+ HeightRequest="30"
+ WidthRequest="30" />
+ <Label Text="Red"
+ FontSize="Large" />
+ </HorizontalStackLayout>
+ </Frame>
+ <Frame BorderColor="Black"
+ Padding="5">
+ <HorizontalStackLayout Spacing="15">
+ <Rectangle Fill="Yellow"
+ HeightRequest="30"
+ WidthRequest="30" />
+ <Label Text="Yellow"
+ FontSize="Large" />
+ </HorizontalStackLayout>
+ </Frame>
+ <Frame BorderColor="Black"
+ Padding="5">
+ <HorizontalStackLayout Spacing="15">
+ <Rectangle Fill="Blue"
+ HeightRequest="30"
+ WidthRequest="30" />
+ <Label Text="Blue"
+ FontSize="Large" />
+ </HorizontalStackLayout>
+ </Frame>
+ </VerticalStackLayout>
+</ContentPage>
+```
+
+In this example, the parent `VerticalStackLayout` contains nested `HorizontalStackLayout` objects inside `Frame` objects:
+
+:::image type="content" source="media/verticalstacklayout/nested.png" alt-text="VerticalStackLayout displaying nested HorizontalStackLayout objects screenshot.":::
+
+> [!IMPORTANT]
+> The deeper you nest layout objects, the more the nested layouts will impact performance. <!--For more information, see [Choose the correct layout](~/xamarin-forms/deploy-test/performance.md#choose-the-correct-layout). -->