XAML-컨트롤 생성

XAML은 eXtensible Application Markup Language의 약자.
GUI를 묘사하기 위한 Microsoft XML의 한 형태이다. Winforms를 비롯한 이전의 GUI 프레임워크에서는 GUI를 생성하기 위해 GUI와 상호작용하는 언어인 C#, VB.NET 등을 사용한다. 그리고 대게 디자이너가 관리하였다(e.g. Visual Studio). 하지만 XAML을 통해서, Microsoft는 다른 방식을 선택한다. HTML처럼 간단하게 GUI를 생성하고 편집할 수 있다.

XAML은 UI디자이너가 wysiwyg 에디터에서 사용하도록 고안된 것 으로 웹으로 비유하면 프론트엔드(front-end)라고 할 수 있다. 프론트엔드라는 position이 생긴 역사가 짧기 때문에 UI디자이너라는 용어가 맞지는 않을 수도 있지만, 어쨋든 최종사용자가 사용하는 UI를 담당하는 거니까 전통적인 프로그램과는 차이가 있다.

윈도우 또는 페이지를 생성함과 동시에 이를 구성하는 XAML과 CodeBehind 파일이 생성된다. XAML 파일은 XAML이 가진 요소들로 인터페이스를 묘사한다. 반면에 CodeBehind 파일은 모든 발생하는 모든 이벤트들을 다루면서 XAML 컨트롤 조작에 접근한다.

---

xaml 컨트롤 생성법

꺾쇠괄호 안에 컨트롤의 이름을 적기만 하면 된다. 예를 들어, 버튼은 다음과 같이 생성한다.

<Button>

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

<Button></Button>

또는

<Button />

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

<Button>A button</Button>

HTML은 대소문자를 구분하지 않지만 XMAL은 대소문자를 구분한다. 컨트롤 이름이 .NET 프레임워크 타입과 연관 되어 있어야 하기 때문이다. 그래서 XAML에서의 컨트롤의 속성들과 연관이 있다.

속성이 정의된 버튼의 코드

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

FontWeight 속성은 두껍게, Contents 속성도 셋팅하였다. 이는 시작 태그와 끝맺음 태그 사이에 텍스트를 써서 셋팅하는 것과 같다. 하지만 컨트롤에 정의된 모든 속성은 밑의 메인 컨트롤의 하위 태그를 이용하여 세팅할 수 있다.

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은 WPF에서 중요한 역할을 한다. 간단하게 다른 컨트롤을 담는 컨테이너로 생각하면 된다.
위의 코드와 동일한 결과값을 내는 코드이다

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

(참고 https://digiconfactory.tistory.com/entry/%EB%8B%B7%EB%84%B7WPF-%EA%B0%9C%EC%9A%94, https://wpf-tutorial.com/ko/6/xaml/xaml-%EA%B8%B0%EB%B3%B8/)