VerticalStackLayout

  • 아티클

.NET 다중 플랫폼 앱 UI(.NET MAUI) VerticalStackLayout 는 자식 보기를 1차원 세로 스택으로 구성하며, 보다 성능이 좋은 대안 StackLayout입니다. 또한 다른 VerticalStackLayout 자식 레이아웃을 포함하는 부모 레이아웃으로 사용할 수 있습니다.

다음 VerticalStackLayout 속성을 정의합니다.

  • Spacing형식 double의 각 자식 뷰 사이의 간격을 나타냅니다. 이 속성의 기본값은 0입니다.

이 속성은 개체에 BindableProperty 의해 지원되므로 데이터 바인딩의 대상이 될 수 있으며 스타일이 지정될 수 있습니다.

다음 XAML은 다른 자식 뷰를 VerticalStackLayout 포함하는 항목을 만드는 방법을 보여 줍니다.

<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>

이 예제에서는 VerticalStackLayout 포함 및 Rectangle 개체를 Label 만듭니다. 기본적으로 자식 보기 사이에는 공백이 없습니다.

VerticalStackLayout displaying different child views screenshot.

참고 항목

속성 값 Margin 은 요소와 인접한 요소 사이의 거리를 나타냅니다. 자세한 내용은 위치 컨트롤을 참조 하세요.

자식 보기 사이의 공간

속성을 double 값으로 설정하여 자 VerticalStackLayout 식 보기 간의 간격을 Spacing 변경할 수 있습니다.

<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>

이 예제에서는 자식 보기 사이에 10개의 디바이스 독립적 공간 단위가 있는 포함 LabelRectangle 및 개체를 만듭니다VerticalStackLayout.

VerticalStackLayout displaying different child views with spacing screenshot.

팁

자식 보기가 Spacing 겹치도록 속성을 음수 값으로 설정할 수 있습니다.

자식 보기의 위치 및 크기 조정

자식 보기의 VerticalStackLayout 크기와 위치는 자식 뷰 HeightRequest 및 속성의 값과 WidthRequest 해당 속성의 HorizontalOptions 값에 따라 달라집니다. 자 VerticalStackLayout식 보기에서 자식 보기는 크기가 명시적으로 설정되지 않은 경우 사용 가능한 너비를 채우도록 확장됩니다.

및 해당 자식 뷰의 VerticalStackLayout속성은 HorizontalOptions 맞춤 레이아웃 기본 설정을 캡슐화하는 구조체의 LayoutOptions 필드로 설정할 수 있습니다. 이 레이아웃 기본 설정은 부모 레이아웃 내에서 자식 보기의 위치와 크기를 결정합니다.

팁

필요한 경우가 아니면 해당 속성을 VerticalStackLayout 설정 HorizontalOptions 하지 마세요. 기본값은 LayoutOptions.Fill 최상의 레이아웃 최적화를 허용합니다. 이 속성을 변경하면 기본값으로 다시 설정하는 경우에도 비용이 들고 메모리를 사용합니다.

다음 XAML 예제에서는 다음의 각 자식 뷰 VerticalStackLayout에 맞춤 기본 설정을 지정합니다.

<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="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>

이 예제에서는 개체에 맞춤 기본 설정이 Label 설정되어 개체 내에서 VerticalStackLayout위치를 제어합니다. , , 및 필드는 부모 VerticalStackLayout내에서 개체의 맞춤을 Label 정의하는 데 사용됩니다.FillEndCenterStart

VerticalStackLayout displaying aligned child views screenshot.

A VerticalStackLayout 는 레이아웃 방향과 반대 방향인 자식 보기에 대한 맞춤 기본 설정만을 따릅니다. 따라서 집합 내의 Label 자식 뷰는 VerticalStackLayout 해당 HorizontalOptions 속성을 맞춤 필드 중 하나로 설정합니다.

Nest VerticalStackLayout 개체

A는 VerticalStackLayout 다른 중첩된 자식 레이아웃을 포함하는 부모 레이아웃으로 사용할 수 있습니다.

다음 XAML은 다음의 개체 중첩 HorizontalStackLayout 예제를 보여 있습니다.VerticalStackLayout

<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="18" />
           </HorizontalStackLayout>
       </Frame>
       <Frame BorderColor="Black"
              Padding="5">
           <HorizontalStackLayout Spacing="15">
               <Rectangle Fill="Yellow"
                          HeightRequest="30"
                          WidthRequest="30" />
               <Label Text="Yellow"
                      FontSize="18" />
           </HorizontalStackLayout>
       </Frame>
       <Frame BorderColor="Black"
              Padding="5">
           <HorizontalStackLayout Spacing="15">
               <Rectangle Fill="Blue"
                          HeightRequest="30"
                          WidthRequest="30" />
               <Label Text="Blue"
                      FontSize="18" />
           </HorizontalStackLayout>
       </Frame>
    </VerticalStackLayout>
</ContentPage>

이 예제에서 부모는 VerticalStackLayout 개체 내부에 Frame 중첩된 개체를 HorizontalStackLayout 포함합니다.

VerticalStackLayout displaying nested HorizontalStackLayout objects screenshot.

Important

레이아웃 개체를 중첩할수록 더 많은 레이아웃 계산이 수행되므로 성능에 영향을 줄 수 있습니다. 자세한 내용은 올바른 레이아웃 선택을 참조 하세요.