[C#] [WPF] MVVM패턴에서의 DatePicker 사용방법

안녕하세요.

오늘은 WPF에서 날짜를 선택할 수 있는 Control인 DatePicker에 대해 알아보고 간단한 MVVM패턴에서의 사용방법까지 배워보도록 하겠습니다.

 

DatePicker

---

DatePicker는 WPF기본 제공 Control입니다. (PresentationFramework.dll)

https://docs.microsoft.com/ko-kr/dotnet/api/system.windows.controls.datepicker?view=net-5.0 

DatePicker 클래스 (System.Windows.Controls)

 

 

DatePicker Control은 날짜만 선택이 가능합니다.

날짜 및 상세 시간까지 선택하고 싶으시다면 아래 게시글을 참고해주세요.

https://chashtag.tistory.com/78

[C# WPF] DateTimePicker 사용방법 (시분초까지 선택하는법)

 

사용방법

---

사용방법은 아주 간단합니다.

 

<!--binding 사용시-->
<DatePicker SelectedDate="{Binding SelectedDate}"/>

추가로 DatePicker은 Control을 상속받기 때문에 Foreground, Width 등 Control의 기본 제공 속성들을 사용할 수 있습니다.

 

 

MVVM패턴에서의 사용방법 (예제)

---

설명은 주석으로 달아 두었으니 참고하시기 바랍니다.

 

 

먼저 디자인 코드입니다.

<!-- MainWindow.xaml -->
<Window x:Class="WPF_DatePicker.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:WPF_DatePicker"
        mc:Ignorable="d"
        Title="MainWindow" Height="200" Width="300">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="50"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid Grid.Row="0">
            <!-- DatePicker를 선언하고, ViewModel의 Property와 연결(Binding)해줍니다. -->
            <DatePicker Width="120" Height="30" SelectedDate="{Binding SelectedDateTime}"/>
        </Grid>
        <Grid Grid.Row="1">
            <!-- 선택된 날짜를 보여주기 위한 TextBlock입니다. -->
            <TextBlock Text="{Binding SelectedDateTime, StringFormat='{}선택된 날짜: {0:yyyy/MM/dd}'}"/>
        </Grid>
    </Grid>
</Window>

 

 

// MainWindow.xaml.cs
using System.Windows;

namespace WPF_DatePicker
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        private MainWindowViewModel _viewModel;

        public MainWindow()
        {
            InitializeComponent();

            // View와 ViewModel을 연결시켜줍니다.
            _viewModel = new MainWindowViewModel();
            this.DataContext = _viewModel;
        }
    }
}

 

// MainWindowViewModel.cs
using System;
using System.ComponentModel;

namespace WPF_DatePicker
{
    public class MainWindowViewModel : INotifyPropertyChanged
    {
        // 기본값을 설정해두지 않으면 0001년으로 표시되기 때문에 기본값을 지정해 주어야 합니다.
        private DateTime _selectedDateTime = DateTime.Now;
        public DateTime SelectedDateTime
        {
            get => _selectedDateTime;
            set
            {
                _selectedDateTime = value;
                NotifyPropertyChanged(nameof(SelectedDateTime));
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;
        public void NotifyPropertyChanged(string name)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
        }
    }
}

 

이때 SelectedDateTime의 기본값을 지정해주지 않으면 DateTime기본값인 0001년 01월 01일 이 들어가기 때문에 사용자에게 불편함을 줄 수 있으니 별도의 시간을 지정해 주어야 합니다.

화살표를 많이 눌러야 되겠네요.

 

해당 예제의 전체 소스코드는 아래 링크에서 확인하실 수 있으니 참고 바랍니다.

https://github.com/Hyo-Seong/CHashtag/tree/master/WPF_DatePicker

Hyo-Seong/CHashtag

 

 

 

이렇게 해서 DatePicker의 간단한 사용법에 대해 알아보았습니다.

추가로 궁금하신 내용이 있으시다면 댓글 남겨주시면 답변해 드리도록 하겠습니다.

 

감사합니다.