1. XML vs XAML

XML과 XAML은 이름이 비슷해서 헷갈리기 쉽지만, 엄연히 다른 용도로 사용되는 마크업 언어다.

XML (Extensible Markup Language)은 데이터를 저장하고 전달하기 위한 범용 마크업 언어이다.

• 사용자가 직접 태그를 정의하여 데이터 구조를 만들 수 있다.
• 웹 페이지, 설정 파일, 데이터베이스 등 다양한 분야에서 사용된다.

XAML (Extensible Application Markup Language)은 WPF (Windows Presentation Foundation)에서 UI를 정의하기 위한 마크업 언어이다.

• WPF는 윈도우 애플리케이션의 UI를 구축하기 위한 프레임워크다.
• XAML은 XML 기반으로 만들어졌지만, WPF UI를 정의하기 위한 특수한 요소와 속성을 가지고 있다.

XML과 XAML의 주요 차이점

특징	XML	XAML
목적	데이터 저장 및 전달	WPF UI 정의
용도	범용	WPF 애플리케이션
태그	사용자 정의	WPF 요소
기능	데이터 표현	UI 디자인

XAML 예시

<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="My Window" Height="300" Width="300">
    <Grid>
        <Button Content="Click Me!" />
    </Grid>
</Window>

이 XAML 코드는 Window, Grid, Button과 같은 WPF 요소를 사용하여 윈도우 창과 버튼을 정의한다.

요약

• XML은 데이터를 저장하고 전달하는 데 사용되는 범용 마크업 언어
• XAML은 WPF에서 UI를 정의하는 데 사용되는 마크업 언어
• XAML은 XML 기반으로 만들어졌지만, WPF UI를 정의하기 위한 '특수한 요소'와 '속성'을 가지고 있다.

2. XAML

WPF는 XAML이라는 마크업언어를 사용해서 UI를 작성한다.

XAML은 확장 응용 프로그램 마크업 언어(Extensible Application Markup Language)의 줄임말인데 MS에서 구조값과 객체를 표현하기위해 만들었다. 그냥 클래스의 구조를 표현한다거나 객체를 표현하려고 만든 것이라고 보면 될 것 같다.

XAML은 XML 기반의 마크업 언어이기 때문에, 기본 구조는 XML과 유사하다. XAML 문서는 요소들로 이루어진 트리 구조를 가지며, 각 요소는 시작 태그와 종료 태그로 감싸져 있다.

(1) XAML(Extensible Application Markup Language)은 마크업(태그) 언어다. 웹 페이지의 구조와 디자인을 HTML로 작성하는 것처럼, 윈도우 애플리케이션이나 웹 애플리케이션의 화면을 디자인하는 데 사용되는 언어라고 생각하면 된다.

(2) XAML은 XML 기반의 선언적 언어다. 따라서 UI 요소들을 계층적(트리 구조)으로 정의하고, 각 요소의 속성을 설정하여 UI를 구성한다.

예를 들어, 다음 XAML 코드는 간단한 버튼을 정의한다.

<Button Content="Click Me!" />

이 코드는 Content 속성이 "Click Me!"인 Button 요소를 생성한다.

XAML은 WPF(Windows Presentation Foundation), UWP(Universal Windows Platform), Xamarin.Forms 등 다양한 .NET 프레임워크에서 UI를 정의하는 데 사용된다.

XAML의 장점

• UI 디자인과 코드 분리: XAML을 사용하면 UI 디자인과 코드를 분리하여 개발할 수 있다. 이는 UI 디자이너와 개발자가 독립적으로 작업할 수 있도록 하여 개발 효율성을 높여준다.
• 선언적 프로그래밍: XAML은 선언적 언어이기 때문에, UI를 구성하는 요소들을 직관적으로 정의할 수 있다. 이는 코드의 가독성을 높이고 유지보수를 용이하게 한다.
• 도구 지원: Visual Studio와 같은 IDE는 XAML 편집기를 제공하여 UI를 시각적으로 디자인하고 XAML 코드를 생성할 수 있도록 지원한다.
• 재사용성: XAML 코드는 재사용이 가능하다. 사용자 정의 컨트롤을 XAML로 정의하고, 여러 애플리케이션에서 재사용할 수 있다.

XAML의 주요 기능

• 요소 트리: XAML은 UI 요소들을 계층적으로 구성하여 트리 구조를 형성한다. 각 요소는 부모 요소와 자식 요소를 가질 수 있으며, 이러한 계층 구조를 통해 UI를 체계적으로 구성할 수 있다.
• 속성: XAML 요소는 다양한 속성을 가지고 있으며, 속성을 사용하여 요소의 모양, 크기, 색상, 동작 등을 설정할 수 있다.
• 이벤트: XAML 요소는 이벤트를 발생시킬 수 있으며, 이벤트 핸들러를 사용하여 이벤트에 응답할 수 있다. 예를 들어, 버튼을 클릭했을 때 발생하는 Click 이벤트에 이벤트 핸들러를 연결하여 버튼 클릭 시 특정 동작을 수행하도록 할 수 있다.
• 데이터 바인딩: XAML은 데이터 바인딩을 지원한다. 데이터 바인딩을 사용하면 UI 요소의 속성을 데이터 소스에 연결하여 데이터를 동적으로 표시하고 업데이트할 수 있다.

요약:
XAML은 .NET 프레임워크에서 UI를 정의하는 데 널리 사용되는 마크업 언어이다. XAML을 사용하면 UI 디자인과 코드를 분리하고, 선언적인 방식으로 UI를 구성할 수 있으며, 다양한 도구 지원을 통해 UI 개발을 효율적으로 수행할 수 있다.

---

3. XAML 구문

객체
XAML에서 객체는 요소를 통해 생성된 실체이다.

붕어빵 틀과 붕어빵에 비유할 수 있다. 붕어빵 틀은 클래스이고, 붕어빵은 객체이다. 붕어빵 틀을 사용하여 붕어빵을 만들듯이, XAML 요소를 사용하여 객체를 생성한다. (즉, XAML에서 요소는 C# 코드에서 클래스의 인스턴스를 생성하는 것과 같은 역할을 한다. XAML 코드에서 UI를 구성하는 컨트롤, 레이아웃, 데이터 등 객체를 요소를 사용하여 생성할 수 있다.)

new Car();

<Car />

요소
XAML에서 요소는 객체를 생성하기 위한 명령어이다. <Button> 요소는 버튼 객체를 생성하고, <TextBlock> 요소는 텍스트 블록 객체를 생성한다.

<Window>
  <Grid>
    <Button Content="Click Me!" />
  </Grid>
</Window>

이 코드에서 <Window>, <Grid>, <Button>은 요소이고, 이 요소들에 의해 생성된 Window, Grid, Button 객체는 객체이다.

• Window 객체는 윈도우 창을 나타낸다.
• Grid 객체는 격자 레이아웃을 나타낸다.
• Button 객체는 버튼 컨트롤을 나타낸다.

XAML은 이러한 요소들을 사용하여 UI를 구성한다. 각 요소는 속성을 사용하여 객체의 모양, 크기, 색상, 동작 등을 설정할 수 있다.

예를 들어, <Button Content="Click Me!" />에서 Content 속성은 버튼에 표시될 텍스트를 지정한다.

요약하자면, XAML에서 요소는 객체를 생성하기 위한 명령어이고, 객체는 요소에 의해 생성된 실체이다.

---

속성(프로퍼티)
속성은 객체의 특징을 정의하는 값으로, 요소의 시작 태그 안에 속성 이름-속성 값 쌍으로 지정한다.

XAML에서 프로퍼티는 UI 요소의 외형이나 동작을 제어하는 데 사용되는데,
사람의 키, 몸무게, 머리 색깔과 같은 속성들이 그 사람의 외모를 결정하는 것처럼, XAML 요소의 프로퍼티는 UI 요소의 특징(모양, 크기, 색상, 위치 등)을 결정한다.

예를 들어,

• Width와 Height 프로퍼티는 요소의 크기를 설정한다.
• Background와 Foreground 프로퍼티는 요소의 배경색과 전경색을 설정한다.
• FontSize와 FontFamily 프로퍼티는 텍스트 요소의 글꼴 크기와 글꼴 종류를 설정한다.

XAML에서 프로퍼티를 설정하는 방법은 크게 두 가지가 있다.

1. 속성 구문: 요소의 시작 태그 안에 속성이름="속성값" 형식으로 프로퍼티를 설정하는 방법이다.

   <Button Content="Click Me!" Background="Blue" />

   이 예시에서 <Button>은 객체 요소이고, Content와 Background는 Button 객체의 속성이다.
   Content 속성은 버튼에 표시될 텍스트를 "Click Me!"로 설정하고, Background 속성은 버튼의 배경색을 파란색으로 설정한다.

2. 속성 요소 구문: 속성값이 복잡한 객체일 경우, 속성 요소 구문을 사용하여 프로퍼티를 설정할 수 있다. 속성 요소 구문은 <요소.속성이름> 태그를 사용하여 속성값을 감싼다. 즉, <요소.속성이름> 값 </요소.속성이름> 형태로 속성값을 설정한다.

   <Button>
     <Button.Content>
       <TextBlock Text="Click Me!" />
     </Button.Content>
   </Button>

   이 예시에서는 Button.Content라는 속성 요소를 사용하여, TextBlock 객체를 Content 속성값으로 설정했다.

---

Attribute 구문
XAML에서 Attribute 구문은 요소의 속성을 설정하는 가장 일반적인 방법이다. XML의 속성 구문과 유사하게, 요소의 시작 태그 안에 속성 이름과 값을 지정하여 사용한다.

기본 구조

<요소 이름 속성 이름="속성 값" ... />

예시

<Button Content="Click Me!" Background="Blue" Width="100" />

이 예시에서 Content, Background, Width는 Button 이라는 요소의 속성이다. 각 속성은 '속성 이름'과 '속성 값'으로 구성되며, 등호(=)로 연결된다. 속성 값은 큰따옴표(")로 둘러싸야 한다.

속성 값의 종류

• 기본 값: 문자열, 숫자, 불리언 값 등 기본 데이터 타입을 속성 값으로 사용할 수 있다.
• 열거형 값: 열거형 멤버를 속성 값으로 사용할 수 있다.
• 객체 참조: 다른 XAML 요소를 속성 값으로 사용할 수 있다. 이 경우 속성 요소 구문을 사용한다.

장점

• 간결하고 직관적: 속성을 설정하는 가장 간단하고 직관적인 방법입니다.
• 다양한 속성 설정 가능: 대부분의 속성을 Attribute 구문으로 설정할 수 있습니다.
• XML과 유사: XML에 익숙한 개발자라면 쉽게 이해하고 사용할 수 있습니다.

제약

• 복잡한 객체 설정: 속성 값이 복잡한 객체일 경우, 속성 요소 구문을 사용해야 합니다.
• 코드 재사용: Attribute 구문은 코드 재사용에 적합하지 않습니다.

---

컬렉션 구문

XAML 언어에는 보다 읽기 쉬운 태그를 생성하는 최적화 기능 중 하나로 컬렉션 형식을 제공한다. 특정 속성이 컬렉션 형식을 사용하는 경우 태그에서 해당 속성 값 내에 자식 요소로 선언하는 항목이 컬렉션에 포함되는 것이다.

XAML 요소는 컬렉션 속성을 가질 수 있다. 컬렉션 속성은 여러 개의 자식 요소를 포함할 수 있는 속성이다. 컬렉션 구문은 컬렉션 속성을 태그로 감싸고, 자식 요소를 태그 안에 넣는 방식이다. 특정 속성이 컬렉션 형식을 사용하는 경우, 태그에서 해당 속성 값 내에 자식 요소로 선언하는 항목이 컬렉션에 포함되는 것이다.

<StackPanel>
  <StackPanel.Children>
    <Button Content="Button 1" />
    <Button Content="Button 2" />
    <Button Content="Button 3" />
  </StackPanel.Children>
</StackPanel>

이 예시에서 StackPanel 요소는 Children이라는 컬렉션 속성을 가지고 있으며, 3개의 Button 요소가 Children이라는 컬렉션에 추가된다.

---

컨텐츠 속성

일부 XAML 요소는 컨텐츠 속성이라는 특별한 속성을 가진다. 컨텐츠 속성은 요소의 내용을 나타내는 속성이다. 컨텐츠 속성은 속성 요소 구문을 사용하지 않고, 요소의 시작 태그와 종료 태그 사이에 직접 값을 넣어서 설정할 수 있다. XAML에서 컨텐츠 속성은 코드를 간결하게 만들고 가독성을 높이는 데 도움을 줍니다.

<Button>Click Me!</Button>

이 예시에서 Button 요소의 컨텐츠 속성은 Content이고, "Click Me!"가 Content 속성값으로 설정된다.

Content 속성을 명시적으로 지정하지 않았지만, Button 요소는 암시적으로 Content 속성을 가지고 있다.

따라서 <Button>Click Me!</Button>와 같이 작성하면, "Click Me!" 텍스트가 Button의 Content 속성값으로 설정된다.

<Button Content="Click Me!" /> 와 같이 명시적으로 Content 속성을 지정하는 것과 같은 효과를 갖는다.

---

Text Content

Text Content는 UI 요소에 표시할 텍스트를 말한다. XAML에서는 요소의 시작 태그와 종료 태그 사이에 텍스트를 넣어서 Text Content를 지정할 수 있다.

<TextBlock>Hello, world!</TextBlock> 

이 예시에서 "Hello, world!"는 TextBlock 요소의 Text Content이다.

Text Content는 텍스트뿐만 아니라 다른 XAML 요소를 포함할 수도 있다. 이를 통해 텍스트의 서식을 지정하거나, 이미지 또는 다른 컨트롤을 텍스트와 함께 표시할 수 있다.

<TextBlock>
  This is <Bold>bold</Bold> text.
</TextBlock>

이 예시에서 TextBlock 요소는 "This is bold text."라는 텍스트를 표시하고, "bold" 부분은 굵게 표시된다.

---

Attribute Syntax (Events)

Attribute Syntax는 XAML 요소에 이벤트 핸들러를 연결하는 데 사용된다. 이벤트 핸들러는 특정 이벤트가 발생했을 때 실행될 메서드이다.
예를 들어, 버튼을 클릭했을 때 발생하는 Click 이벤트에 이벤트 핸들러를 연결하여 버튼 클릭 시 특정 동작을 수행하도록 할 수 있다.

Attribute Syntax는 요소의 시작 태그 안에 이벤트 이름과 이벤트 핸들러 이름을 지정하는 방식으로 사용된다.

<Button Content="Click Me!" Click="Button_Click" />

이 예시에서 Click="Button_Click"는 Button 요소의 Click 이벤트에 Button_Click 이벤트 핸들러를 연결한다.

이벤트 핸들러는 코드 비하인드(code-behind) 파일에서 정의해야 한다. 코드 비하인드 파일은 XAML 파일과 연결된 C# 코드 파일이다.

private void Button_Click(object sender, RoutedEventArgs e)
{
    // 버튼 클릭 시 수행할 동작
}

---

XAML 초기 코드 설명

<Window x:Class="RealtimeWebcam.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:RealtimeWebcam"
        mc:Ignorable="d"
        Title="Realtime Webcam" Height="450" Width="800">


    <Grid>
        <Image x:Name="imgDisplay" Stretch="Uniform" />
        
        <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10">
            <Button Content="흑백" Margin="5" Click="GrayscaleButton_Click" />
            <Button Content="블러" Margin="5" Click="BlurButton_Click" />
            <Button Content="색상 반전" Margin="5" Click="InvertButton_Click" />
        </StackPanel>
    </Grid>
</Window>

• x:Class라고 되어있는 부분은 C#의 namespace의 개념.

• "xmlns=" 이렇게 되어있는 부분들은 C#의 using구문.

• "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 이렇게 되어있는 부분은 뭔가 인터넷 주소창에 넣으면 어디론가 이동할 것 같지만 아니다. "xmlns:접두사=URI" 이게 필요한 이유는 XAML의 조상격인 XML은 태그의 이름을 사용자가 임의로 정할 수 있다. 그러다보니 태그가 중복될 수 있고 그 중복을 막기위해 네임스페이스가 필요했다. 문서 하나당 하나의 네임스페이스를 부여하면 태그가 중복되더라도 네임스페이스의 이름으로 중복을 피할 수 있게 된다.

• x:Class="RealtimeWebcam.MainWindow"은 접두사가 없다. 접두사가 없는 태그는 모두 이 네임스페이스에 해당한다는 의미다. 즉, 이 줄은 WPF임을 선언한 줄이고, xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"은 XAML을 선언한 줄이다.

• Title="Realtime Webcam" Height="450" Width="800" Title이나 Height같은 것들을 속성, 즉 Property(프러퍼티) 라고 부른다.
  Title이 어떤 일을 하는지 알아보는 방법은 무엇일까? Title이라는 속성을 가진 것이 Window라는 것이니, 당연히 Window창의 Title을 정하는 속성이라는 것을 알 수 있다.

C#코드로 표현현하면 다음과 같다.

Window window = new Window();
window.Title = "MainWindow";
window.Height = 450;
window.Width = 800;

즉, XAML에서의 태그는 C#에서의 하나의 객체라고 보면 된다.
Window 태그를 사용하면 Window라는 객체가 메모리위에 올라가게 된다.

---

참조

• XAML
  https://learn.microsoft.com/en-us/dotnet/desktop/wpf/xaml/?view=netdesktop-9.0

• XAML 구문 정보
  https://learn.microsoft.com/ko-kr/dotnet/desktop/wpf/advanced/xaml-syntax-in-detail?view=netframeworkdesktop-4.8&viewFallbackFrom=netdesktop-9.0

• 블로그
  https://sunday5214.tistory.com/16