CodeZine(コードジン)

特集ページ一覧

ガントチャート風スケジューラを持った.NETアプリケーションの作成

CalendarGrid for Windows Formsを活用したWindowsフォームアプリケーションの作成

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2014/08/28 14:00

 「CalendarGrid for Windows Forms」に含まれるGcCalendarGridコントロールが持つAppointment(アポイントメント)型セルを使って、ガントチャートのように予定をバーで表せるカレンダーアプリケーションを作成してみます。

はじめに

 前回の記事『業務アプリ開発で要求される複雑なカレンダー画面を、C#やVBで簡単に実装する』で紹介した、CalendarGrid for Windows FormsのGcCalendarGridコントロールは、これまでにないいろいろな形態のカレンダー/スケジューラを作成することができます。

 今回は、このGcCalendarGridコントロールが持つAppointment型セルを使い、ガントチャートのように予定をバーで表せるカレンダーを作成してみました。

開始日のセルをダブルクリックして予定を入力する
開始日のセルをダブルクリックして予定を入力する
終了日までドラッグすると日程のバーが設定できる
終了日までドラッグすると日程のバーが設定できる
バーの色も簡単に変更できる
バーの色も簡単に変更できる

対象読者

 Visual Basic 2010/2012/2013、またはVisual C# 2010/2012/2013を使ってプログラムを作ったことがある人。

必要な環境

 Visual Basic 2010/2012/2013、Visual C# 2010/2012/2013、Visual Studio 2010/2012/2013でプログラムが作れる環境。

 なお、本プログラムは次の環境で開発・動作確認を行っています。

  • OS:Windows 7
  • 開発Tool:Visual Studio 2010、.NET Framework 4

プログラム実行時の注意事項

 本稿の実行ファイル(バイナリファイル)を動かすには、zipファイルに同梱してある以下のファイルが必要になります(.NET Framework 4でのみ使用できます)。

ファイル名 説明
GrapeCity.Framework.CalendarGrid.v22.dll GrapeCity 共通フレームワーク
GrapeCity.Win.CalendarGrid.v10.dll グリッド コンポーネント

 また、「ja」というフォルダに以下のファイルを格納しています。

ファイル名 説明
GrapeCity.Framework.CalendarGrid.v22.resources.dll 日本語リソース
GrapeCity.Win.CalendarGrid.v10.resources.dll 日本語リソース

 これらのファイルを、フォルダ構成を変えずに実行プログラムと同じフォルダに格納します。

コンポーネントのインストール

 トライアル版は、グレープシティのWebページから申し込みできます。

 トライアル申込フォームが表示されますので、必要情報を入力して申し込むとトライアル版のダウンロード手順を記載したE-Mailが送られてきます。その手順にそってダウンロードを行ってください。また、ダウンロードファイルは圧縮ファイルになっていますので、解凍してインストーラを起動します。

 制限事項などの詳細については、インストーラに同梱されているリリースノートを参照ください。

コントロールと参照の追加

 CalendarGrid for Windows Formsをインストールしたら、プロジェクトにコントロールを追加します。

 ツールボックスに専用のタブを作成し、使用するコンポーネントを追加します。追加するコンポーネントは、アセンブリ名が「GrapeCity.Win.CalendarGrid.v10」の「GcCalendarGrid」コントロールです。

アセンブリ名がGrapeCity.Win.CalendarGrid.v10」の「GcCalendarGrid」コントロールを選択する
アセンブリ名がGrapeCity.Win.CalendarGrid.v10」の「GcCalendarGrid」コントロールを選択する

 このコントロールを追加すると、プロジェクトに以下のランタイムライブラリへの参照が追加されます。

ファイル 内容
GrapeCity.Framework.CalendarGrid.v22 本体アセンブリ
GrapeCity.Win.CalendarGrid.v10 本体アセンブリ

GcCalendarGridコントロールの概要

 GcCalendarGridコントロールの概要は、前回の記事で詳しく説明していますのでご参照ください。

Appointment型セルについて

 Appointment型セルは複数のセルにまたがって予定を設定する機能を提供します。Appointment型セルを使うと、ガントチャートのようにユーザーがマウス操作でバーの範囲を変更できる機能を実装できます。マウス操作のためのコーディングを行う必要はありません。

Appointment型セルの設定例(ヘルプより抜粋)
Appointment型セルの設定例(ヘルプより抜粋)

 アプリケーション実行時にAppointment型セルを使うには、次の操作を行います。

  1. 予定の始点となるセルをダブルクリックします。
  2. セルにバーが表示されますのでその中に予定を入力します。
  3. Enterキーを押下して編集を確定すると、バーの前後にハンドルが表示されますので、マウスでドラッグして予定の範囲を設定します。

 一度設定した予定に対して、上記の操作を繰り返すことで文字列の書き換えや予定の範囲の編集が可能です。

 なお、Appointment型セルには同じセルに複数のバーを表示することができないので、既に予定が定義されているセルに対して、新たな予定を追加したり、次のように隣り合ったセルにバーを広げることはできません。いちど既存の予定を移動してセルに空きを作ってから新たな予定を定義します。また、同じ日付に複数の予定を表示したい場合は、複数の行にAppointment型セルを設定して予定を定義することができます。

隣接するバーの場合(ヘルプより抜粋)
隣接するバーの場合(ヘルプより抜粋)

バーのスタイル設定

 Appointment型セルが提供するバーは、色や形を変更することができます。

バーの形状の変更

 バーの形を変更するには、AngleBracketShapeRendererオブジェクトのArrowLengthプロパティを使用します。ArrowLengthプロパティは五角形の矢印の長さを設定するので、この値を小さくするほど四角形に近いバーになります。

 設定は簡単で、デザイナで設定したいセルを選択し、CellType-Renderer-ArrowLengthプロパティの値を変更します。設定はセルごとに行えます。

セルの形状の設定
セルの形状の設定

バーの色と枠線の変更

 バーの色を変更するには、CalendarShapeRendererオブジェクトのFillColorプロパティを使用します。これも、デザイナで変更可能です。

 また、バーの枠線を変更するには、CalendarShapeRendererオブジェクトの次のプロパティを使用します。

プロパティ 内容
LineColor 枠線の色
LineStyle 枠線の形
LineWidth 枠線の太さ
バーの塗りつぶしと枠線の色の設定
バーの塗りつぶしと枠線の色の設定
バーの枠線の形の設定
バーの枠線の形の設定

GUIの作成

 では、実際にカレンダーを作成してみましょう。作成するカレンダーは、通常の月スタイルのカレンダーです。空白の3行のセルにAppointment型セルを設定し、色の選択ダイアログを配置して設定したバーの塗りつぶし色を変更できるようにします。

コントロールのレイアウト
コントロールのレイアウト

GcCalendarGridコントロールの作成

 今回は、曜日と日付のセル以外の、空白のセルにすべてバーが設定できるように、セルをAppointment型セルに変更します。

 (1)フォームにGcCalendarGridコントロールをドラッグ&ドロップし、Dockプロパティを「Fill」にします。

 (2)タスクトレイの「フラットスタイル」を「Popup」に変更します。これで、セルの塗りつぶしなどが変更できるようになります。

「フラットスタイル」を「Popup」に変更
「フラットスタイル」を「Popup」に変更

 (3)同じくタスクトレイから「デザイナ」を選びます。

タスクトレイから「デザイナ」を選ぶ
タスクトレイから「デザイナ」を選ぶ

 (4)5行目のセルには既定で六曜を表示する日付書式が設定されているので、Appointment型セルを使用するために既定の日付書式の設定を削除します。5行目のセルをクリックし、プロパティウィンドウで「DateFormat」の「{Rokuyou}」を削除します。

「DateFormat」の「{Rokuyou}」を削除
「FateFormat」の「{Rokuyou}」を削除

 (5)3行目から5行目のセルを選択し、CellTypeプロパティのリストから「AppointmentCellType」を選びます。3つのセルにバーが設定されます。

CellTypeプロパティのリストから「AppointmentCellType」を選ぶ
CellTypeプロパティのリストから「AppointmentCellType」を選ぶ

 (6)バーの形状や色、枠線の変更を行いたい場合は、解説にあるようにこのデザイナ上で行います。セルの設定が終わったら、メニューの「ファイル-適用して終了」をクリックし、デザイナを閉じます。

「ファイル-適用して終了」をクリック
「ファイル-適用して終了」をクリック

 (7) フォームに、ColorDialog、Button、Labelの各コントロールを配置します。Labelコントロールは、色のダイアログボックス選択ダイアログコントロールで選択した色を表示するのに使用します。Buttonコントロールは2つともClickイベントハンドラを作成しておきます。

フォームにColorDialog、Button、Labelの各コントロールを配置
フォームにColorDialog、Button、Labelの各コントロールを配置

 以上で出来上がりです。

バーの塗りつぶし色の変更処理

 アプリケーション実行時に、セルに設定したバーの塗りつぶし色を変更できる処理を組み込みます。

 (1)処理は、まず色の選択ダイアログを表示する処理を作成します。これは、ボタン「バーの色」のClickイベントハンドラに作成します。ダイアログで選択した色はLabelコントロールを塗りつぶして表示します。

Visual Basic
Imports GrapeCity.Win.CalendarGrid

Public Class Form1

    Private Sub Button1_Click(sender As System.Object, e As System.EventArgs) Handles Button1.Click

        If DialogResult.OK = ColorDialog1.ShowDialog() Then
            Label1.BackColor = ColorDialog1.Color
        End If
    End Sub
C#
using GrapeCity.Win.CalendarGrid;
namespace CalendarAppointment_Winform_cs
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void button1_Click(object sender, EventArgs e)
        {
            if (DialogResult.OK == colorDialog1.ShowDialog())
            {
                label1.BackColor = colorDialog1.Color;
            }
        }

 (2)次に、ダイアログで選択した色をバーに反映する処理を作成します。これは、「決定」ボタンのClickイベントハンドラに作成します。

 バーの色を変更するには、まずAngleBracketShapeRendererクラスのインスタンスを作成し、FillColorプロパティの値をダイアログで選択された色に変更します。

 次に、CalendarAppointmentCellTypeのインスタンスを作成し、このRendererプロパティにAngleBracketShapeRendererクラスのインスタンスを設定します。

Visual Basic
Private Sub Button2_Click(sender As System.Object, e As System.EventArgs) Handles Button2.Click
    Dim c As Color

    c = ColorDialog1.Color
    Dim absr As New AngleBracketShapeRenderer()
    absr.FillColor = c

    Dim appointmentCellType As New CalendarAppointmentCellType()
    appointmentCellType.Renderer = absr
C#
private void button2_Click(object sender, EventArgs e)
{
    Color c;

    c = colorDialog1.Color;
    AngleBracketShapeRenderer absr = new AngleBracketShapeRenderer();
    absr.FillColor = c;

    CalendarAppointmentCellType appointmentCellType = new CalendarAppointmentCellType();
    appointmentCellType.Renderer = absr;

 (3)作成したCalendarAppointmentCellTypeのインスタンスをバーに設定しますが、その前に現在選択されているバーの開始セルの位置を把握します。

 これは、GcCalendarGridクラスのCurrentCellPositionオブジェクトの、Dateプロパティを参照することでセルの日付を、ColumnIndexプロパティで列番号を、RowIndexプロパティで行番号を取得します。

Visual Basic
Dim d As System.DateTime = GcCalendarGrid1.CurrentCellPosition.Date
Dim clm As Integer = GcCalendarGrid1.CurrentCellPosition.ColumnIndex
Dim rw As Integer = GcCalendarGrid1.CurrentCellPosition.RowIndex
C#
System.DateTime d = gcCalendarGrid1.CurrentCellPosition.Date;
int clm = gcCalendarGrid1.CurrentCellPosition.ColumnIndex;
int rw = gcCalendarGrid1.CurrentCellPosition.RowIndex;

 (4)そして、この3つのデータを使ってバーの開始位置のセルにあるバーの、CellTypeプロパティに作成したCalendarAppointmentCellTypeオブジェクトのCloneメソッドを実行してコピーを代入します。このときは曜日と日付以外の行のセルに設定するようにしておきます。

Visual Basic
    If rw > 0 Then
        GcCalendarGrid1.Content(d).Rows(rw).Cells(clm).CellType = appointmentCellType.Clone()
    End If
End Sub
C#
    if (rw > 0)
    {
        gcCalendarGrid1.Content[d].Rows[rw].Cells[clm].CellType = appointmentCellType.Clone();
    }
}

 (5)以上で出来上がりです。セルに設定したバーの色は個々に変更することができます。

セルに設定したバーの色は個々に変更することができる
セルに設定したバーの色は個々に変更することができる

まとめ

 このようにGcCalendarGridコントロールは、グレープシティの他のコンポーネントと同様に、ほとんどコーディングをすることなく多彩なコンポーネントの機能を自作のアプリケーションに実装することができます。

 バーを使ったスケジューラの作成も簡単に行えますから、業務用アプリケーションの機能の一つとして取り入れてはいかがでしょうか。

  • LINEで送る
  • このエントリーをはてなブックマークに追加

修正履歴

  • 2014/08/20 22:12 誤字を修正 瀬戸

著者プロフィール

  • 瀬戸 遥(セト ハルカ)

    8ビットコンピュータの時代からBASICを使い、C言語を独習で学びWindows 3.1のフリーソフトを作成、NiftyServeのフォーラムなどで配布。Excel VBAとVisual Basic関連の解説書を中心に現在まで40冊以上の書籍を出版。近著に、「ExcelユーザーのためのAccess再...

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5