[C#] WPF : XAML

안녕하세요!
이번 글에서는 WPF 프로젝트에서 MainWindow.xaml과 비하인드 코드가 어떻게 동작하는지 알아보고자 합니다.

xaml에서 버튼을 추가하고 비하인드 코드에서 버튼클릭 이벤트를 처리하며 xaml에 익숙해지는 시간을 가져보겠습니다.

 

---

 

프로젝트 생성

ButtonClick이라는 이름을 가진 프로젝트를 생성해 주었습니다.

프로젝트 생성

 

---

 

xaml 수정

MainWindow.xaml파일을 열어 메인 윈도우에 대한 디자인 뷰를 열어준 후 <Grid>와 </Grid>사이에 TextBlock과 Button을 각각 추가해 주었습니다.

<Window x:Class="ButtonClick.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:ButtonClick"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
            <TextBlock Text="안녕하세요, WPF 예제입니다!" FontSize="20" FontWeight="Bold" Margin="0,0,0,10"/>
            <Button Content="클릭해보세요" Width="100" Height="30" Click="Button_Click"/>
        </StackPanel>
    </Grid>
</Window>

• <Window> 부터 </Window> 까지 Window에 대한 정보가 포함되어 있습니다.  
• 마찬가지로 Window에 포함 된 Grid 사이에 StackPanel이라는 패널과 그 아래 텍스트와 버튼을 배치 하였습니다.
• Click="Button_Click" 코드를 사용하여 버튼이 Click 되었을 때 이벤트를 추가해 주었습니다.

 

수정된 xaml에 대한 윈도우 디자인

 

 

---

 

 

비하인드 코드 수정

비하인드 코드에 포함된 메인윈도우 클래스 내부에 xaml파일에서 추가한 이벤트 함수를 추가해 줍니다.

namespace ButtonClick
{
	/// <summary>
	/// Interaction logic for MainWindow.xaml
	/// </summary>
	public partial class MainWindow : Window
	{
		public MainWindow()
		{
			InitializeComponent();
		}

		private void Button_Click(object sender, RoutedEventArgs e)
		{
			MessageBox.Show("버튼이 클릭되었습니다!");
		}
	}
}

• xaml에 추가한 이벤트를 비하인드 코드에서 어떻게 동작할지 정의하였습니다.
• 이 예제에서는 버튼이 클릭되었다는 메시지 박스를 띄워줍니다.

 

---

 

테스트

빌드 후 메인윈도우를 띄워 버튼을 클릭해 보면 "버튼이 클릭되었습니다!"라는 메시지 박스가 출력되는 것을 확인할 수 있습니다.

빌드 후 버튼 클릭

 

---

 

용어 정리

이번 포스팅에서 쓰인 용어 정리

 

Window

• WPF 애플리케이션의 최상위 창을 나타냄. 
• 사용자 인터페이스를 구축하는 기본 컨테이너.
  
  

Grid

• 행과 열로 나뉜 격자 형태의 레이아웃을 생성. 
• UI 요소를 격자 셀에 배치하여 정렬하고 조직할 수 있음.
  
  

StackPanel

• 요소를 수직 또는 수평으로 나란히 배치하는 패널. 
• 자식 요소들을 쌓는 형태로 배치.
  
  

TextBlock

• 텍스트를 표시하는 요소. 
• 이 예제에서는 "안녕하세요, WPF 예제입니다!"라는 텍스트를 표시.
  
  

Button

• 클릭 가능한 버튼을 나타냄. 
• 사용자의 상호 작용에 응답하기 위해 클릭 이벤트를 처리.

---

여기까지 WPF 프로젝트를 만들고 xaml에서 버튼을 추가하여 비하인드 코드에 정의한 버튼클릭 이벤트를 연결하는 예제를 실습해 보았습니다.

이해하기 힘든 용어가 있다면 용어정리를 참고해 주세요.

감사합니다!