WPFで自作のカレンダーを作ってみるの投稿 - Crieit

【WPF】自作カレンダー　その３（年間カレンダー）

2019-06-20T14:45:25+09:00

おはようございます。

自作カレンダーその３です。
今回は、ひとまず目標にしていた年間カレンダーを作成します。

動的に生成できるようにしたのが幸いして？割と簡単に実装することができました。

前回のプログラムはこちら。
【WPF】自作カレンダー　その２（動的生成）

スタイルの変更

画面サイズ変更時に各月のカレンダーも一緒にサイズが変わるようにします。

StyleDic.xaml（抜粋）

カレンダー格納グリッドのスタイル追加し、グループボックスとカレンダーグリッドの幅と高さを「Auto」、縦横位置を「Stretch」に変更。

画面の変更

こちらも、サイズ変更の対応と、年月ボックスを年ボックスに変更します。

MainWindow.xaml

全体を「DocPanel」で囲み、画面の枠組みとなるグリッドの幅と高さを「Auto」に、
カレンダー格納グリッドの幅と高さを「Auto」、縦横位置を「Strech」に変更します。

プログラム修正

新規クラス追加

年コンボボックス用のクラスを追加します。

YearInfo.cs

    using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using System.Text;

    namespace CalendarSample
    {
        /// 
        /// 年情報
        /// 
        public class YearInfo
        {

            /// 
            /// コンストラクタ
            /// 
            /// 
            public YearInfo(String year)
            {
                this.Year = year;
                this.YearWithKanji = year + "年";
            }

            /// 
            /// 年
            /// 
            public String Year { set; get; }

            /// 
            /// 年（YYYY年）
            /// 
            public String YearWithKanji { set; get; }
        }
    }

月、日付情報クラスの修正

月情報クラスを年情報クラスの派生クラスに変更し、それに伴い日付情報クラスも変更します。

MonthInfo.cs

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;

    namespace CalendarSample
    {
        /// 
        /// 年月情報
        /// 
        public class MonthInfo : YearInfo
        {
            /// 
            /// コンストラクタ
            /// 
            /// 
            public MonthInfo(String year, String month) : base(year)
            {
                this.Month = month;
                this.YearMonth = year + month;
                this.YearMonthWithKanji = year + "年" + month + "月";
            }

            public String Month { set; get; }
            /// 
            /// 年月
            /// 
            public String YearMonth { set; get; }

            /// 
            /// 年月（YYYY年MM月）
            /// 
            public String YearMonthWithKanji { set; get; }

        }
    }

DateInfo.cs

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;

    namespace CalendarSample
    {
        /// 
        /// 日付情報
        /// 
        public class DateInfo : MonthInfo
        {
            /// 
            /// コンストラクタ
            /// 
            /// 
            /// 
            public DateInfo(String year, String month,  String day) : base(year, month)
            {
                this.YearMonthDay = year+ month + day;
                this.Date = new DateTime(int.Parse(Year), int.Parse(Month), int.Parse(day));
            }

            public DateTime Date { set; get; }

            /// 
            /// 年月日
            /// 
            public String YearMonthDay { set; get; }

            /// 
            /// 年月日（YYYY年MM月DD日）
            /// 
            public String getYearMonthDayWithKanji()
            {
                return String.Format("{0:yyyy年MM月dd日（ddd）}", Date);
            }

            /// 
            /// 日を返します.
            /// 
            /// 
            public String getDay()
            {
                if (String.IsNullOrEmpty(YearMonthDay)) return "";
                return YearMonthDay.Substring(6, 2);
            }
        }
    }

コードビハインドの修正

次の変更を実施

年間カレンダー作成メソッドの追加
グリッドのマトリクス設定メソッドの追加
年月コンボ選択変更イベントを年コンボ選択変更イベントメソッドに変更
初期化処理にて、年コンボ用の項目を生成、セットした後に当年のカレンダーを作成して画面にセットする

MainWindo.xaml.cs

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Threading.Tasks;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Data;
    using System.Windows.Documents;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Imaging;
    using System.Windows.Navigation;
    using System.Windows.Shapes;

    using MahApps.Metro.Controls;

    namespace CalendarSample
    {
        /// 
        /// MainWindow.xaml の相互作用ロジック
        /// 
        public partial class MainWindow : MetroWindow
        {
            private Rectangle selectedRec;
            private Style selectedRecStyle;

            public MainWindow()
            {
                InitializeComponent();

                // 前月から6カ月分のリストを作成し、当月を選択させる
                List list = new List();
                DateTime now = DateTime.Now;
                DateTime dt = now.AddYears(-1);
                for (int i = 0; i < 6; i++ )
                {
                    list.Add(new YearInfo(String.Format("{0:yyyy}", dt)));
                    dt = dt.AddYears(1);
                }
                this.cbYear.ItemsSource = list;
                this.cbYear.DisplayMemberPath = "YearWithKanji";
                this.cbYear.SelectedIndex = 1;

                setGridMatrix(CalendarContainer, 3, 4);

                // 年間カレンダー作成
                createYearsCalendar(this.cbYear.SelectedItem as YearInfo);

            }

            /// 
            /// 年コンボの選択変更イベントハンドラー.
            /// 
            /// 
            /// 
            private void cbYear_SelectionChanged(object sender, SelectionChangedEventArgs e)
            {
                // 年間カレンダー作成
                createYearsCalendar(this.cbYear.SelectedItem as YearInfo);
            }

            /// 
            /// 年間カレンダーを作成.
            /// 
            /// 
            private void createYearsCalendar(YearInfo yearInfo)
            {
                CalendarContainer.Children.Clear();

                for (int i = 0; i < 12; i++)
                {
                    // 横位置
                    int x = i % 4;
                    // 縦位置
                    int y = i / 4;
                    // カレンダー作成
                    String year = (this.cbYear.SelectedItem as YearInfo).Year;
                    MonthInfo mi = new MonthInfo(year, String.Format("{0:00}", (i + 1)));
                    GroupBox gb = createCalendar(mi);
                    CalendarContainer.Children.Add(gb);
                    gb.SetValue(Grid.ColumnProperty, x);
                    gb.SetValue(Grid.RowProperty, y);
                }
            }

            /// 
            /// 指定された年月のカレンダーを作成.
            /// 
            /// 
            private GroupBox createCalendar(MonthInfo monthInfo) {

                // グループボックス
                GroupBox calendarGroup = new GroupBox();
                calendarGroup.Header = monthInfo.YearMonthWithKanji;
                calendarGroup.Style = FindResource("gp-normal") as Style;

                // グリッド
                Grid calendarGrid = new Grid();
                setGridMatrix(calendarGrid, 7, 7);
                calendarGrid.Style = FindResource("grid-calendar") as Style;
                // 1行目のみ高さ固定とする
                calendarGrid.RowDefinitions.First().Height = new GridLength(20);

                // グリッド枠線
                Rectangle border = new Rectangle();
                border.Style = FindResource("rec-border") as Style;
                calendarGrid.Children.Add(border);

                for (int col = 0; col < 7; col++)
                {
                    Rectangle week = new Rectangle();
                    week.Style = (col == 6) ? FindResource("rec-week-sat") as Style : FindResource("rec-week") as Style;
                    week.SetValue(Grid.ColumnProperty, col);
                    calendarGrid.Children.Add(week);

                    Label lbWeek = new Label();
                    lbWeek.Style = FindResource("lb-week") as Style;
                    lbWeek.Content = ("日月火水木金土").Substring(col, 1);
                    lbWeek.SetValue(Grid.ColumnProperty, col);
                    calendarGrid.Children.Add(lbWeek);
                }

                // ヘッダ行下線
                Rectangle underlining = new Rectangle();
                underlining.Style = FindResource("rec-underlining") as Style;
                calendarGrid.Children.Add(underlining);

                // グループボックスにグリッドを追加
                calendarGroup.Content = calendarGrid;
                //CalendarContainer.Children.Add(calendarGroup);

                // 当月の月初を取得
                var firstDate = new DateTime(int.Parse(monthInfo.Year), int.Parse(monthInfo.Month), 1);

                // 曜日番号の取得
                int dayOfWeek = (int)firstDate.DayOfWeek;

                // 月末を取得
                int lastDay = firstDate.AddMonths(1).AddDays(-1).Day;

                // 1日から月末までを走査
                for (int day = 1; day <= lastDay; day++)
                {
                    // セル位置
                    int index = (day - 1) + dayOfWeek;
                    // 横位置
                    int x = index % 7;
                    // 縦位置
                    int y = index / 7;

                    // テキストブロックを生成してグリッドに追加
                    var tb = new TextBlock();
                    tb.Text = String.Format("{0}", day);
                    // 土日は文字色を変更する
                    if (x == 0)
                    {
                        tb.Style = FindResource("txb-date-sun") as Style;
                    }
                    else if (x == 6)
                    {
                        tb.Style = FindResource("txb-date-sat") as Style;
                    }
                    else
                    {
                        tb.Style = FindResource("txb-date") as Style;

                    }
                    calendarGrid.Children.Add(tb);
                    tb.SetValue(Grid.ColumnProperty, x);
                    tb.SetValue(Grid.RowProperty, y + 1);

                    // 四角形を生成してグリッドに追加
                    // セルの枠線などを表示し、イベントをハンドリングする用
                    var rec = new Rectangle();
                    DateInfo dt = new DateInfo(monthInfo.Year, monthInfo.Month, String.Format("{0:00}", day));
                    rec.DataContext = dt;
                    // 枠線を調整
                    rec.Style = (x == 6) ? FindResource("rec-date-sat") as Style : FindResource("rec-date") as Style;
                    // イベント設定
                    rec.MouseLeftButtonDown += date_MouseLeftButtonDown;
                    calendarGrid.Children.Add(rec);
                    rec.SetValue(Grid.ColumnProperty, x);
                    rec.SetValue(Grid.RowProperty, y + 1);
                }

                return calendarGroup;
            }

            /// 
            /// グリッドのマトリックスのひな形を設定
            /// 
            /// 
            /// 
            /// 
            private void setGridMatrix(Grid grid, int rowCount, int columnCount)
            {
                // 行のセット
                for (int i = 0; i < rowCount; i++)
                {
                    grid.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(1, GridUnitType.Star) });
                }

                // 列のセット
                for (int i = 0; i < columnCount; i++)
                {
                    grid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) });
                }
            }

            /// 
            /// セル（日）をクリックした際のイベントハンドラ.
            /// 
            /// 
            /// 
            private void date_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
            {
                // 既に選択されたセルがある場合はスタイルを戻す
                if (selectedRec != null)
                {
                    selectedRec.Style = selectedRecStyle;
                }

                // 選択されたセルの取得
                Rectangle rec = sender as Rectangle;

                // 選択セルの保持
                selectedRec = rec;
                selectedRecStyle = rec.Style;

                // 選択時のスタイルに変更
                rec.Style = FindResource("rec-date-selected") as Style;

                // ラベルに日付をセット
                lbSelectedDate.Content = (rec.DataContext as DateInfo).getYearMonthDayWithKanji();
            }
        }
    }

起動してみる

年月の時と同様、6年分のリストを作成しデフォルト表示を当年としました。

年を変更した際の表示です。

セルを選択するとちゃんと日付が表示されます。

少し分かりにくいですが、画面サイズを縮小した際の表示です。

こちらは分かりやすいですかね。

まとめ

ひとまず目標のところまで出来たので一旦完了とします。
（また何か思いついたら追加で実装するかもしれません。）

ではでは。

【WPF】自作カレンダー　その２（動的生成）

2019-06-19T09:36:38+09:00

自作カレンダーその２です。
今回は、Xamlではなくコードからカレンダーを生成します。

最終的に年間カレンダー的なものにしようと思うので、
Xamlで定義すると Grid だらけになってしまうし、色々やろうと思ったらやっぱり動的に生成した方がやりやすいような気がするので。

前回のプログラムはこちら。

【WPF】自作カレンダー　その１（とりあえず当月を表示）

スタイル定義の変更

まずはスタイルの外出しをします。

StyleDic.xaml

ポイントは、日付セルの上をマウスオーバーした際と、クリックして選択した際に背景色を変更するところですかね。

画面の変更

画面に年月を選択するコンボボックスと、選択された日付を表示するラベルを追加しました。
後はカレンダー用の Grid がなくなってすっきりしました。

MainWIndow.xaml

プログラム修正

新規クラス追加

新規で、年月コンボボックス用と、日付セル用のクラスを追加します。

MonthInfo.cs


using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace CalendarSample
{
    /// 
    /// 年月情報
    /// 
    public class MonthInfo
    {
        /// 
        /// コンストラクタ
        /// 
        /// 
        public MonthInfo(String yearMonth)
        {
            this.YearMonth = yearMonth;
            this.YearMonthWithKanji = getYear() + "年" + getMonth() + "月";
        }

        /// 
        /// 年月
        /// 
        public String YearMonth { set; get; }

        /// 
        /// 年月（YYYY年MM月）
        /// 
        public String YearMonthWithKanji { set; get; }

        /// 
        /// 年を返します.
        /// 
        /// 
        public String getYear()
        {
            if (String.IsNullOrEmpty(YearMonth)) return "";
            return YearMonth.Substring(0, 4);
        }

        /// 
        /// 月を返します.
        /// 
        /// 
        public String getMonth()
        {
            if (String.IsNullOrEmpty(YearMonth)) return "";
            return YearMonth.Substring(4, 2);
        }
    }
}

DateInfo.cs


using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace CalendarSample
{
    /// 
    /// 日付情報
    /// 
    public class DateInfo : MonthInfo
    {
        /// 
        /// コンストラクタ
        /// 
        /// 
        /// 
        public DateInfo(String yearMonth, String day) : base(yearMonth)
        {
            this.YearMonthDay = yearMonth + day;
            this.Date = new DateTime(int.Parse(getYear()), int.Parse(getMonth()), int.Parse(day));
        }

        public DateTime Date { set; get; }

        /// 
        /// 年月日
        /// 
        public String YearMonthDay { set; get; }

        /// 
        /// 年月日（YYYY年MM月DD日）
        /// 
        public String getYearMonthDayWithKanji()
        {
            return String.Format("{0:yyyy年MM月dd日（ddd）}", Date);
        }

        /// 
        /// 日を返します.
        /// 
        /// 
        public String getDay()
        {
            if (String.IsNullOrEmpty(YearMonthDay)) return "";
            return YearMonthDay.Substring(6, 2);
        }
    }
}

コードビハインドの修正

年月コンボボックスの項目設定と、カレンダーの生成メソッドを追加したりしました。

MainWindow.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

using MahApps.Metro.Controls;

namespace CalendarSample
{
    /// 
    /// MainWindow.xaml の相互作用ロジック
    /// 
    public partial class MainWindow : MetroWindow
    {
        private Rectangle selectedRec;
        private Style selectedRecStyle;

        public MainWindow()
        {
            InitializeComponent();

            // 前月から6カ月分のリストを作成し、当月を選択させる
            List list = new List();
            DateTime now = DateTime.Now;
            DateTime dt = now.AddMonths(-1);
            for (int i = 0; i < 6; i++ )
            {
                list.Add(new MonthInfo(String.Format("{0:yyyyMM}", dt)));
                dt = dt.AddMonths(1);
            }
            this.cbYearMonth.ItemsSource = list;
            this.cbYearMonth.DisplayMemberPath = "YearMonthWithKanji";
            this.cbYearMonth.SelectedIndex = 1;

            createCalendar(this.cbYearMonth.SelectedItem as MonthInfo);
        }

        /// 
        /// 年月コンボの選択変更イベントハンドラー.
        /// 
        /// 
        /// 
        private void cbYearMonth_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            createCalendar(cbYearMonth.SelectedItem as MonthInfo);
        }

        /// 
        /// 指定された年月のカレンダーを作成
        /// 
        /// 
        private void createCalendar(MonthInfo monthInfo) {

            CalendarContainer.Children.Clear();

            // グループボックス
            GroupBox calendarGroup1 = new GroupBox();
            calendarGroup1.Header = monthInfo.YearMonthWithKanji;
            calendarGroup1.Style = FindResource("gp-normal") as Style;

            // グリッド
            Grid calendarGrid1 = new Grid();
            calendarGrid1.Style = FindResource("grid-calendar") as Style;
            calendarGrid1.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) });
            calendarGrid1.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) });
            calendarGrid1.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) });
            calendarGrid1.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) });
            calendarGrid1.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) });
            calendarGrid1.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) });
            calendarGrid1.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) });
            calendarGrid1.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(20) });
            calendarGrid1.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(1, GridUnitType.Star) });
            calendarGrid1.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(1, GridUnitType.Star) });
            calendarGrid1.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(1, GridUnitType.Star) });
            calendarGrid1.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(1, GridUnitType.Star) });
            calendarGrid1.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(1, GridUnitType.Star) });

            // グリッド枠線
            Rectangle border = new Rectangle();
            border.Style = FindResource("rec-border") as Style;
            calendarGrid1.Children.Add(border);

            for (int col = 0; col < 7; col++)
            {
                Rectangle week = new Rectangle();
                week.Style = (col == 6) ? FindResource("rec-week-sat") as Style : FindResource("rec-week") as Style;
                week.SetValue(Grid.ColumnProperty, col);
                calendarGrid1.Children.Add(week);

                Label lbWeek = new Label();
                lbWeek.Style = FindResource("lb-week") as Style;
                lbWeek.Content = ("日月火水木金土").Substring(col, 1);
                lbWeek.SetValue(Grid.ColumnProperty, col);
                calendarGrid1.Children.Add(lbWeek);
            }

            // ヘッダ行下線
            Rectangle underlining = new Rectangle();
            underlining.Style = FindResource("rec-underlining") as Style;
            calendarGrid1.Children.Add(underlining);

            // グループボックスにグリッドを追加
            calendarGroup1.Content = calendarGrid1;
            CalendarContainer.Children.Add(calendarGroup1);

            // 当月の月初を取得
            var firstDate = new DateTime(int.Parse(monthInfo.getYear()), int.Parse(monthInfo.getMonth()), 1);

            // 曜日番号の取得
            int dayOfWeek = (int)firstDate.DayOfWeek;

            // 月末を取得
            int lastDay = firstDate.AddMonths(1).AddDays(-1).Day;

            // 1日から月末までを走査
            for (int day = 1; day <= lastDay; day++)
            {
                // セル位置
                int index = (day - 1) + dayOfWeek;
                // 横位置
                int x = index % 7;
                // 縦位置
                int y = index / 7;

                // テキストブロックを生成してグリッドに追加
                var tb = new TextBlock();
                tb.Text = string.Format("{0}", day);
                // 土日は文字色を変更する
                if (x == 0)
                {
                    tb.Style = FindResource("txb-date-sun") as Style;
                }
                else if (x == 6)
                {
                    tb.Style = FindResource("txb-date-sat") as Style;
                }
                else
                {
                    tb.Style = FindResource("txb-date") as Style;

                }
                calendarGrid1.Children.Add(tb);
                tb.SetValue(Grid.ColumnProperty, x);
                tb.SetValue(Grid.RowProperty, y + 1);

                // 四角形を生成してグリッドに追加
                // セルの枠線などを表示し、イベントをハンドリングする用
                var rec = new Rectangle();
                DateInfo dt = new DateInfo(monthInfo.YearMonth, string.Format("{0:00}", day));
                rec.DataContext = dt;
                // 枠線を調整
                rec.Style = (x == 6) ? FindResource("rec-date-sat") as Style : FindResource("rec-date") as Style;
                // イベント設定
                rec.MouseLeftButtonDown += date_MouseLeftButtonDown;
                calendarGrid1.Children.Add(rec);
                rec.SetValue(Grid.ColumnProperty, x);
                rec.SetValue(Grid.RowProperty, y + 1);
            }
        }

        /// 
        /// セル（日）をクリックした際のイベントハンドラ.
        /// 
        /// 
        /// 
        private void date_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            // 既に選択されたセルがある場合はスタイルを戻す
            if (selectedRec != null)
            {
                selectedRec.Style = selectedRecStyle;
            }

            // 選択されたセルの取得
            Rectangle rec = sender as Rectangle;

            // 選択セルの保持
            selectedRec = rec;
            selectedRecStyle = rec.Style;

            // 選択時のスタイルに変更
            rec.Style = FindResource("rec-date-selected") as Style;

            // ラベルに日付をセット
            lbSelectedDate.Content = (rec.DataContext as DateInfo).getYearMonthDayWithKanji();
        }
    }
}

起動してみる

起動後は当月を表示するようにしました。

日付を選択すると、選択箇所の背景色が変わり、選択された日付が右上に表示されます。

まとめ

なんとなく使えそうな気がしてきました。
バインディングなんかがうまく利用できていませんが、それは追々ということで。

次回は、年間カレンダーにしようかと思います。

ではでは。

【WPF】自作カレンダー　その１（とりあえず当月を表示）

2019-06-18T10:06:23+09:00

WPFには、カレンダーコントロールが標準であるんですが、
スケジューラ－みたいなことはできないし、あくまで選択された日付を取得するためのものになっています。

常に表示して、カレンダーに対してアクションするようなコントローラーも
需要はあると思うので、標準で使えるようにしてくれればいいのにと思いながらちょっと自作してみます。

今回は新規で専用にプロジェクトを作成します。

プロジェクト作成

VisualStudio2017を起動し、
新規プロジェクトを作成、名前を「CalendarSample」とします。

作成方法などは下記の記事を参考にしていただければ。
Visual Studio 2017 Community のインストールから Hello World

また、スタイルに「MahApps.Metro」を利用するので、
分からなければこちらの記事を参考にしてください。
【WPF】MahApps.Metro で見た目をスタイリッシュにしてみる

プログラム実装

スタイルの設定

App.xaml

MahApps.Metroのスタイル設定を記述します。

StyleDic.xaml

プロジェクト直下に「Style」ディレクトリを追加し、上記ファイルを作成します。

画面の作成

MainWindow.xaml

コードビハインドの実装

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

using MahApps.Metro.Controls;

namespace CalendarSample
{
    /// 
    /// MainWindow.xaml の相互作用ロジック
    /// 
    public partial class MainWindow : MetroWindow
    {
        private Rectangle selectedRec;

        public MainWindow()
        {
            InitializeComponent();

            CalendarGropu1.Header = String.Format("{0:yyyy年MM月}", DateTime.Now); 

            // 当月の月初を取得
            var firstDate = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 1);

            // 曜日番号の取得
            int dayOfWeek = (int)firstDate.DayOfWeek; 

            // 月末を取得
            int lastDay = firstDate.AddMonths(1).AddDays(-1).Day;

            // 1日から月末までを走査
            for (int day = 1; day <= lastDay; day++)
            {
                // セル位置
                int index = (day - 1) + dayOfWeek; 
                // 横位置
                int x = index % 7;
                // 縦位置
                int y = index / 7;

                // 土日は文字色を変更する
                Color color = Colors.Black;
                if (x == 0)
                {
                    color = Colors.Red;
                }
                else if (x == 6)
                {
                    color = Colors.Blue;
                }

                // テキストブロックを生成してグリッドに追加
                var tb = new TextBlock()
                {
                    Text = string.Format("{0}", day),
                    FontSize = 12,
                    Foreground = new SolidColorBrush(color),
                    Padding = new Thickness(0, 10, 10, 0),
                    HorizontalAlignment = HorizontalAlignment.Right,
                    VerticalAlignment = VerticalAlignment.Top
                };
                this.CalendarGrid.Children.Add(tb);
                tb.SetValue(Grid.ColumnProperty, x);
                tb.SetValue(Grid.RowProperty, y + 1);

                // 四角形を生成してグリッドに追加
                // セルの枠線などを表示し、イベントをハンドリングする用
                var rec = new Rectangle();
                rec.HorizontalAlignment = HorizontalAlignment.Stretch;
                rec.VerticalAlignment = VerticalAlignment.Stretch;
                // 背景色を設定しないとイベントを検知できないらしいので透過色を設定
                rec.Fill = Brushes.Transparent;
                // 枠線を調整
                rec.Margin = (x == 6) ? new Thickness(0.0, -1.0, 0.0, 0.0) : new Thickness(0.0, -1.0, -1.0, 0.0);
                // イベント設定
                rec.MouseLeftButtonDown += date_MouseLeftButtonDown;
                this.CalendarGrid.Children.Add(rec);
                rec.SetValue(Grid.ColumnProperty, x);
                rec.SetValue(Grid.RowProperty, y + 1);

            }
        }

        /// 
        /// セル（日）をクリックした際のイベントハンドラ.
        /// 
        /// 
        /// 
        void date_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            // 既に選択されたセルがある場合は初期化
            if (selectedRec != null)
            {
                selectedRec.StrokeDashArray = null;
                selectedRec.StrokeThickness = 0;
            }

            // 枠線に点線をセット
            Rectangle rec = sender as Rectangle;
            rec.Stroke = Brushes.Black;
            DoubleCollection dbc = new DoubleCollection();
            dbc.Add(1);
            dbc.Add(1);
            rec.StrokeDashArray = dbc;
            rec.StrokeThickness = 1;

            // 選択セルの保持
            selectedRec = rec;
        }
    }
}

ポイントは、
「Grid」を使い枠組みを作成してセルに日付用の「Rectangle」、「TextBlock」を配置することです。

起動してみる

日付セルをクリックすると、枠に点線が表示されるようにしました。

まとめ

今回はここまでとなります。

次回以降、このカレンダーを使って色々試してみたいと思います。

ではでは。

WPFで自作のカレンダーを作ってみるの投稿 - Crieit

【WPF】自作カレンダー その３（年間カレンダー）

【WPF】自作カレンダー その２（動的生成）

【WPF】自作カレンダー その１（とりあえず当月を表示）

【WPF】自作カレンダー　その３（年間カレンダー）

【WPF】自作カレンダー　その２（動的生成）

【WPF】自作カレンダー　その１（とりあえず当月を表示）