첨부 실행 코드는 나눔고딕코딩 폰트를 사용합니다.

[C#/MAUI] FlexLayout 엘리먼트 : AlignContent 속성을 사용해 여러 줄에 배치된 자식 사이 및 공간 배분하기

C#/MAUI 2022. 6. 26. 17:30
728x90
반응형
728x170

TestProject.zip
0.15MB

▶ MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <ScrollView
        Margin="10"
        Orientation="Vertical">
        <StackLayout Spacing="10">
            <Label
                HorizontalOptions="Start"
                Text="AlignContent 속성 : Start" />
            <Frame
                Margin="0,10,0,0"
                HeightRequest="200"
                CornerRadius="0"
                BorderColor="Black"
                Padding="2,2,2,2">
                <FlexLayout
                    Direction="Column"
                    Wrap="Wrap"
                    AlignContent="Start">
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Magenta" />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Magenta" />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Magenta" />
                </FlexLayout>
            </Frame>
            <Label
                HorizontalOptions="Start"
                Margin="0,10,0,0"
                Text="AlignContent 속성 : Center" />
            <Frame
                Margin="0,10,0,0"
                HeightRequest="200"
                CornerRadius="0"
                BorderColor="Black"
                Padding="2,2,2,2">
                <FlexLayout
                    Direction="Column"
                    Wrap="Wrap"
                    AlignContent="Center">
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Magenta" />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Magenta" />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Magenta" />
                </FlexLayout>
            </Frame>
            <Label
                HorizontalOptions="Start"
                Margin="0,10,0,0"
                Text="AlignContent 속성 : End" />
            <Frame
                Margin="0,10,0,0"
                HeightRequest="200"
                CornerRadius="0"
                BorderColor="Black"
                Padding="2,2,2,2">
                <FlexLayout
                    Direction="Column"
                    Wrap="Wrap"
                    AlignContent="End">
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Magenta" />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Magenta" />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Magenta" />
                </FlexLayout>
            </Frame>
            <Label
                HorizontalOptions="Start"
                Margin="0,10,0,0"
                Text="AlignContent 속성 : SpaceAround" />
            <Frame
                Margin="0,10,0,0"
                HeightRequest="200"
                CornerRadius="0"
                BorderColor="Black"
                Padding="2,2,2,2">
                <FlexLayout
                    Direction="Column"
                    Wrap="Wrap"
                    AlignContent="SpaceAround">
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Magenta" />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Magenta" />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Magenta" />
                </FlexLayout>
            </Frame>
            <Label
                HorizontalOptions="Start"
                Margin="0,10,0,0"
                Text="AlignContent 속성 : SpaceBetween" />
            <Frame
                Margin="0,10,0,0"
                HeightRequest="200"
                CornerRadius="0"
                BorderColor="Black"
                Padding="2,2,2,2">
                <FlexLayout
                    Direction="Column"
                    Wrap="Wrap"
                    AlignContent="SpaceBetween">
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Magenta" />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Magenta" />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Magenta" />
                </FlexLayout>
            </Frame>
            <Label
                HorizontalOptions="Start"
                Margin="0,10,0,0"
                Text="JustifyContent 속성 : SpaceEvenly" />
            <Frame
                Margin="0,10,0,0"
                HeightRequest="200"
                CornerRadius="0"
                BorderColor="Black"
                Padding="2,2,2,2">
                <FlexLayout
                    Direction="Column"
                    Wrap="Wrap"
                    AlignContent="SpaceEvenly">
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Magenta" />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Magenta" />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Red"     />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Green"   />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Blue"    />
                    <BoxView Margin="1" WidthRequest="20" HeightRequest="20" Color="Magenta" />
                </FlexLayout>
            </Frame>
        </StackLayout>
    </ScrollView>
</ContentPage>
728x90
반응형
그리드형(광고전용)

'C# > MAUI' 카테고리의 다른 글

[C#/MAUI] ContentPage 클래스 : Navigation 속성을 사용해 모달 페이지 이동하기  (0) 2022.06.27
[C#/MAUI] FlexLayout 엘리먼트 : Shrink 첨부 속성 사용하기 (프리뷰 버전 오류)  (0) 2022.06.27
[C#/MAUI] FlexLayout 엘리먼트 : Grow 첨부 속성을 사용해 자식의 사용 가능 공간 크기 설정하기  (0) 2022.06.26
[C#/MAUI] FlexLayout 엘리먼트 : Basis 첨부 속성을 사용해 개별 자식의 초기 기본 축 기준 공간 크기 설정하기  (0) 2022.06.26
[C#/MAUI] FlexLayout 엘리먼트 : AlignSelf 첨부 속성을 사용해 교차 축을 따라 특정 자식에 대한 자식 사이와 주위 공간 배분하기  (0) 2022.06.26
[C#/MAUI] FlexLayout 엘리먼트 : AlignContent 속성을 사용해 여러 줄에 배치된 자식 사이 및 공간 배분하기  (0) 2022.06.26
[C#/MAUI] FlexLayout 엘리먼트 : JustifyContent 속성을 사용해 기본 축을 따라 자식 사이 및 주위 공간 배분하기  (0) 2022.06.26
[C#/MAUI] FlexLayout 엘리먼트 : AlignItems 속성을 사용해 교차 축을 따라 자식 사이 및 주위 공간 배분하기  (0) 2022.06.26
[C#/MAUI] FlexLayout 엘리먼트 : Wrap 속성을 사용해 자식을 여러 줄로 배치하기  (0) 2022.06.26
[C#/MAUI] Easing 클래스 : 사용자 정의 이징(Easing) 함수 사용하기  (0) 2022.06.25
[C#/MAUI] Trigger 엘리먼트 사용하기  (0) 2022.06.23
Posted by icodebroker
TAG , , , , ,
트랙백 0개, 댓글 0개가 달렸습니다.

댓글을 달아 주세요

◀ 이전페이지 1 ··· 415 416 417 418 419 420 421 422 423 ··· 12082 다음페이지 ▶

티스토리툴바