UWP XAML <DatePicker/> 달력 날짜 컨트롤 사용 방법

UWP 에서 날짜를 선택하기 위해 사용하는 것이 <DatePicker/> xaml 마크업이다. 기본적으로 표시되는 것은 년월일이며 마우스로 클릭하면 스크롤을 이용하여 년월일을 선택할 수 있다.

UWP XAML <DatePicker/> 달력 날짜 컨트롤 사용 방법

애플리케이션에서 데이터를 얻기 위해 날짜를 사용하는 경우는 흔하다.

날짜의 역할은 단순해 보이지만 기록에 대한 최초의 근거 자료로써 사용된다.

UWP 에서 날짜를 선택할 때 사용되는 xaml 컨트롤은 <DatePicker/> 이다.

DatePicker 컨트롤은 기본적으로 년월일을 선택할 수 있는 컨트롤이다.

다른 컨트롤에 비해 좀 무식하게 생긴 면은 있지만 사용함에 무리는 없다.

DatePicker UWP 날짜 컨트롤

UWP 앱에서 날짜를 선택할 때 DatePicker 컨트롤을 사용하게 된다.

xaml 마크업 언어를 사용하며 기본적으로 Name 과 Header 속성을 이용하여 날짜 컨트롤을 화면에 표시할 수 있다.

아래는 xaml <DatePicker> 마크업을 사용하는 기본적인 방법이다.

<DatePicker x:Name="DatePickerSample"
		Header="달력 테스트">
</DatePicker>

Name 은 컨트롤의 이름으로 C# 코드에서 접근하여 사용할 수 있다.

Header 는 컨트롤의 제목이라 생각하면 된다. 굳이 사용하지 않아 되지만 달력이 어떤 용도로 사용되는지 표시하려면 사용해 주는 것이 좋다.

전체 코드 및 결과

이제 UWP 프로젝트를 만들고 xaml <DatePicker/> 을 추가해 본다.

DatePicker 는 날짜를 선택하는 xaml 컨트롤이며, 비주얼스튜디오의 xaml 디자이너 화면에 마크업을 추가하면 된다.

아래는 DatePicker xaml 컨트롤을 추가한 전체 코드를 보여준다.

<Page
    x:Class="UWPAppTutorials.Ctl_DatePickerPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:UWPAppTutorials"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <StackPanel>
            <DatePicker x:Name="DatePickerSample"
                        Header="달력 테스트">
            </DatePicker>
        </StackPanel>
    </Grid>
</Page>

아래는 UWP 의 DatePicker 마크업 xaml 을 추가하고 실행한 모습이다.

마우스로 스크롤하여 년 월 일을 선택할 수 있는 형식을 취하고 있다.

웹사이트에서 날짜를 선택하는 것에 익숙한 지금의 경우 조금 무식하게 보일 수 있지만, 마우스 스크롤로 빠르게 년월일을 선택하는 것은 편할 수 있다.