WPF

WPF 스터디 시작(1)

evilcurse

2024년 9월 18일 • 9 min read

이 포스팅 내용의 모든 출처는 https://wpf-tutorial.com/입니다.

WPF란?

WPF : Windows Presentation Foundation 의 약자

닷넷 프레임워크에서 사용하는 최신 GUI프레임 워크

뭐 HTML같은 거라고 보면 될듯.

마소에서 만든 GUI프레임워크로 기존에 WinForms(윈폼)이라고 같은 목표를 가진 GUI프레임워크가 있다.

WPF vs WinForms

왜 두개의 GUI프레임워크를 유지관리하고 있는지 각각의 장점을 기준으로 알아보면,

먼저 WPF의 장점은 상대적으로 최신기술이고 마소에서 출시하는 최신 프로그램드은 WPF를 사용해서 개발되었다. 예) Visual Studio

XAML을 사용해서 제작하고 편집, 디자이너의 업무와 프로그래머의 업무를 분리할 수 있다. 하드웨어 가속장치로 GUI를 그리기 떄문에 더 나은 성능을 제공.

그리고, WinForms의 장점은, 오래되어서 더 안정화 되어있다. (더 많이 사용되서 테스트도 더 많이 되었을 것)

많은 작업을 할때는 WPF보다 WinForms가 더 좋다는데 어떤점에서 그런지는 둘다 써보지 않아서 모르겠음.

다운로드

https://www.visualstudio.com/vs/community/

Hello, World!

아래는 MainWindow.xaml 로 vs가 자동으로 생성한 xaml코드다.

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
    <Grid>

    </Grid>
</Window>

위의 xaml과 xml이 무슨 차이 인지는 잘 모르겠으나, yaml과 yml은 혼용해서 쓰는데 xaml과 xml을 혼용해서 쓰는 문서를 아직까지 보진 못했다. 그래서 쳇쥐피티에게 물어봤더니 xml을 범용적으로 쓰는 마크업 언어고 XAML은 닷넷 프레임워크 기반의 UI를 선언하기 위해 사용하는 마크업 언어라고 한다. 아무튼 내가 볼떄는 그냥 둘다 XML이다.

위 XAML코드에 버튼을 추가 하면 아래와 같이 된다.

<Window x:Class="WpfApplication1.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525">
    <Grid>
        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="72">
            Hello, WPF!
        </TextBlock>
    </Grid>
</Window>

그리고 응용프로그램을 실행하면,

XAML이란?

HTML같이 간단하게 GUI를 생성할 수 있는 XML의 한 형태.

XAML의 기본

XML기반이기 때문에 아래와 같은 문법은 혀용되지 않는다.

<Button>

나는 개발자라서 XML을 많이 다뤄봐서 정말 기본중의 기본이지만 XML을 모르는 사람이라면 XML문법을 좀 익히고 보면 편할 것 같다. HTML에서는 위와 같은 문법을 대충.. 오류가 안나고 그려주지만, XML에서는 오류가 발생한다. 따라서 아래와 같이 표현해줘야 한다.

<Button />
<!-- or -->
<Button></Button>

확실히 열었던 태그를 닫는 처리를 해야한다.

XAML에서는 대소문자를 구분하기 때문에 잘 지켜야 한다.

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

C#의 코드와 비교해보면 XAML의 코드가 엄청 간결하다는 것을 알 수 있다.

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

위 XAML을 C#코드로 변경하면 아래와 같다.

Button btn = new Button();
btn.FontWeight = FontWeights.Bold;

WrapPanel pnl = new WrapPanel();

TextBlock txt = new TextBlock();
txt.Text = "Multi";
txt.Foreground = Brushes.Blue;
pnl.Children.Add(txt);

txt = new TextBlock();
txt.Text = "Color";
txt.Foreground = Brushes.Red;
pnl.Children.Add(txt);

txt = new TextBlock();
txt.Text = "Button";
pnl.Children.Add(txt);

btn.Content = pnl;
pnlMain.Children.Add(btn);

자바에서 Swing이나 SWT로 개발할 때 위와같은 형태로 UI를 많이 그렸었는데 옛날기억이 새록새록 난다. 누가봐도 XAML이 간단하고 더 직관적으로 이해가 될 것이다.

XAML에서 이벤트

HTML에서도 자바스크립트와 연동해서 이벤트 등을 처리하는데 당연히 XAML에서도 이벤트를 처리하는 방법이 있다.

아래 코드를 보면 Html에서 onMouseUp 이벤트를 비슷한 방식으로 처리하는 것을 볼 수 있다.

<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>

연결되는 C#코드는 아래와 같다.

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

WPF 어플리케이션 개요

WPF는 주로 윈도우즈 응용프로그램을 만드는데 사용한다.(아닐수도 있다) 내가보고 있는 튜토리얼은 WPF를 이용해서 윈도우즈용 데스크탑 어플리케이션을 만드는데 촛점을 두고 있다고 한다. 이것은 따라가 보면서 확인해야할 것 같다. 내가 기존에 배웠었던 자바로 구현하는 스윙이나 SWT도 데스크탑에서 실행되는 어플리케이션을 만들기 위해서 배웠었다. 나는 당시에 네이트온같은 메신저를 구현해보고자 했었다. TMI 끗.

Window

<Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="300">
    <Grid>

    </Grid>
</Window>

위 코드를 보면 가장 최상위 루트부분에 있는 태그가 Window 다. 그리고 x:Class 라는 속성으로 C#으로 구현된 클래스와 연결된다.

using System;
using System.Windows;
using System.Windows.Controls;
//…more using statements

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

위에서 Window의 속성을 보면 Title을 비롯해서 여러 속성이 사용되었는데 그 외에도 많은 속성이 있다. 그것들을 알고 사용하는 것은 중요할 것이다.

튜토리얼에서 언급한 속성만 아래 남겨놓는다. 한번씩 읽어보길 바란다.

ResizeMode - 엔드유저가 윈도우 크기를 재조정할 수 있는지에 대한 컨트롤 입니다. 기본값은 CanResize로 다른 윈도우처럼 크기를 조정할 수 있습니다. 최대화/최소화 버튼을 사용 가능하고 모서리를 드래그 할 수도 있습니다. CanMinimize는 윈도우를 최소화 할 수는 있으나 최대화 하거나 드래그를 사용해서 크게 또는 작게 조정할 수 없습니다. NoResize는 가장 제한적인 것으로 최대화 버튼과 최소화 버튼을 제거하며 드래그로 크게 또는 작게 조정할 수도 없습니다.
ShowInTaskbar - 기본 값은 true 입니다. 만약 false로 설정하면 당신이 실행시킨 윈도우가 Windows taskbar에 나타나지 않습니다. 중요하지 않은 윈도우이거나 트레이에 최소화하려는 응용프로그램의 경우 유용합니다.
SizeToContent - 내용에 따라 윈도우 크기를 자동으로 재조정할 지 결정합니다. 기본 값은 Manual로, 자동으로 재조정하지 않습니다. 그 외 옵션으로는 Width, Height, WidthAndHeight가 있는데 수평으로, 수직으로 또는 수평 및 수직으로 재조정합니다.
Topmost - 기본값은 false 입니다. true인 경우, 최소화 하지 않는 이상 해당 윈도우가 다른 윈도우보다 앞에 위치합니다. 특별한 경우에만 사용합니다.
WindowStartupLocation - 윈도우 초기 위치에 대한 컨트롤입니다. 기본값은 Manual로, Top, Left 속성에 정의한 대로 초기 위치가 결정됩니다. 그 외 CenterOwner는 사용자 윈도우의 중앙에 윈도우를 위치시킵니다. 그리고 CenterScreen는 스크린의 중앙에 윈도우를 위치시킵니다.
WindowState - 초기 Window 상태에 대한 Control들입니다. Normal, Maximized, Minimized가 있습니다. 기본값은 Normal이며, 당신이 Window 상태를 Maximized 혹은 Minimized가 아닌 상태로 시작할 때 사용합니다.

App.xaml

WPF 어플리케이션을 시작할때 사용되는 선언부 시작점.

전역리소스등을 정의함.

App.xaml의 구조

<Application x:Class="WpfTutorialSamples.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
    <Application.Resources>

    </Application.Resources>
</Application>

위 Application의 속성중에 StartupUri는 어떤 윈도우나 페이지로 시작하는지 정의하는 부분.

오늘은 여기까지, 2시간정도 공부했습니다.