[WPF] XAML을 이용한 간단한 컨트롤
WPF | C# .NET

[WPF] XAML을 이용한 간단한 컨트롤

WPF | C# .NET

안녕하세요. 이번에 회사에서 신규 개발 프로젝트를 맡게되었는데 WPF로 개발하게 되었습니다.
회사 선임에게 ‘WPF MVVM 일주일 만에 배우기’라는 책을 추천 받았고, 해당 내용을 블로그에 정리하기 위해 WPF 카테고리를 만들고 글을 쓰게 되었습니다.
WPF는 처음이다 보니 틀린 내용이 있으면 알려주세요.

개요

이번 글에서는 WPF에서 제공하는 단순 컨트롤에 대해 알아보겠습니다.
WPF에서는 컨트롤을 추가하는 방법이 두 가지가 있습니다.

  1. 도구상자에서 컨트롤을 끌어다 놓기
  2. XAML 파일에 XML 요소를 추가

글에서는 끌어다 놓는 것이 아니라 XAML을 직접 타이핑하여 수정해서 만들어 보겠습니다.
XAML 파일은 WPF 프로젝트를 하나 만들게 되면 MainWindow.xaml이 있는데 이 파일을 더블 클릭하면 아래 처럼 디자인과 XAML 편집창이 보이게 됩니다.

<Window x:Class="_00_BasicControl.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:_00_BasicControl"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <StackPanel>
    </StackPanel>
</Window>

여기에 위와 같이 Grid를 StackPanel로 바꾸어 컨트롤을 하나씩 만들어 보도록 하겠습니다.

텍스트 표시

문자열 표시는 TextBlock 또는 Label을 이용합니다.

<StackPanel>
    <!--문자열 표시-->
    <TextBlock Text="TextBlock"/>
    <Label Content="Label"/>
</StackPanel>

두 개 모두 텍스트를 표시하는 컨트롤이고, TextBlock은 단순한 텍스트 표시, Label은 텍스트 표시 뿐만 아니라, 그 외 다른 기능도 있습니다. 우선 간단히 알아보기만 하겠습니다.

사용자에게서 텍스트 입력

TextBox는 사용자에게서 입력을 받는 컨트롤 입니다.

<StackPanel>
    <!--문자열 표시-->
    <TextBlock Text="TextBlock"/>
    <Label Content="Label"/>
    <!--사용자에게 문자열 입력 받음-->
    <TextBox Text="TextBox"/>
</StackPanel>

버튼

버튼을 통해 사용자에게서 입력 받을 수 있습니다.

<StackPanel>
    <!--문자열 표시-->
    <TextBlock Text="TextBlock"/>
    <Label Content="Label"/>
    <!--사용자에게 문자열 입력 받음-->
    <TextBox Text="TextBox"/>
    <!--버튼-->
    <Button Content="Button"/>
    <ToggleButton Content="Toggle Button"/>
    <RadioButton GroupName="group1" Content="radio1" />
    <RadioButton GroupName="group1" Content="radio2" />
    <RadioButton GroupName="group1" Content="radio3" />
</StackPanel>

Button은 말 그대로 버튼, ToggleButton은 눌린 상태, 눌리지 않는 상태로 입력되는 버튼, RadioButton은 세 개 중 하나를 선택할 수 있는 라디오 버튼입니다.

체크 박스

체크 박스는 체크, 체크 되지 않는 상태를 표시하는 컨트롤 입니다.

<StackPanel>
    <!--문자열 표시-->
    <TextBlock Text="TextBlock"/>
    <Label Content="Label"/>
    <!--사용자에게 문자열 입력 받음-->
    <TextBox Text="TextBox"/>
    <!--버튼-->
    <Button Content="Button"/>
    <ToggleButton Content="Toggle Button"/>
    <RadioButton GroupName="group1" Content="radio1" />
    <RadioButton GroupName="group1" Content="radio2" />
    <RadioButton GroupName="group1" Content="radio3" />
    <!--체크 박스-->
    <CheckBox Content="CheckBox"/>
</StackPanel>

프로그레스바, 슬라이더

프로그레스바는 진행률을 표시하는 컨트롤, 슬라이더는 사용자에게 정수, 실수를 입력 받기 위한 컨트롤의 종류중 하나입니다.

<StackPanel>
    <!--문자열 표시-->
    <TextBlock Text="TextBlock"/>
    <Label Content="Label"/>
    <!--사용자에게 문자열 입력 받음-->
    <TextBox Text="TextBox"/>
    <!--버튼-->
    <Button Content="Button"/>
    <ToggleButton Content="Toggle Button"/>
    <RadioButton GroupName="group1" Content="radio1" />
    <RadioButton GroupName="group1" Content="radio2" />
    <RadioButton GroupName="group1" Content="radio3" />
    <!--체크 박스-->
    <CheckBox Content="CheckBox"/>
    <!--프로그레스 바-->
    <ProgressBar Value="50" HorizontalAlignment="Stretch" Height="20"/>
    <!--슬라이더-->
    <Slider Value="5" HorizontalAlignment="Stretch"/>
</StackPanel>

패스워드 입력

패스워드 컨트롤은 문자 그대로 패스워드를 입력받기 위한 컨트롤 입니다.

<StackPanel>
    <!--문자열 표시-->
    <TextBlock Text="TextBlock"/>
    <Label Content="Label"/>
    <!--사용자에게 문자열 입력 받음-->
    <TextBox Text="TextBox"/>
    <!--버튼-->
    <Button Content="Button"/>
    <ToggleButton Content="Toggle Button"/>
    <RadioButton GroupName="group1" Content="radio1" />
    <RadioButton GroupName="group1" Content="radio2" />
    <RadioButton GroupName="group1" Content="radio3" />
    <!--체크 박스-->
    <CheckBox Content="CheckBox"/>
    <!--프로그레스 바-->
    <ProgressBar Value="50" HorizontalAlignment="Stretch" Height="20"/>
    <!--슬라이더-->
    <Slider Value="5" HorizontalAlignment="Stretch"/>
    <!--패스워드 입력-->
    <PasswordBox Password="hello world"/>
</StackPanel>

해당 컨트롤에 입력하시면 별표(*)로 표시하는 것을 볼 수 있습니다.

하위 요소

이때까지 텍스트를 표시하기 위해 Content나 Text같은 속성으로 문자열을 표시했습니다. 컨트롤의 하위 요소에 텍스트를 넣으면 자동으로 문자열을 표시합니다.

 <StackPanel>
     <!--문자열 표시-->
     <TextBlock Text="TextBlock"/>
     <Label Content="Label"/>
     <!--사용자에게 문자열 입력 받음-->
     <TextBox Text="TextBox"/>
     <!--버튼-->
     <Button Content="Button"/>
     <ToggleButton Content="Toggle Button"/>
     <RadioButton GroupName="group1" Content="radio1" />
     <RadioButton GroupName="group1" Content="radio2" />
     <RadioButton GroupName="group1" Content="radio3" />
     <!--체크 박스-->
     <CheckBox Content="CheckBox"/>
     <!--프로그레스 바-->
     <ProgressBar Value="50" HorizontalAlignment="Stretch" Height="2
     <!--슬라이더-->
     <Slider Value="5" HorizontalAlignment="Stretch"/>
     <!--패스워드 입력-->
     <PasswordBox Password="hello world"/>

     <!--하위 요소에 문자열 입력-->
     <Button>
         hi
     </Button>
 </StackPanel>

위 XAML은 Button의 하위 요소에 hi를 넣어서 버튼에 텍스트가 표시하는 XAML입니다.

단순히 텍스트 뿐만 아니라 하위 요소에는 컨트롤이 올 수도 있습니다. 예를 들어 아래와 같이 XAML을 만들 경우 버튼에 체크박스와 프로그레스바가 생성 됩니다.

<StackPanel>
    <!--문자열 표시-->
    <TextBlock Text="TextBlock"/>
    <Label Content="Label"/>
    <!--사용자에게 문자열 입력 받음-->
    <TextBox Text="TextBox"/>
    <!--버튼-->
    <Button Content="Button"/>
    <ToggleButton Content="Toggle Button"/>
    <RadioButton GroupName="group1" Content="radio1" />
    <RadioButton GroupName="group1" Content="radio2" />
    <RadioButton GroupName="group1" Content="radio3" />
    <!--체크 박스-->
    <CheckBox Content="CheckBox"/>
    <!--프로그레스 바-->
    <ProgressBar Value="50" HorizontalAlignment="Stretch" Height="20"/>
    <!--슬라이더-->
    <Slider Value="5" HorizontalAlignment="Stretch"/>
    <!--패스워드 입력-->
    <PasswordBox Password="hello world"/>

    <!--하위 요소에 문자열 입력-->
    <Button>
        hi
    </Button>
    <!--하위 요소에 더 복잡한 UI 입력-->
    <Button>
        <StackPanel Margin="10">
            <CheckBox Content="TextBox"/>
            <ProgressBar Value="50" HorizontalAlignment="Stretch" Height="20"/>
        </StackPanel>
    </Button>
</StackPanel>

이렇게 WPF에서는 무엇이든 콘텐츠가 될 수 있어 하위 요소를 콘텐츠 컨트롤에 제공하게 되면 복잡한 UI를 만들 수 있습니다.

이상으로 XAML을 통해 기본 컨트롤을 만들어 보았습니다.

github: https://github.com/3001ssw/c_sharp/tree/main/WPF/WPF_MVVM_1Week/00_BasicControl