Xamarin.Forms 및 Tizen.NET 개발

StackLayout 속성 지정 시 유의할 점

1. 수직: StackLayout Orientation="Vertical"

   • Label의 HorizontalOptions: 한 줄의 수평 영역을 모두 가지고 있어 AndExpand 의미 X

   • Label의 VerticalOptions: Expend여야 가로로 움직임 가능
     

2. 수평: StackLayout Orientation="Horizontal"

   • Label의 Horizontaloptions: Expend여야 세로로 움직임 가능

   • Label의 VerticalOptions: 한 줄의 수직 영역을 모두 가지고 있어 AndExpand 의미 X
     

3. Stacklayout에 가로/세로 옵션="Start/Center/End” 있을 때, Label의 가로/세로 옵션이 영향 받는다.

   • 수직: StackLayout Orientation="Vertical" & HorizontalOption="Start/Center/End" 있는 상황
     • Vertical Stack: Fontsize와 글자 수 고려하여 가장 긴 Label이 다른 Label의 가로(Horizontal) 기준
   • 수평: StackLayout Orientation="Horizontal" & VerticalOption="Start/Center/End" 있는 상황
     • Horizontal Stack: Fontsize가 가장 큰 Label이 다른 Label의 세로(Vertical) 기준

     ⇒ Label이 모두 같은 Fontsize이면, Label의 HorizontalOptions에 관계없이 Stacklayout의 Horizontaloptions에 지정된 Start가 적용되는 것처럼 보이게 된다.

     ⇒ Label 하나의 Fontsize가 커지면, 그 안에서 다른 Label의 HorizontalOptions이 적용된다.
     

Label의 Start vs Layout의 Start
- Layout: 그 밑에 나오는 것에 대한 전반적인 Start
- Label: 그 label 자체에 대한 start

---

StackLayout 속성

옵션	종류	설명	추가 설명
Orientation	Vertical (수직), Horizontal (수평)	정렬 방향	기본값: Vertical
VerticalOptions	Center, End, Fill, Start, CenterAndExpand, EndAndExpand, FillAndExpand,StartAndExpand	(세로) 수직 위치 및 크기	기본값: Fill
HorizontalOptions	Center, End, Fill, Start, CenterAndExpand, EndAndExpand, FillAndExpand,StartAndExpand	(가로) 수평 위치 및 크기	기본값: Fill
Spacing (간격)		각 자식 요소 사이의 간격	기본값: 6
Padding (여백)		StackLayout의 내부 콘텐츠가 테두리에서 얼마나 떨어져 있는지
BackgroundColor		요소의 배경색

AndExpand: 가능한 공간 채우도록 영역 확장하되 BackgroundColor는 글자 부분만 채워지는 것
(Fill: 색깔을 채우는 것)

---

Label 속성

옵션	종류	설명	추가 설명
Text		텍스트 내용
TextColor		텍스트 색상
FontSize	숫자, Large, Small, Medium 등	텍스트 글꼴 크기 (글자와 마진까지 합친 size) (50 이면, 글자와 마진까지 합쳐서 50으로 설정됨)	기본값: 30, 보통 사이즈: 100, 큰 사이즈: 200
FontAttributes	None, Bold, Italic	FontAttributes=”Bold, Italic” 여러 개 지정 가능	기본값: None
VerticalOptions	Center, End, Fill, Start, CenterAndExpand, EndAndExpand, FillAndExpand,StartAndExpand	(세로) 요소의 수직 정렬을 설정	기본값: Fill
HorizontalOptions	Center, End, Fill, Start, CenterAndExpand, EndAndExpand, FillAndExpand,StartAndExpand	(가로) 요소의 수평 정렬을 설정	기본값: Fill
VerticalTextAlignment	Start, Center, End	텍스트의 수직 정렬을 설정	기본값: Start
HorizontalTextAlignment	Start, Center, End	텍스트의 수평 정렬을 설정	기본값: Start
LineBreakMode (줄 바꿈 모드)	NoWrap, WordWrap, CharacterWrap, HeadTruncation, MiddleTruncation, TailTruncation	텍스트의 줄 바꿈 방식을 설정	기본값: WordWrap
Rotation (회전)		EX) Rotation=”90” (시계 방향으로 90도 회전)	기본값: 0
IsVisible (가시성)	True, False	False: 렌더링 X	기본값: True
Opacity (불투명도)	1(보임), 0(보이지 않음)	0: 렌더링 O, 투명 O	기본값: 1
HeightRequest		정적으로 세로 크기 설정
WidthRequest		정적으로 가로 크기 설정

HeightRequest/WidthRequest:

• Fill 제외 다른 옵션에서 AndExpand 옵션은 정적 크기를 유지하며 위치가 바뀐다.
• 수평 배열일 때, 수직 배열은 Fill/FillAndExpand 옵션 X, 수평 배열은 FillAndExpand X
• 수직 배열일 때, 수평 배열은 Fill/FillAndExpand 옵션 X 수직 배열은 FillAndExpand X

LineBreakMode (줄 바꿈 모드) 종류 및 설명

LineBreakMode	설명	텍스트가 영역을 넘어가는 경우 표시
NoWrap	텍스트가 영역을 넘어가더라도 줄 바꿈을 하지 않음	텍스트가 잘림
WordWrap	텍스트가 영역을 넘어가는 경우 단어 단위로 줄 바꿈을 수행	텍스트가 영역을 넘어가면 그 다음 단어부터 다음 줄에 표시
CharacterWrap	텍스트가 영역을 넘어가는 경우 문자 단위로 줄 바꿈을 수행	텍스트가 영역을 넘어가면 그 다음 문자부터 다음 줄에 표시
HeadTruncation	텍스트가 영역을 넘어가는 경우 시작 부분에서부터 생략	생략된 부분은 생략 기호(…)로 대체
MiddleTruncation	텍스트가 영역을 넘어가는 경우 중간 부분에서 생략	생략된 부분은 생략 기호(…)로 대체
TailTruncation	텍스트가 영역을 넘어가는 경우 끝 부분에서부터 생략	생략된 부분은 생략 기호(…)로 대체

---

옵션 관련 테스트

1. LineBreakMode

• 수직 배열에서 HorizontalOptions=”Start”로 지정해도 긴 문장 Label은 창 끝날 때까지 계속 길어진다. 대신 Fill 만큼 꽉 채우지는 않고 다음 줄로 향한다.

• 가로/세로 크기 지정하고 싶으면 HeightRequest, WidthRequest 복합 사용하는데 이때 전체 문장 다 나오지 않고 해당 부분만 잘려서 나온다.

• 수직 배열 순서대로

  • LineBreakMode: 옵션 지정 안 함 / NoWrap / WordWrap / CharacterWrap
  • HorizontalOptions: Fill / Fill / Fill / Fill

  

  • LineBreakMode: 옵션 지정 안 함 / NoWrap / WordWrap / CharacterWrap
  • HorizontalOptions: Start / Center / Center / End

  

  • LineBreakMode: HeadTruncation / MiddleTruncation / TailTruncation
  • HorizontalOptions: Fill / Fill / Fill / Fill

  

  • LineBreakMode: HeadTruncation / MiddleTruncation / TailTruncation
  • HorizontalOptions: Start / Center / End

  
  
  

2. LineBreakMode와 HeightRequest, WidthRequest 복합 사용

• WidthRequest="300" HeightRequest="300"로 설정 후 여러 옵션 테스트를 진행했다.

• HorizontalOptions="Start/Center/EndAndExpand"를 해도 정적 크기가 그대로 설정된다.

• HorizontalOptions="fill/fillandexpand"로 설정하니 수평으로는 꽉 채워졌다. 세로는 여전히 정적으로 설정된 크기이다.

    <StackLayout Orientation="Vertical">
        <Label Text="긴 문장" FontSize="100" 
            LineBreakMode="NoWrap" 
            BackgroundColor="Red" 
            WidthRequest="300" HeightRequest="300" 
            HorizontalOptions="Start" />
        <Label Text="긴 문장" FontSize="100" 
            LineBreakMode="WordWrap" 
            BackgroundColor="Yellow" 
            WidthRequest="300" HeightRequest="300" 
            HorizontalOptions="Center" />
        <Label Text="긴 문장" FontSize="100" 
            LineBreakMode="CharacterWrap" 
            BackgroundColor="Green" 
            WidthRequest="300" HeightRequest="300" 
            HorizontalOptions="End" />
    </StackLayout> 
  

  

  
  
  

3. IsVisible (가시성) / Opacity (불투명도)

• IsVisible=“False”

    <StackLayout Orientation="Vertical">
        <Label Text="TEST1" BackgroundColor="Red" 
            IsVisible="True" 
            WidthRequest="100" HeightRequest="100" />
        <Label Text="TEST1" BackgroundColor="Yellow" 
            IsVisible="False"
            WidthRequest="200" HeightRequest="200" />
        <Label Text="TEST1" BackgroundColor="Green" 
            IsVisible="True" 
            WidthRequest="300" HeightRequest="300" />
    </StackLayout>
  

  

• Opacity=“0”

    <StackLayout Orientation="Vertical">
        <Label Text="TEST1" BackgroundColor="Red"    
            Opacity="1" 
            WidthRequest="100" HeightRequest="100" />
        <Label Text="TEST1" BackgroundColor="Yellow" 
            Opacity="0" 
            WidthRequest="200" HeightRequest="200" />
        <Label Text="TEST1" BackgroundColor="Green"  
            Opacity="1" 
            WidthRequest="300" HeightRequest="300" />
    </StackLayout>
  
  

  
  
  

4. Spacing (간격) / Padding (여백)

• Spacing: “50”, Padding = “10”

  

• Spacing: “0”