備忘録

備忘録

C# WPF Calendarで年月のみ選択できるようにする

やりたいこと

WPF標準のCalendarコントロールを使い、年月だけ指定できるようにする。

以下サンプル

MainWindow.xaml

<Window x:Class="wpf_calendar_year_month_only.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_calendar_year_month_only"
        mc:Ignorable="d"
        Title="Calendar" Height="264.76" Width="205.996">
    <Grid>
        <Calendar Name="calendar1" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" DisplayModeChanged="calendar1_DisplayModeChanged" DisplayDateChanged="calendar1_DisplayDateChanged"/>
        <Label x:Name="label1" Content="Label" HorizontalAlignment="Left" Margin="10,179,0,0" VerticalAlignment="Top" RenderTransformOrigin="-0.758,-0.205"/>

    </Grid>
</Window>

MainWindow.xaml.cs

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

namespace wpf_calendar_test
{
  public partial class MainWindow : Window
  {
    public MainWindow()
    {
      InitializeComponent();

      // 起動時のカレンダーを1年分(月ごと)で表示する
      calendar1.DisplayMode = CalendarMode.Year;
    }

    private void calendar1_DisplayModeChanged(object sender, CalendarModeChangedEventArgs e)
    {
      // 月をクリックした時
      if(e.NewMode == CalendarMode.Month)
      {
        // 1月分(日ごと)にならないようにする
        calendar1.DisplayMode = CalendarMode.Year;
        // calendar1 からマウスキャプチャを外す(重要)※後記参照
        Mouse.Capture(null);
      }
    }

    private void calendar1_DisplayDateChanged(object sender, CalendarDateChangedEventArgs e)
    {
      // 「calendar1 で表示されている日付」を label1 に表示する
      label1.Content = calendar1.DisplayDate.ToString("yyyy/MM/dd HH:mm");
    }
  }
}

次の一行が重要。

// calendar1 からマウスキャプチャを外す
Mouse.Capture(null);

※labelの日付に注目

 
(マウスキャプチャを外さない場合(左)とマウスキャプチャを外した場合(右))

※このgif動画はLICEcapでキャプチャしました。