WPF - Calendar Component를 이용한 Date Picker 만들기

C# 윈폼에는 DatetimePicker와 같은 Date Pikcer를 WPF에서 구현해보겠습니다.

 

1. 아래와 같이 화면을 구성합니다.
  (1) 선택 날짜 : TextBox
  (2) 달력 표시 버튼 : Button
  (3) 달력 : Calendar

 

2. Main Window에 Loaded 이벤트를 추가합니다.
   - 선택 날짜 TextBox에 오늘 날짜를 표시하기 위함입니다. 

private void Window_Loaded(object sender, RoutedEventArgs e)
{
	// 달력을 숨김
	calDate.Visibility = Visibility.Hidden;
	// 오늘날짜
	tbDate.Text = DateTime.Now.ToString("yyyy-MM-dd");
} 

 

2. 선택 날짜는 수정 할 수 없도록 IsReadOnly 속성을 체크로 변경합니다.

 

3. 달력 표시 버튼에 클릭 이벤트를 추가합니다.
   - 달력이 표시하거나 숨기기 위한 이벤트입니다.

private void btnDate_Click(object sender, RoutedEventArgs e)
{
	if(calDate.Visibility == Visibility.Visible)
	{
		calDate.Visibility = Visibility.Hidden;
	}
	else
	{
		calDate.Visibility = Visibility.Visible;
	}
}

 

4. 달력에서 날짜를 선택 할 때 선택 날짜 TextBox에 날짜를 표시하기 위한 이벤트를 추가합니다.

private void calDate_PreviewMouseUp(object sender, MouseButtonEventArgs e)
{
	DateTime dt = (DateTime)calDate.SelectedDate;
	tbDate.Text = dt.ToString("yyyy-MM-dd");
	calDate.Visibility = Visibility.Hidden;
}

 

모든 작업은 끝났으니 실행보시고, 잘 응용해서 사용하시길 바랍니다.~~

 

 

[XMAL 전체 소스]

<Window x:Class="DateCondition.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:DateCondition"
        mc:Ignorable="d"
        Title="MainWindow" Height="278.07" Width="239.474" Loaded="Window_Loaded">
    <Grid>
        <TextBox x:Name="tbDate" HorizontalAlignment="Left" Height="23" Margin="28,24,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="128" IsReadOnly="True"/>
        <Calendar x:Name="calDate" HorizontalAlignment="Left" Margin="28,49,0,0" VerticalAlignment="Top" PreviewMouseUp="calDate_PreviewMouseUp"/>
        <Button x:Name="btnDate" Content="..." HorizontalAlignment="Left" Margin="161,24,0,0" VerticalAlignment="Top" Width="46" Height="23" Click="btnDate_Click"/>

    </Grid>
</Window>

[CS 전체 소스]

using System;
using System.Windows;
using System.Windows.Input;

namespace DateCondition
{
    /// <summary>
    /// MainWindow.xaml에 대한 상호 작용 논리
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            // 달력을 숨김
            calDate.Visibility = Visibility.Hidden;
            // 오늘날짜
            tbDate.Text = DateTime.Now.ToString("yyyy-MM-dd");
        }

        private void btnDate_Click(object sender, RoutedEventArgs e)
        {
            if(calDate.Visibility == Visibility.Visible)
            {
                calDate.Visibility = Visibility.Hidden;
            }
            else
            {
                calDate.Visibility = Visibility.Visible;
            }
        }

        private void calDate_PreviewMouseUp(object sender, MouseButtonEventArgs e)
        {
            // 선택된 날짜 표시
            DateTime dt = (DateTime)calDate.SelectedDate;
            tbDate.Text = dt.ToString("yyyy-MM-dd");
            calDate.Visibility = Visibility.Hidden;
        }
    }
}