リボンインターフェースでチャート表示を切り替える.NETアプリケーションの作成

Ribbon for Windows Forms 2.0JのC1Ribbonコントロールを使ったアプリケーションの作成

フォームの作成

　では、さっそくプログラムを作成します。

　今回は、前回の記事「Accessのデータをステップチャートで表示する.NETアプリケーションの作成」で作成したアプリケーションにリボンインターフェースを組み込み、ボタンでグラフの種類を変更できる機能をつけてみましょう。

　リボンの実装方法としては、Windowsフォームで作成した既存アプリケーションのUIを、C1Ribbonコントロールに置き換える方法をとります。

GUIのデザイン

　フォームは、前回作成したWindowsフォームをリボンフォームに変更し、C1Ribbonコントロールを追加しています。

フォームのレイアウト

Windowsフォームをリボンフォームに変更する

　まず最初に、前回のプロジェクトを開きWindowsフォームをリボンフォームに変換します。そして、ツールボックスからC1Ribbonコントロールを選び、フォームに配置します。

　なお、この操作の前にプロジェクトの参照設定に「C1.Win.C1Ribbon.2.dll」または「C1.Win.C1Ribbon.4.dll」への参照を追加しておきます。

　ソリューションエクスプローラで［参照設定］-［参照の追加］を選び、［.NET］から次の参照を追加します。

• Component One C1Ribbon JPN（C1.Win.C1Ribbon.2.dll）
• Component One C1Ribbon JPN（C1.Win.C1Ribbon.4.dll／※.NET Framework 4の場合）

参照を追加する

　次に、Windowsフォームをリボンフォームに変換します。コードウィンドウを開き［Form1.Designer.vb］または［Form1.Designer.cs］を開き、次のコードを変更します。

『変更前』Visual Basic

Partial Class Form1
Inherits System.Windows.Forms.Form
'...
End Class

　▼

『変更後』Visual Basic

Partial Class Form1
Inherits C1.Win.C1Ribbon.C1RibbonForm
'...
End Class

『変更前』C#

partial class Form1 {
//...
}

　▼

『変更後』C#

partial class Form1 : C1.Win.C1Ribbon.C1RibbonForm {
//...
}

　また、C#のみ「Form1.cs」の次のコードも修正します。

『変更前』C#

namespace C1Chart_Step_cs
{
    public partial class Form1 : Form1

　▼

『変更後』C#

namespace C1Chart_Step_cs
{
    public partial class Form1 : C1.Win.C1Ribbon.C1RibbonForm 

　フォームデザイナに戻り、ツールボックスからC1Ribbonコントロールをフォームにドラッグ＆ドロップします。これで、フォームの上部にリボンインターフェースが追加されます。

　リボンは、デフォルトで1つのタブと1つのグループを持っています。タブには「Tab」と、グループには「Group」という文字列が記述されているので、この2つの文字列をインライン編集でタブは「グラフ」に、グループは「グラフの種類」に変更します。

　インライン編集を行うには、グループをクリックしてアクティブにしてから文字列をクリックします。

インライン編集で文字列を変更する

　

リボンインターフェースを持ったフォームになる

グループにボタンを組み込む

　続いて、グループのフローティングツールバーを使用し、リボンのグループにボタンの画像を組み込みます。

　グループをクリックしてアクティブにし、タイトル文字の「グラフの種類」にマウスポインタを重ねると、自動的にフローティングツールバーが表示されるので、［アクション］をクリックします。

［アクション］をクリック

　使用可能な専用コントロールが表示されるので、ここから［ボタンの追加］を選びます。小さな画像が付いたボタンが1つ、グループに追加されます。

「ボタンの追加」を選ぶ

小さな画像が付いたボタンが1つグループに追加される

　今度は今挿入したボタンをクリックします。ボタン用のフローティングツールバーが表示されるため［テキストの設定］をクリックしてテキスト編集ボックスを表示し、「Button」という文字を削除します。

テキストボックスで「Button」という文字を削除する

　もう一度ボタン用のフローティングツールバーを表示し、「画像の変更」を選びます。画像設定エディタが開いたら「大画像」の「画像の選択」リストを展開し［Chart］を選びます。これで、ボタンの画像が縦棒グラフに変わります。

　C1Ribbonコントロールでは、このようにアイコン画像が沢山用意されています。

「画像の選択」リストを展開し［Chart］を選ぶ

ボタンの画像が縦棒グラフに変わる

　ここまでの手順を繰り返し、以下の4種類のボタン画像も追加します。

ボタン	画像
ribbonButton2	ChartBar
ribbonButton3	ChartLine
ribbonButton4	ColorGallery1
ribbonButton5	Undo

設定した5つのボタン