XAML 의 문법구조

XAML 의 문법구조

(이런것까지 쓰게될 줄은 몰랐어)

시작하는 글

c#, java 또는 html, xml 을 접하던 분들이 처음 xaml 을 보게되면 다소 헷갈리거나 이해가 가지 않는 부분이 있습니다. 정확히 기억은 나지 않지만, 저의 경우 property 와 ContentPresenter 때문에 고생(?)을 했던 것 같네요.

무엇을 배우든 기초가 튼튼하면, 이후 배움에 문제가 없다고 생각합니다. 하여, 이번시간에는 xaml 을 문법(syntax)구조에 대해서 간략히 알아보도록 하겠습니다.

xaml 의 구조

매우 간단한 xaml 코드를 작성해 보려 합니다. 내용(content)가 Hello, World! 인 버튼을 하나 만들어 보도록 하겠습니다.

<Button>Hello, World!</Button>

이렇게 되겠습니다.

그런데 방법이 하나일까요? 아래 나오는 코드들 모두 결과적으로 같은 코드입니다.

<Button Content="Hello, World!"></Button>

<Button>

    <Button.Content>

            Hello, World

    </Button.Content>

</Button>

<Button>

    <Button.Content>

        <TextBlock>Hello, World</TextBlock>

    </Button.Content>

</Button>

위 코드들은 비록 xaml 표현 방식은 달라도, 완벽히 같은 코드입니다.

실제 실행시킨 프로그램의 최종 구조(?)를 볼 수 있는 Snoop 이라는 툴이 있습니다. 이것으로 위 3개의 코드를 실행한 것을 살펴보면 모두 아래처럼 보입니다.

중간에 보시면 아시겠지만, ContentPresenter 라는게 보일 것입니다. 말 그대로 Content 를 보이게 하는 역할을 하는 클래스인데, 이 부분은 추후에 따로 설명 드리도록 하겠습니다.

아무튼 다시 돌아와서, xaml 구조를 살펴보도록 하지요.

3가지 모두 같은 것인데, 왜 코드 표현이 저렇게 다를까요? 이유는 간단합니다. 첫번째 코드는 축약형이라고 생각하시면 됩니다. 두번째 코드는 이를 풀어서 쓴 것이지요.

버튼안에 동그라미(Ellipse)를 넣어 아래와 같은 버튼을 만들어 보도록 하겠습니다.

Button 의 Content 에 Ellipse 를 넣어야 합니다. Ellipse 의 속성으로는 Width, Height 를 50으로 주었습니다. 그리고 Fill 은 Red 로 주었습니다.

첫번째 방식으로 표현하려면 어떻게 해야 할까요?

<Button>

    <Ellipse Width="50" Height="50" Fill="Red"></Ellipse>

</Button>

이렇게 되겠습니다. 다른 방법들로 표현해 볼까요?

<Button Content="<Ellipse Width="50" Height="50" Fill="Red"></Ellipse>"></Button>

가능할까요? 결론부터 말씀드리자면 불가능합니다. 이유는 html 로 이야기하자면, tag 안에 속성(attribute)로 tag 가 들어갈 수 없습니다. 그럼 이런경우 어떻게 해야 할까요? 처음 코드처럼 풀어서 써야 합니다. 전체를 풀어서 쓰면 아래처럼 되겠네요.

<Button>

    <Button.Content>

        <Ellipse>

            <Ellipse.Width>50</Ellipse.Width>

            <Ellipse.Height>50</Ellipse.Height>

            <Ellipse.Fill>

                <SolidColorBrush>Red</SolidColorBrush>

            </Ellipse.Fill>

        </Ellipse>

    </Button.Content>

</Button>

xaml 표현 규칙에 어느정도 감이 오시는지요? 대부분의 경우, 특정 Element 안에 Element 가 들어간 것은, 사실 ContentPresenter 라는 녀석이 생략된 것입니다. 자동으로 들어가는데 생략 가능하다고 생각하시면 될 것 같습니다.

그리고 Property 의 value를 값으로 간략히 표현 가능한 경우는, 한줄로 쓸 수 있으며, 이렇게 쓰기 힘든 경우는 풀어서 쓰면 됩니다.