[WPF] 1. 기초 WPF 애플리케이션 생성하기

C# (.net Framework)으로 WPF 프로젝트 개발에 입문하게 됐다!

현재 목표는 비전 시스템 개발을 목표로 하여 최종적으로 딥러닝 모델까지 서빙하여 시스템을 구축해보려 한다.

그러기 위해 기초부터 차근차근 정리해나가겠다.

일단 Microsoft의 공식문서를 기반으로 시작했다.

https://learn.microsoft.com/ko-kr/dotnet/desktop/wpf/get-started/create-app-visual-studio?view=netframeworkdesktop-4.8

Visual Studio를 사용하여 새 앱 만들기 자습서 - WPF

 

WPF란?

WPF는 Windows Presentation Foundation의 약자로, .NET 프레임워크와 함께 사용되는 Microsoft의 최신 GUI  프레임워크다.

 

가장 많이 사용하는 .NET GUI 프레임워크에는 WinForms과 WPF가 있다.

두 프레임워크의 차이점을 정리해보면

구분	WinForms	WPF
안정성 & 생태계	더 오래되어 안정성이 검증, 관련된 자료나 예제가 많음	최신 기술, Microsoft가 Visual Studio 같은 최신 프로그램에 직접 사용할 정도로 적극적으로 밀어주고 있음
컨트롤 & 도구	바로 구매해서 쓸 수 있는 수많은 서드파티 컨트롤들이 이미 시장에 많이 나와있음	유연성이 매우 뛰어나서, 굳이 새 컨트롤을 사거나 만들지 않아도 기본 기능만으로 훨씬 다양한 UI를 구현할 수 있음
디자인 편의성	드래그 앤 드롭 방식으로 작업하기에 매우 직관적이고 편리함	XAML이라는 언어를 사용해 UI를 설계해 디자이너(화면)와 개발자(로직)의 업무 분리가 깔끔함
데이터 처리	간단한 데이터를 다루기에 쉽고 빠름	데이터 바인딩 기능이 강력, 데이터와 화면을 분리하여 관리하기 때문에 복잡한 앱도 체계적으로 만들 수 있음
그래픽 & 성능	간단하고 가벼움	그래픽 카드의 하드웨어 가속을 사용해서 UI를 그리기 때문에 더 화려하고 부드러운 화면을 만들 수 있음

 

쉽게 말해 WinForms은 가벼운 프로토타입 개발용, WPF는 조금 더 복잡한 프로젝트에 사용할 수 있다.

WPF는 데이터 바인딩 기능이 뛰어나서, MVVM패턴을 적용하면 유지보수적인 측면에서도 좋다.

 

 

기초니까 기본 솔루션 생성부터 시작할게요~

 

위 순서대로 공식문서 기준 .NET 9.0으로 설명하기 때문에 저렇게 생성해준다.

 

 

솔루션 생성 후, 기본적인 용어를 설명하고 있다.

 

<StackPanel Grid.Row="1" Grid.Column="1" Margin="5,0,0,0">
    <TextBox x:Name="txtName" />
    <Button x:Name="btnAdd" Margin="0,5,0,0" Click="ButtonAddName_Click">이름 추가하기</Button>
</StackPanel>

 

생성하면 저렇게 하얀 창이 기본적으로 뜨게 되고,

추가로 Grid 레이아웃을 추가하여 윈도우의 창을 나눠주었다.

Grid Layout은 행, 열 조합으로 사용자가 배치할 수 있게 되어있다.

 

Grid.RowDefinitions로 행을 설정한다. 행의 갯수는 두개로 선언했다. (선언한 갯수만큼 행이 늘어남)

Grid.ColumnDefinitions은 열을 선언.

 

추가로 Grid 레이아웃 옵션으로 Margin=10을 주어 각 상하좌우 Margin이 10씩 들어가있다.

 

<Label>Names</Label>

여기에 추가로 라벨을 생성하고 

RowDefintion 옵션에 Height를 Auto로 바꿔주었다.

 

결과, 왼쪽 상단에 Names라는 라벨이 생성되고 아까와는 다르게 그리드의 크기가 Names의 행의 높이에 맞춰지는 걸 볼 수 있다.
즉 Auto는 행의 높이를 자동으로 지정한다는 뜻이다.

 

<Label Grid.Row="1" Grid.Column="1">Name2</Label>

이런 라벨을 추가하면

 

이렇게 오른쪽 아래에 배치되는데 이건 Grid의 Row는 1 → 1행에 위치한다는 뜻이다.

Grid.Column또한 1로 지정했기 때문에 1행 1열에 배치되어 오른쪽 아래에 배치된다.

 

<ListBox Grid.Row="1" x:Name="lstNames"/>

<StackPanel Grid.Row="1" Grid.Column="1" Margin="5,0,0,0">
    <TextBox x:Name="txtName" />
    <Button x:Name="btnAdd" Margin="0,5,0,0" Click="ButtonAddName_Click">이름 추가하기</Button>
</StackPanel>

 

이 코드들을 추가해 그리드의 각 1행에 ListBox, StackPanel을 생성한다.

https://learn.microsoft.com/ko-kr/dotnet/desktop/wpf/controls/listbox-styles-and-templates

ListBox 스타일 및 템플릿 - WPF

ListBox, StackPanel 등 관련된 컨트롤 설명은 공식문서에서 확인할 수 있고, 자세한 설명은 추후에 진행하겠다.

 

 

우선 저렇게 작성하면 이렇게 오른쪽 1행에 입력란과 이름 추가하기 버튼이 생성된다.

딱 봐도 이름을 입력해서 버튼을 누르면 왼쪽 리스트박스에 추가되는 기능이다.

하지만 지금은 버튼을 눌러도 어떠한 이벤트와 연결되어 있지 않은 상태이다. 다만 Button 생성을 하면서

Click = ButtonAddName_Click 을 지정해줘서 C#코드로 이벤트 처리부분을 구현해주면 된다.

private void ButtonAddName_Click(object sender, RoutedEventArgs e)
{
    if (!String.IsNullOrWhiteSpace(txtName.Text) && !lstNames.Items.Contains(txtName.Text))
    {
        lstNames.Items.Add(txtName.Text);
        txtName.Clear();
    }
}

 

조건은 텍스트박스에 비어있지 않고 입력된 경우와 (텍스트박스는 txtName으로 지정함)

리스트 박스에 텍스트박스에 입려된 문자가 없을 경우,

리스트박스에 입력한 문자를 추가하고 텍스트박스에 입력한 내용은 지운다.

 

 

이렇게 간단하게 기본적인 컨트롤, 박스 생성 및 입력 후 이벤트 처리와 실행까지 진행해봤다.