GrapeCity CalendarGrid for Windows Forms 2.0J
スピンボタンの最適化

ここでは、タッチデバイスで操作しやすいようにInputManCellのサイドボタンやシンボルボタンにスピン機能を割り当て、タッチ操作に最適化したスピン機能を実装する方法について解説します。

注意 
この機能はタッチ操作だけでなく、マウスやキーボードによる操作でも利用できます。


セルのスピン機能

一部のInputManCellで使用可能なスピン機能は、サイドボタンにSpinButton(スピンボタン)を追加することで実現可能ですが、スピンボタンはマウスによる操作を前提としたボタンの大きさや配置となっており、タッチ操作には適していません。


(図)スピンボタン

InputManCellでは、SideButton(サイドボタン)やSymbolButton(シンボルボタン)を使用して、タッチ操作しやすいボタンをカスタマイズする機能を提供します。サイドボタンやシンボルボタンを使用すると、タッチしやすいボタンの大きさを提供でき、またボタンを水平に隣接したり、セルの両端に配置することも可能です。

これらのボタンにスピン機能を設定する手順は以下のとおりです。

  1. セルにサイドボタンあるいはシンボルボタンを2つ追加します。
  2. 各ボタンにスピン機能を割り当てます。一つのボタンにはスピンアップ機能を、もう一つにはスピンダウン機能を設定します。
  3. 必要に応じて、Positionプロパティによりボタンの配置を設定します。
  4. 必要に応じて、ボタンに表示するテキストやシンボル、あるいは画像などを設定します。

各ボタンの詳細な設定については、次項以降を参照してください。


(図)スピン機能を割り当てたサイドボタンの例


(図)スピン機能を割り当てたシンボルボタンの例

各セルのスピン機能やサイドボタンの詳細については、それぞれ下記のページを参照してください。


サイドボタンを利用する

ボタンに「+」「−」といった任意のテキストや画像を設定したい場合は、SideButton(サイドボタン)を使用します。サイドボタンにスピン機能を割り当てるには、Behaviorプロパティを使用します。また、Behaviorプロパティに設定した値により、IntervalプロパティとTextプロパティの初期値が自動的に変更されます。

Behaviorプロパティに設定可能な値は以下の通りです。


Behaviorの値 説明 Intervalプロパティの初期値 Textプロパティの初期値

None

スピン動作を割り当てません。

0

なし

SpinUp

スピンアップ(値を増加)の動作を割り当てます。

60

"+"

SpinDown

スピンダウン(値を減少)の動作を割り当てます。

60

"-"

以下のサンプルコードは、GcNumberCellにスピン機能を割り当てたサイドボタンを追加する例です。セルの左端にスピンダウン機能を持つボタン、右端にスピンアップ機能を持つボタンを設定します。

Imports InputManCell = GrapeCity.Win.CalendarGrid.InputMan

Dim today As DateTime = DateTime.Today
Dim GcNumberCellType As New InputManCell.CalendarGcNumberCellType()

' セルのサイドボタンをクリアします。
GcNumberCellType.SideButtons.Clear()

' スピンダウン機能を持つサイドボタンを設定します。
Dim DownButton = New InputManCell.SideButton()
DownButton.Behavior = GrapeCity.Win.CalendarGrid.InputMan.SideButtonBehavior.SpinDown
DownButton.Position = LeftRightAlignment.Left

' セルにサイドボタンを追加します。
GcNumberCellType.SideButtons.Add(DownButton)

' スピンアップ機能を持つサイドボタンを設定します。
Dim UpButton = New InputManCell.SideButton()
UpButton.Behavior = GrapeCity.Win.CalendarGrid.InputMan.SideButtonBehavior.SpinUp

' セルにサイドボタンを追加します。
GcNumberCellType.SideButtons.Add(UpButton)

GcCalendarGrid1.Content(today).Rows(1).Cells(0).CellType = GcNumberCellType
GcCalendarGrid1.ScrollIntoView(today)
using InputManCell = GrapeCity.Win.CalendarGrid.InputMan;

var today = DateTime.Today;
var gcNumberCellType = new InputManCell.CalendarGcNumberCellType();

// セルのサイドボタンをクリアします。
gcNumberCellType.SideButtons.Clear();

// スピンダウン機能を持つサイドボタンを設定します。
InputManCell.SideButton DownButton = new InputManCell.SideButton();
DownButton.Behavior = InputManCell.SideButtonBehavior.SpinDown;
DownButton.Position = LeftRightAlignment.Left;

// セルにサイドボタンを追加します。
gcNumberCellType.SideButtons.Add(DownButton);

// スピンアップ機能を持つサイドボタンを設定します。
InputManCell.SideButton UpButton = new InputManCell.SideButton();
UpButton.Behavior = InputManCell.SideButtonBehavior.SpinUp;

// セルにサイドボタンを追加します。
gcNumberCellType.SideButtons.Add(UpButton);

gcCalendarGrid1.Content[today].Rows[1].Cells[0].CellType = gcNumberCellType;
gcCalendarGrid1.ScrollIntoView(today);


(図)上記サンプルコードの実行結果


スピンボタンをシンボルボタンで置き換える

ボタンに提供されたイメージを設定したい場合は、SymbolButton(シンボルボタン)を使用します。シンボルボタンにスピン機能を割り当てるには、Behaviorプロパティを使用します。また、Behaviorプロパティに設定した値により、Intervalプロパティ、SymbolプロパティおよびSymbolDirectionプロパティの初期値が自動的に変更されます。

Behaviorプロパティに設定可能な値は以下の通りです。


Behaviorの値 説明 Intervalプロパティの初期値 Symbolプロパティの初期値 SymbolDirectionプロパティの初期値

None

スピン動作を割り当てません。

0

None

Left

SpinUp

スピンアップ(値を増加)の動作を割り当てます。

60

Arrow

Up

SpinDown

スピンダウン(値を減少)の動作を割り当てます。

60

Arrow

Down

以下のサンプルコードは、日付コントロールにスピン機能を割り当てたシンボルボタンで実装する例です。コントロールの左端にスピンダウン機能を持つボタン、右端にスピンアップ機能を持つボタンを設定します。

Imports InputManCell = GrapeCity.Win.CalendarGrid.InputMan

Dim today As DateTime = DateTime.Today
Dim GcDateTimeCellType As New InputManCell.CalendarGcDateTimeCellType()

' セルのサイドボタンをクリアします。
GcDateTimeCellType.SideButtons.Clear()

' スピンダウン機能を持つシンボルボタンを設定します。
Dim DownButton As New InputManCell.SymbolButton()
DownButton.Behavior = GrapeCity.Win.CalendarGrid.InputMan.SideButtonBehavior.SpinDown
DownButton.Position = LeftRightAlignment.Left

' セルにシンボルボタンを追加します。
GcDateTimeCellType.SideButtons.Add(DownButton)

' スピンアップ機能を持つシンボルボタンを設定します。
Dim UpButton As New InputManCell.SymbolButton()
UpButton.Behavior = GrapeCity.Win.CalendarGrid.InputMan.SideButtonBehavior.SpinUp

' セルにシンボルボタンを追加します。
GcDateTimeCellType.SideButtons.Add(UpButton)

GcCalendarGrid1.Content(today).Rows(1).Cells(0).CellType = GcDateTimeCellType
GcCalendarGrid1.ScrollIntoView(today)
using InputManCell = GrapeCity.Win.CalendarGrid.InputMan;

var today = DateTime.Today;
var gcDateTimeCellType = new InputManCell.CalendarGcDateTimeCellType();

// セルのサイドボタンをクリアします。
gcDateTimeCellType.SideButtons.Clear();

// スピンダウン機能を持つシンボルボタンを設定します。
InputManCell.SymbolButton DownButton = new InputManCell.SymbolButton();
DownButton.Behavior = InputManCell.SideButtonBehavior.SpinDown;
DownButton.Position = LeftRightAlignment.Left;

// セルにシンボルボタンを追加します。
gcDateTimeCellType.SideButtons.Add(DownButton);

// スピンアップ機能を持つシンボルボタンを設定します。
InputManCell.SymbolButton UpButton = new InputManCell.SymbolButton();
UpButton.Behavior = InputManCell.SideButtonBehavior.SpinUp;

// セルにシンボルボタンを追加します。
gcDateTimeCellType.SideButtons.Add(UpButton);

gcCalendarGrid1.Content[today].Rows[1].Cells[0].CellType = gcDateTimeCellType;
gcCalendarGrid1.ScrollIntoView(today);


(図)上記サンプルコードの実行結果


参照

 

 


© 2008 GrapeCity inc. All rights reserved.