3.1 XAML 개요

 

01. XAML개요

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

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

 

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

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

 

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

 

02. Control(컨트롤)이란?

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

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

 

03. XAML 에서 컨트롤 생성

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

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

<Button>

 

 

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

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

<Button> </Button>

 

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

<Button/>

 

04. XAML 에서 컨트롤 응용

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

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

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

 

05. XAML 에서 컨트롤 속성

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>

 

06. XAML과 C++ Source Code를 사용한 UI 구현 비교

위 XAML 태그를 이용한 구현 작업을, 아래 C++ 소스코드로 구현했습니다.

C# WPF 에서도 동일한 방식으로 컨트롤을 추가할 수 있습니다.

XAML로 구현할때와 비교하여 어떤 코드가 더 개발자에게 효율적이고 생산적일지 생각해봅니다. 

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