XAML 기본

이전 챕터에서 XAML이 무엇인지, 왜 XAML을 사용하는지 알아보았습니다. 그럼 XAML의 컨트롤은 어떻게 생성할까요? 다음의 예제에서는 XAML에서 컨트롤을 생성하는 것이 얼마나 쉬운 지 확인할 수 있습니다. 단지 꺾쇠괄호 안에 컨트롤의 이름을 적기만 하면 됩니다. 예를 들어, 버튼은 다음과 같이 생성합니다 :

<Button>

XAML 태그들은 끝맺음 태그를 쓰거나 시작 태그에 슬래시를 써서 닫아야 합니다 :

<Button></Button>

또는

<Button />

수 많은 컨트롤들의 시작 태그와 끝맺음 태그 사이에는 속 내용을 넣을 수 있습니다. 이렇게 넣은 속 내용은 컨트롤의 내용이 됩니다. 예를 들어, 버튼 컨트롤은 시작 태그와 끝맺음 태그 사이에 텍스트 내용을 정의할 수 있습니다 :

<Button>A button</Button>

HTML은 대소문자를 구분하지 않습니다. 하지만 XAML은 다릅니다. 컨트롤의 이름이 .NET 프레임워크의 타입과 연관되어 있어야 하기 때문입니다. 따라서 XAML에서는 컨트롤의 속성들과 연관이 있습니다. 다음은 몇 가지 속성이 정의된 버튼입니다. 속성들은 태그에 추가되어 있습니다 :

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

우리는 FontWeight 속성을 두꺼운 텍스트로 세팅했습니다. Content 속성도 세팅했습니다. 이는 시작 태그와 끝맺음 태그 사이에 텍스트를 써서 세팅하는 방법과 동일합니다. 하지만 컨트롤에 정의된 모든 속성은다음과 같이 메인 컨트롤의 하위 태그를 이용해서 세팅할 수도 있습니다. Control-Dot-Property 표기법을 이용합니다 :

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

결과물은 위와 완벽하게 동일합니다. 이는 단지 문법의 차이일 뿐입니다. 하지만 많은 컨트롤들이 단순한 텍스트 외 다양한 내용들을 포함하고 있습니다. 그 예로 다른 컨트롤을 포함할 수 있습니다. 다음의 예제에서 우리는 하나의 버튼에 다른 색상의 텍스트들을 세팅할 것입니다. 버튼 안에 여러 개의 TextBlock 컨트롤을 사용합니다 :

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

Content 속성은 하나의 하위 요소를 가집니다. 우리는 WrapPanel을 사용했습니다. WrapPanel은 다양한 색상의 텍스트 형태 블록을 포함합니다. WrapPanel은 WPF에서 중요한 역할을 합니다. 우리는 다음에 더욱 자세하게 살펴볼 것입니다. 지금은 단지 다른 컨트롤들을 담는 컨테이너로 생각하면 됩니다.

다음의 markup은 완벽하게 동일한 결과를 보여줍니다. 단지 같은 내용을 작성하는 다른 방법일 뿐 입니다 :

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

Code와 XAML

위의 예제들은 XAML을 작성하는 게 매우 쉽고 다양한 방법이 존재한다는 것을 보여줍니다. 다른 색상의 텍스트로 이루어진 버튼을 만드는 위의 예제에 많은 markup이 있다고 생각한다면, 동일한 내용을 C#으로 작성할 때와 비교해봅시다 :

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

물론 위의 예제는 덜 명쾌하게 쓰여졌을 수도 있습니다. syntactical sugar(더욱 간결하고 명확하게 표현이 가능한 문법)를 이용해서 개선할 수도 있습니다. 하지만 다음의 사실은 여전히 유효합니다 : XAML은 매우 짧고 간단하게 인터페이스를 표현합니다.