05. XAML 개요

01. XAML개요

XAML(자믈)이란, eXtensible Application Markup Language, 확장 가능한 응용 프로그램 마크업 언어의 약자입니다. Microsoft 에서 UI를 정의하기 위해 XML을 기반으로 만든 언어입니다.

주로 사용자 인터페이스의 요소, 데이터 바인딩, 이벤트 등의 기능을 정의하는데 사용됩니다.

 

WPF은 XAML 파일과 C# 파일이 한 쌍을 이룹니다.

XAML 파일에서는 UI를, C# 파일에서는 로직을 구현합니다.

 

XAML을 사용하여 UI를 구현하기 위해서, 가장 먼저 XAML을 사용하는 방법을 알아봅시다. 

 

 

 

01.1 용어 - Control(컨트롤)

 

C++ Qt 디자이너 툴에서는 Widget(위젯)이라는 용어로 UI 를 다루었습니다.

C# WPF에서는 Control(컨트롤)이라는 용어를 사용합니다.

 

 

01.2 XAML 에서 컨트롤 생성

 

1. XAML 에서 UI 컨트롤을 정의하는 방법은, < > "꺽쇠 괄호 기호" 한 쌍 안에 원하는 컨트롤 이름을 넣으면 됩니다.

예를 들어 버튼은 다음과 같이 생성합니다. 이를 버튼 태그(Tag)라고 합니다.

<Button>

 

 

2.  XAML 컨트롤 태그는 "시작 태그"와, "끝맺음 태그"를 한쌍으로 사용합니다.

끝맺음 태그는 시작 태그와 달리 컨트롤 이름 앞에 /(슬래시)를 추가하여 구분합니다.

<Button> </Button>

 

또는, 시작 태그 끝에 /(슬래시)를 추가하여 하나의 태그로 끝맺음 태그 없이 선언할 수 있습니다.

<Button/>

 

 

3. XAML 태그는 시작 태그와 끝맺음 태그 사이에 다른 컨트롤 태그를 추가할 수 있습니다.

아래 코드는 <Grid> 태그 사이에 <Label>, <Button> 태그가 추가된 형태 입니다. 

<Grid>
    <Label/>
    <Button><Button/>
    <Button><Button/>
</Grid>

 

 

4. XAML 태그를 이용하면, WPF 컨트롤을 정의 할 수 있습니다.

XAML  태그 안에 해당 컨트롤의 속성을 정의할 수 있습니다.

<Button FontWeight="Bold" Content="A button" />

 

또는  XAML 태그는 시작 태그와 끝맺음 태그 사이에 해당 컨트롤의 속성을 

컨트롤에 정의된 모든 속성은 다음과 같이 메인 컨트롤의 하위 태그를 이용해서 세팅할 수도 있습니다.

Control-Dot-Property 표기법을 이용합니다. 결과물은 동일합니다. 문법의 차이만 있습니다.

<Button>
    <Button.FontWeight>Bold</Button.FontWeight>
    <Button.Content>A button</Button.Content>
</Button>

 

<추가 예시 - 결과는 동일합니다.>

<Button>
    <Button.FontWeight>Bold</Button.FontWeight>
    <Button.Content>
        <WrapPanel>
            <TextBlock Foreground="Blue">Multi</TextBlock>
            <TextBlock Foreground="Red">Color</TextBlock>
            <TextBlock>Button</TextBlock>
        </WrapPanel>
    </Button.Content>
</Button>

<Button FontWeight="Bold">
    <WrapPanel>
        <TextBlock Foreground="Blue">Multi</TextBlock>
        <TextBlock Foreground="Red">Color</TextBlock>
        <TextBlock>Button</TextBlock>
    </WrapPanel>
</Button>

 

 

5. XAML과 Source Code를 사용한 UI 구현 비교

 

아래 코드는 위에서 XAML 태그를 이용하여 구현한 WPF 컨트롤과 동일한 작업을 Source Code 로 구현한 형태입니다.

비교하여 어떤 코드가 더 개발자에게 효율적일지 비교해합니다. 

Button btn = new Button();
btn.FontWeight = FontWeights.Bold;

WrapPanel pnl = new WrapPanel();

TextBlock txt = new TextBlock();
txt.Text = "Multi";
txt.Foreground = Brushes.Blue;
pnl.Children.Add(txt);

txt = new TextBlock();
txt.Text = "Color";
txt.Foreground = Brushes.Red;
pnl.Children.Add(txt);

txt = new TextBlock();
txt.Text = "Button";
pnl.Children.Add(txt);

btn.Content = pnl;
pnlMain.Children.Add(btn);