WPF

[WPF] XAML

귀뚜래미 2022. 9. 1. 11:24
728x90

 

WPF의 본질적인 부분이기 때문에 간단히 이론 정리

01. XAML 이란

- eXtensible Application Markup Language의 약자

- HTML처럼 간단하게 GUI를 생성하고 편집

- WPF 내에서 윈도우나 페이지를 생성함과 동시에 XAML 파일과 CodeBehind 파일이 생성된다.

- XAML파일은 XAML이 가진 요소들로 인터페이스를 묘사한다.

- CodeBehind 파일은 발생하는 모든 이벤트들을 다루면서 XAML 조작에 접근한다.

 

 

02. XAML 기본

기본 태그 사용방법

<Button></Button>
또는
<Button />

- XAML 태그들은 끝 태그를 쓰거나 시작 태그에 슬래시(/)를 써서 닫는다.

- 태그 사이의 내용은 곧 컨트롤의 내용이 된다. 예를 들어 버튼 컨트롤은 시작과 끝 태그 사이에 텍스트를 입력함으로 버튼의 내용을 정의할 수 있다.

 

 

하위 태그를 사용한 정의 방법

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

- 두 가지의 결과물은 모두 동일하지만 컨트롤에 정의된 모든 속성은 다음과 같이 메인 콘트롤의 하위 태그를 이용해서 세팅할 수도 있다.(Control-Dot-Property 표기법)

 

 

WrapPanel

<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은 다른 컨트롤들을 담는 컨테이너 역할을 한다.

- <Button.Content> 태그를 생략해도 결과는 동일하다.

 

 

03. XAML의 이벤트

- 윈도우(Control 클래스에서 상속)를 포함한 모든 컨트롤들은 구독하는 이벤트들을 사용자에게 노출시킨다.

- 이벤트들을 구독하고 응용 프로그램으로 이벤트가 발생할 때 알림을 받는다.

 

예시를 통한 컨트롤 이벤트와 코드 비하인드 파일의 연결 원리 이해

<Window x:Class="WpfTutorialSamples.XAML.EventsSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="EventsSample" Height="300" Width="300">
	<Grid Name="pnlMainGrid" MouseUp="pnlMainGrid_MouseUp" Background="LightBlue">        
		
    </Grid>
</Window>

- 어떻게 메서드 이름을 쓰고 Grid의 Mouse Up 이벤트를 정의하는지 확인한다.

- 메서드는 적합한 이벤트 시그니쳐를 사용해 코드 비하인드에 정의한다.

- 메서드 이름을 클릭 후 F12 키를 누르면 코드 비하인드 파일에 메서드가 생성된다.(이미 존재할 경우 해당 메서드로 이동)

 

private void pnlMainGrid_MouseUp(object sender, MouseButtonEventArgs e)
{
	MessageBox.Show("You clicked me at " + e.GetPosition(this).ToString());
}

- 구독하는 MouseUp 이벤트는 MouseButtonEventHandler라는 델리게이트를 사용한다.

- 이 델리게이트는 sender(이벤트를 발생시킨 컨트롤), MouseButtonEventArgs 2개의 인자를 가진다.

- 위의 코드는 마우스 커서 위치를 얻어 전달해주는 기능을 한다.

- 몇몇 이벤트들은 동일 타입의 델리게이트를 사용한다. 예를 들어 MouseUp과 MouseDown은 모두 MouseButtonEventHandler 델리게이트를 사용한다. 반면 MouseMove는 MouseEventHandler 델리게이트를 사용한다.

- 이벤트 핸들러 메서드를 정의할 때는 어떤 델리게이트를 사용하는지 알아야 한다. 모를 경우 구글링

 

 

코드 비하인드로 부터 이벤트 구독

- 상기 방법은 이벤트를 구독하는 가장 일반적인 방법이다.

- 하지만 코드 비하인드 파일에 직접 이벤트를 구독하도록 하는 경우도 있다.

- 이 경우 '+=' 연산자를 사용한다. 이벤트 핸들러를 객체 형태로 이벤트에 바로 추가한다.

- 이 방식으로 이벤트를 활용하면 XAML에서 작업할 필요가 없다.

using System;
using System.Windows;
using System.Windows.Input;


namespace WpfTutorialSamples.XAML
{
	public partial class EventsSample : Window
	{
		public EventsSample()
		{
			InitializeComponent();
			pnlMainGrid.MouseUp += new MouseButtonEventHandler(pnlMainGrid_MouseUp);
		}

		private void pnlMainGrid_MouseUp(object sender, MouseButtonEventArgs e)
		{
			MessageBox.Show("You clicked me at " + e.GetPosition(this).ToString());
		}

	}
}

 

728x90