XAML 태그와 속성 사용법

XAML 태그와 속성 사용법

XAML(Extensible Application Markup Language)은 UI(User Interface)를 구성하는 데 사용되는 XML 기반의 마크업 언어입니다. XAML은 태그와 속성을 사용하여 UI 요소의 모양, 배치, 동작 등을 정의합니다.

XAML 태그

역할

• XAML 태그는 UI 요소를 나타냅니다. 예를 들어, Button 태그는 버튼을, TextBlock 태그는 텍스트 블록을 나타냅니다.

종류

• XAML 태그는 UI 요소의 종류에 따라 다양하게 존재합니다.
  - 컨트롤(Controls) : Button, TextBox, Label, ComboBox 등 사용자와 상호작용하는 요소
  - 레이아웃(Layout) : Grid, StackPanel, DockPanel 등 UI 요소를 배치하는 요소
  - 그래픽(Graphics) : Rectangle, Ellipse, Line 등 도형을 그리는 요소

사용법

• XAML 태그는 XML과 마찬가지로 여는 태그(<태그이름>)와 닫는 태그(</태그이름>)로 구성됩니다. 태그 사이에 다른 태그나 콘텐츠를 포함하여 UI 요소를 계층적으로 구성할 수 있습니다.

<Button>버튼</Button>

XAML 속성

역할

• XAML 속성은 UI 요소의 모양, 크기, 위치, 내용 등을 설정합니다. 예를 들어, Button 태그의 Content 속성은 버튼에 표시되는 텍스트를 설정하고, Width 속성은 버튼의 너비를 설정합니다.

종류

• XAML 속성은 UI 요소의 종류에 따라 다양하게 존재합니다. 아내 속성은 자주 대부분 가지고 있는 속성입니다.
  - Content : Button, Label 등의 텍스트 내용
  - Width, Height : UI 요소의 크기
  - Background, Foreground : UI 요소의 배경색과 글자색
  - Margin, Padding : UI 요소의 여백

사용법

• XAML 속성은 태그의 시작 태그 안에 속성명="값" 형태로 작성합니다. 여러 개의 속성을 공백으로 구분하여 함께 작성할 수 있습니다.

<Button Content="버튼" Width="100" Height="50"/>

 

XAML 태그와 속성 사용 예시

<Window x:Class="MyWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="My Window" Height="350" Width="525">
    <Grid>
        <Button Content="버튼" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Grid>
</Window>

※ 위 예시는 Window, Grid, Button 태그와 Title, Content, HorizontalAlignment, VerticalAlignment 속성을 사용하여 간단한 UI를 구성하는 XAML 코드입니다.