XAML 과 코드 숨김 [언제나 WPF]

 이번 강의는 XAML과 코드 숨김(Code Behind)의 관계를 알아볼게요.

WPF 프로젝트를 생성한 후 MainWindow.xaml에 내용을 변경합시다.

먼저 Window 요소의 Height 특성(Attribute를 .NET에서는 특성이라 부름)과 Width 특성 값을 120, 400으로 수정하세요. 이렇게 창의 크기를 바꿨어요.

Window 태그 내에 Grid 요소를 제거합니다. 그리고 Button 요소를 추가한 후 내부 문자열에 “눌러주세요.”를 입력하세요.

<Button>눌러주세요.</Button>

버튼이 전체 영역을 차지하는 것을 알 수 있어요.

버튼 크기에 비해 글씨가 너무 작게 보이죠. FontSize 특성을 추가하여 값을 40으로 지정하세요. 글씨가 이제 잘 보이네요.

Click 특성도 추가하세요. 이 때 값은 직접 입력하지 마시고 탭을 눌러 추가하세요. 자동으로 값을 지정하는 것을 알 수 있어요. 물론 개발자가 정할 수도 있습니다.

Click 특성은 버튼 개체의 이벤트 핸들러입니다. 지금 이벤트 핸들러를 추가한 거예요.

코드 숨김(MainWindow.cs) 파일로 가 보면 방금 지정한 메서드가 만들어 진 것을 알 수 있어요.

이러한 것은 누가 어떻게 만드는 것일까요?

다시 XAML 파일로 넘어가세요.

XAML 태그 파일에 Window 태그를 보세요. x:Class 특성이 보이나요? 이 특성을 지정하면 MSBuild는 특성 값으로 partial 클래스를 만듭니다. 이렇게 코드 숨김 파일은 만들어진 거예요.

창의 폭과 너비, 버튼을 추가한 것, 폰트 크기 지정, 이벤트 핸들러 등록 등의 작업한 것은 어떻게 반영했을까요?

Window 태그에 스키가 설정 부분을 참조하는 부분이 있어요. 개발 환경에 따라 다르겠지만 xmlns:x 특성으로 값을 설정한 부분이 있을 거예요.

"xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml"

이 부분이 XAML을 분석하여 MSBuild에 의해 코드 숨김 파일 및 더 깊숙한 곳에 내용을 마법처럼 작성해 주는 것이죠. 마법사라고 부를 만 하네요. 9서클 대 마법사?

InitializeComponent 메서드 내부로 들어가 보세요. InitializeComponent에 커서를 이동시킨 후에 F12를 누르면 메서드 정의 부분으로 이동합니다.

이 숨겨진 파일의 내용을 살펴보면 버튼의 클릭 이벤트 핸들러를 설정한 부분을 확인할 수 있어요.

((System.Windows.Controls.Button)(target)).Click += new System.Windows.RoutedEventHandler(this.Button_Click);

이처럼 MSBuild에서 이러한 작업을 대신 해주기 때문입니다. 이 곳에 내용은 개발자가 함부로 건들면 안 될 것 같다는 느낌이 팍~ 팍~ 오시죠.

 다시 코드 숨김으로 가서 Button_Click 이벤트 핸들러를 지워보세요. 그리고 빌드하십시오. 오류 창이 뜨는 것을 알 수 있어요.

 

오류
오류

 

 이는 XAML에 이벤트 핸들러를 등록할 때 MSBuild에 의해 자동으로 만들어 진 것을 개발자가 없애서 발생한 거예요. 하지만 이벤트 핸들러를 이처럼 지우는 것은 매우 흔한 일입니다. 이러한 오류가 발생하면 당황해 하지 마시고 XAML에 지정한 Click 속성을 지워야합니다.

 빌드해 보면 이제 아무 문제가 없는 것을 알 수 없어요.

 이대로 끝내긴 그렇죠. 죄송하지만 다시 Click 속성에 값을 지정합시다. 이벤트 핸들러가 만들어지겠죠.

Click 이벤트 핸들러에 메시지 창을 띄우세요. 메시지 창의 버튼 종류는 OKCancel로 정하세요.

그리고 메시지 창을 띄운 결과 값이 OK일 때 Close 메서드를 호출하면 창을 종료합니다.

이상으로 WPF 코드 숨김의 원리 강의를 마칠게요.

<Window x:Class="코드_숨김_원리.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:코드_숨김_원리"
        mc:Ignorable="d"
        Title="MainWindow" Height="120" Width="400">
    <Button FontSize="40" Click="Button_Click">눌러주세요.</Button>
</Window>

using System.Windows;

namespace 코드_숨김_원리
{
    ///
    /// MainWindow.xaml에 대한 상호 작용 논리
    /// 
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            MessageBoxResult mbr =
                MessageBox.Show("종료하실래요?", "종료", MessageBoxButton.OKCancel);
            if(mbr == MessageBoxResult.OK)
            {
                Close();
            }
        }
    }
}

WPF