Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

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

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

はじめに

 アプリケーションのユーザーインターフェースは、アプリケーションの顔であり機能の操作性でもあります。このUIの出来によっては、アプリケーションの評価が大きく変わるとも言えます。

 Microsoft Office2007で導入されたリボンインターフェースは、Windows標準のツールバーを大きく進化させたもので、その特徴はツールバーにタブページを組み込むことで、アプリケーションの操作体系をわかりやすいものにしながら、多くの機能をツールバー化することができる点だと思います。

 ComponentOne Studio 2012に含まれている「Ribbon for Windows Forms 2.0J」は、Microsoft Office 2007で導入された『リボンツールバー』を実装しているコンポーネントです。これを使用すると、Microsoft Officeユーザーインタフェースと同じルック&フィールを備えたアプリケーションを開発できます。

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

Accessデータをステップチャートで表示するアプリケーションにリボンインターフェースを組み込む
Accessデータをステップチャートで表示するアプリケーションにリボンインターフェイスを組み込む
リボンのボタンを押すとチャートの種類が変わる
リボンのボタンを押すとチャートの種類が変わる

対象読者

 Visual Basic、Visual C# 2010を使ってプログラムを作ったことのある人

必要な環境

 Visual Basic 2010、Visual C# 2010、Visual Studio 2010でプログラムが作れる環境。なお、本プログラムはWindows Vista上で動作するVisual Studio 2010を使用して作成し、動作確認を行っています。

※サンプルソース実行時の注意事項

 Ribbon for Windows Forms 2.0Jを使って作成したアプリケーションを配布する場合、Ribbon for Windows Forms 2.0Jのアセンブリファイルを添付する必要があります。これは、Common Language RuntimeのDLLをアプリケーションと一緒に配布するのと同じです。

 本記事のサンプルアプリケーションを正常に動作させるためには、次のファイルをインストールする必要があります。


インストールするファイル
ファイル名 説明
C1.Win.C1Ribbon.2.dll 本体アセンブリ
C1.Win.C1Ribbon.4.dll 本体アセンブリ(※.NET Framework 4/4 Client Profileでのみ使用可能)

 これらのファイルを、プログラムを実行するフォルダにフォルダ構成を変えずに格納します。.NET Framework 2.0から追加されたクラスやメンバを使用しているので、.NET Framework 2.0以上のバージョンの.NET Frameworkがインストールされていることが必須条件です。

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

 この記事の手順を試すには、Visual Studio、Visual Basic、Visual C#の開発環境にComponentOne Studio for Windows Forms 2010Jをインストールする必要があります。インストーラは、グレープシティのWebページからダウンロードできます。

 製品のトライアル版一覧ページにてダウンロードしたい製品にチェックを入れ、ページ右上部の[申込フォーム]をクリックしてグレープシティのWebサイトへ必要情報を登録すると、添付トライアルライセンスキーファイルとダウンロードサイトを記載したE-Mailが送られてきますので、ここからダウンロードします。制限事項などの詳細については、インストーラに同梱されているリリースノートを参照ください。

コントロールの追加

 インストール後、プロジェクトにツールボックスに専用のタブを作成し、使用するコントロールを追加します。追加するコントロールは、アセンブリ名が「C1.Win.C1Ribbon」の「C1Ribbon」「C1StatusBar」です。

アセンブリ名が「C1.Win.C1Ribbon」の「C1Ribbon」「C1StatusBar」コントロールを選択する
アセンブリ名が「C1.Win.C1Ribbon」の「C1Ribbon」「C1StatusBar」コントロールを選択する

 また、ツールボックスにコンポーネントを追加しただけでは、プロジェクトにコンポーネントを追加したことにはなりません。プロジェクトの参照設定へ次のDLLへの参照を組み込んでください。

  • Component One C1Ribbon JPN(C1.Win.C1Ribbon.2.dll)
  • Component One C1Ribbon JPN(C1.Win.C1Ribbon.4.dll/※.NET Framework 4の場合)
「Component One C1Ribbon JPN」をプロジェクトの参照に追加する
「Component One C1Ribbon JPN」をプロジェクトの参照に追加する

C1Ribbonコントロールについて

 Ribbon for Windows Forms 2.0Jは、Microsoft Office 2007で導入された 2007 Microsoft Office UI(リボン)を実装しています。C1Ribbonコントロールを使用すると、.NETアプリケーション開発者はMicrosoft Office 2007 ユーザーインタフェースと同じルック&フィールを備えたアプリケーションを構築できます。

C1Ribbonコントロールの主な機能

 リボンの目的は、アプリケーションの機能をわかりやすく表示し、各機能へのアクセスをすばやく簡単に見つけることができる、ユーザーフレンドリーなインターフェースを提供することです。

 リボンは、従来のメニュー、ツールバー、およびタスクペインに代わって画面上部の領域に表示されています。関連するコマンドはグループに分類され、さらに関連するグループがタブに分類されています。グループ内には、C1Ribbon専用のコントロールを組み込むことができ、ButtonやTextBox、ListBoxなどWindows標準のコントロールと同じ機能を備えています。

 また、Ribbon for Windows Forms 2.0Jから、C1Ribbon専用のもの以外のコントロールもリボンに追加して使用できるようになりました。さらに、C1RibbonコントロールとともにC1StatusBarコントロールを使用すると、ユーザーに操作中の情報を提供したり、スライドバーを使ったズーム機能なども可能になります。

リボンの実装方法

 リボンを実装するには、3つの方法があります。

  1. テンプレートからC1Ribbonフォームを作成する

     C1Ribbonコントロールを使用したアプリケーションを作成するための最も簡単な方法は、プロジェクトテンプレートを利用して、C1Ribbonアプリケーションプロジェクトを作成する方法です。この方法を使うと、リボンとステータスバーを備えたフォームが作成されます。この場合は、事前にVisual Studioにプロジェクトテンプレートを作成しておきます。

  2. 一部のWindowsフォームだけでC1Ribbonコントロールを使用する

     Windowsアプリケーションを作成してからリボンフォームを追加することもできます。この場合も、事前にVisual Studioにプロジェクトテンプレートを作成しておきます。

  3. Windowsフォームで作成した既存アプリケーションのUIを、C1Ribbonコントロールに置き換える

     アプリケーションコードを編集することでWindowsフォームをリボンフォームに変更します。Windowsフォームをリボンフォームに変更するには、「C1.Win.C1Ribbon.2.dll」または「C1.Win.C1Ribbon.4.dll」への参照設定をしておく必要があります。

Windowsフォームをリボンフォームに変更した場合と、テンプレートからリボンフォームを作成した場合の外観の違い(ヘルプファイルより抜粋)
Windowsフォームをリボンフォームに変更した場合と、テンプレートからリボンフォームを作成した場合の外観の違い(ヘルプファイルより抜粋)

C1Ribbonコントロールの各要素

 リボンインターフェースは、次の要素から構成されます。

リボンフォーム

 C1RibbonFormクラスによって描画され、C1Ribbon/C1StatusBarコントロールを表示するために設計された専用のフォームです。

アプリケーションボタン

 アプリケーションウィンドウの左上隅にある大きく丸いボタンです。このボタンがクリックされると、ドロップダウンメニュー(RibbonApplicationMenu)が表示されます。

クイックアクセスツールバー

 よく使うリボンアイテムを格納するユーザーがカスタマイズ可能なツールバーです。

設定ツールバー

 一般的に用いられるコマンドを格納するツールバーです。

リボンタブ

 関連するリボングループを分類して1画面上に表示します。

リボングループ

 リボンアイテムのグループをリボンタブ上に表示します。

リボンコンテナ

 他のリボンアイテムを格納できるリボンアイテムで、リボントグルグループとリボンツールバーがあります。

リボンアイテム

 リボンコンテナまたはグループに含まれる、リボン専用コントロールです。以下のものが用意されています。

  • ボタン
  • チェックボックス
  • カラーピッカー
  • コンボボックス
  • 編集ボックス(テキストボックスコントロール)
  • ギャラリー
  • フォントコンボボックス
  • ラベル
  • メニュー
  • 区切り記号
  • スプリットボタン
  • トグルボタン
リボンアイテム
リボンアイテム
ステータスバーアイテム

 ステータスバーの右または左ペインに含まれます。

リボンインターフェースの構成要素
リボンインターフェイスの構成要素

リボンフォームのデザイン方法

 C1Ribbonコントロールには、視覚的な編集機能を提供しリボンをより簡単に作成できるように、多くの専用エディタやツールバーなどの編集機能を持っています。

プロパティウィンドウ

 C1Ribbon/C1StatusBarのプロパティにアクセスするには、コントロールを右クリックして[プロパティ]を選択するか、[プロパティ]ウィンドウのドロップダウンボックスから該当するクラスを選択します。

スマートタグ

 スマートタグは、各コントロールの最もよく使うプロパティを提供するショートカットタスクメニューを表します。C1RibbonやC1StatusBarのタスクメニューを起動するには、コントロールの右上隅のスマートタグをクリックします。

コンテキストメニュー

 設計時に、C1RibbonコントロールやC1StatusBarコントロールのコンテキストメニューを使用して機能を追加できます。

コレクションエディタ

 C1Ribbonは、以下のコレクションエディタを提供します。

  • アプリケーションメニューのコレクションエディタ
  • クイックアクセスツールバーのコレクションエディタ
  • 設定ツールバーコレクションエディタ
  • タブコレクションエディタ
  • グループコレクションエディタ
  • グループアイテムコレクションエディタ
  • ギャラリーアイテムコレクションエディタ
  • ツールバーアイテムコレクションエディタ
  • トグルグループアイテムコレクションエディタ
  • メニューアイテムコレクションエディタ
  • スプリットボタンアイテムコレクションエディタ

 各エディタアプリケーションの主要部分は、ユーザーがリボンアイテムやステータスバーペインアイテムをタイムリーに編集できるWindowsフォームで構成されます。

スマートデザイナ

 スマートデザイナを使用し、パワフルかつ高度なリボンの作成を完全に制御できます。

インプレースのテキスト編集

 インプレース編集機能を使用し、リボン要素のラベルをすばやく編集できます。

デザイン時の各種編集機能
デザイン時の各種編集機能

フォームの作成

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

 今回は、前回の記事「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つグループに追加される
小さな画像が付いたボタンが1つグループに追加される

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

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

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

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

「画像の選択」リストを展開し[Chart]を選ぶ
「画像の選択」リストを展開し[Chart]を選ぶ
ボタンの画像が縦棒グラフに変わる
ボタンの画像が縦棒グラフに変わる

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

ボタン 画像
ribbonButton2 ChartBar
ribbonButton3 ChartLine
ribbonButton4 ColorGallery1
ribbonButton5 Undo
設定した5つのボタン
設定した5つのボタン

チャートタイプを変更する

 ここからは、ボタンを押すとグラフの種類を変更する処理を作成していきます。ボタンをダブルクリックした際、ボタンのイベントハンドラが作成されるので、その動作をここに記述します。

縦棒グラフ

 最初のボタンでは、縦棒グラフに変更する処理を作成します。まず、ChartGroupクラスのChartTypeプロパティの値を、Chart2DTypeEnum列挙体のメンバ「Bar」に設定します。

 そして、ChartAreaプロパティに設定するAreaクラスのInvertedプロパティをFalseにしておきます。

 このプロパティは、棒グラフを横棒にしたときなどXY軸を入れ替えるプロパティで、TrueでX軸とY軸のデータを入れ替えます。

 次のボタンで横棒グラフに変更する際に使用しますが、この縦棒グラフに戻すときは、X軸とY軸のデータを入れ替え直す必要があるので、InvertedプロパティをFalseにします。

Visual Basic
Private Sub RibbonButton1_Click(sender As System.Object, e As System.EventArgs) Handles RibbonButton1.Click
    C1Chart1.ChartGroups(0).ChartType = C1.Win.C1Chart.Chart2DTypeEnum.Bar
    C1Chart1.ChartArea.Inverted = False
End Sub
C#
private void ribbonButton1_Click(object sender, EventArgs e)
{
    c1Chart1.ChartGroups[0].ChartType = C1.Win.C1Chart.Chart2DTypeEnum.Bar;
    c1Chart1.ChartArea.Inverted = false;
}

 なお、このあとチャートタイプを入れ替えるのに、以下のChart2DTypeEnum列挙体のメンバを操作します。

Chart2DTypeEnum列挙体のメンバ
メンバ名 説明
XYPlot プロットグラフ
Pie 円グラフ
Bar 棒グラフ
Area エリアグラフ
Polar ポーラチャート
Radar レーダーチャート
Bubble バブルチャート
HiLo HiLoチャート
HiLoOpenClose HiLoOpenCloseチャート
Candle ローソク足チャート
Gantt ガントチャート
Step ステップチャート
Histogram ヒストグラム

横棒グラフ

 2番目のボタンは、横棒グラフに変更します。横棒グラフは、Chart2DTypeEnum列挙体のメンバはそのままで、InvertedプロパティをTrueにするだけです。

Visual Basic
Private Sub RibbonButton2_Click(sender As System.Object, e As System.EventArgs) Handles RibbonButton2.Click
    C1Chart1.ChartGroups(0).ChartType = C1.Win.C1Chart.Chart2DTypeEnum.Bar
    C1Chart1.ChartArea.Inverted = True
End Sub
C#
private void ribbonButton2_Click(object sender, EventArgs e)
{
    c1Chart1.ChartGroups[0].ChartType = C1.Win.C1Chart.Chart2DTypeEnum.Bar;
    c1Chart1.ChartArea.Inverted = true;
}

折れ線グラフ

 3つ目のボタンは、折れ線グラフに変更する処理を行います。

 折れ線グラフは、Chart2DTypeEnum列挙体のメンバ「XYPlot」を指定します。このままなら、そのまま折れ線グラフが設定されますが、「XYPlot」はシンボルのみの散布図の作成にも使われますので、明示的に線種を「Solid」に指定しておきます。

 また、横棒グラフから折れ線グラフに変更される場合もありますので、XY軸のデータを元に戻すためにInvertedプロパティをFalseに設定しておきます。

 ちなみに、ChartGroupsプロパティは複数のChartGroupがある場合に、どのChartGroupを操作するのかを指定するプロパティで、このC1Chartは1つのChartGroupしかありませんので、「ChartGroups(0)」と指定します。

 また、このチャートは2つのデータを使っていますので、それぞれのデータを結ぶ線はSeriesListプロパティで指定し個々に線種を設定します。

Visual Basic
Private Sub RibbonButton3_Click(sender As System.Object, e As System.EventArgs) Handles RibbonButton3.Click
    C1Chart1.ChartGroups(0).ChartType = C1.Win.C1Chart.Chart2DTypeEnum.XYPlot
    C1Chart1.ChartGroups(0).ChartData.SeriesList(0).LineStyle.Pattern = C1.Win.C1Chart.LinePatternEnum.Solid
    C1Chart1.ChartGroups(0).ChartData.SeriesList(1).LineStyle.Pattern = C1.Win.C1Chart.LinePatternEnum.Solid
    C1Chart1.ChartArea.Inverted = False
End Sub
C#
private void ribbonButton3_Click(object sender, EventArgs e)
{
    c1Chart1.ChartGroups[0].ChartType = C1.Win.C1Chart.Chart2DTypeEnum.XYPlot;
    c1Chart1.ChartGroups[0].ChartData.SeriesList[0].LineStyle.Pattern = C1.Win.C1Chart.LinePatternEnum.Solid;
    c1Chart1.ChartGroups[0].ChartData.SeriesList[1].LineStyle.Pattern = C1.Win.C1Chart.LinePatternEnum.Solid;
    c1Chart1.ChartArea.Inverted = false;
}

チャートを散布図に変更

 4番目のボタンは、チャートを散布図に変更します。散布図は「XYPlot」の線をなくし、シンボルだけにしたもにです。ですので、「LineStyle.Pattern」プロパティを「LinePatternEnum.None」に設定して線を消し、シンボルだけにします。

 ここでも横棒グラフから変更される場合を想定し、XY軸のデータを元に戻すためにInvertedプロパティをFalseに設定しておきます。

Visual Basic
Private Sub RibbonButton4_Click(sender As System.Object, e As System.EventArgs) Handles RibbonButton4.Click
    C1Chart1.ChartGroups(0).ChartType = C1.Win.C1Chart.Chart2DTypeEnum.XYPlot
    C1Chart1.ChartGroups(0).ChartData.SeriesList(0).LineStyle.Pattern = C1.Win.C1Chart.LinePatternEnum.None
    C1Chart1.ChartGroups(0).ChartData.SeriesList(1).LineStyle.Pattern = C1.Win.C1Chart.LinePatternEnum.None
    C1Chart1.ChartArea.Inverted = False
End Sub
    
C#
private void ribbonButton4_Click(object sender, EventArgs e)
{
    c1Chart1.ChartGroups[0].ChartType = C1.Win.C1Chart.Chart2DTypeEnum.XYPlot;
    c1Chart1.ChartGroups[0].ChartData.SeriesList[0].LineStyle.Pattern = C1.Win.C1Chart.LinePatternEnum.None;
    c1Chart1.ChartGroups[0].ChartData.SeriesList[1].LineStyle.Pattern = C1.Win.C1Chart.LinePatternEnum.None;
    c1Chart1.ChartArea.Inverted = false;
}

元のステップチャートに戻す

最後のボタンは、チャートを元のステップチャートに戻します。これは、Chart2DTypeEnum列挙体のメンバを「Step」にし、散布図から変更されることを想定して線を描画するようにします。

 なお、ここでも横棒グラフから変更される場合を想定し、XY軸のデータを元に戻すためにInvertedプロパティをFalseに設定しておきます。

Visual Basic
Private Sub RibbonButton5_Click(sender As System.Object, e As System.EventArgs) Handles RibbonButton5.Click
    C1Chart1.ChartGroups(0).ChartType = C1.Win.C1Chart.Chart2DTypeEnum.Step
    C1Chart1.ChartGroups(0).ChartData.SeriesList(0).LineStyle.Pattern = C1.Win.C1Chart.LinePatternEnum.Solid
    C1Chart1.ChartGroups(0).ChartData.SeriesList(1).LineStyle.Pattern = C1.Win.C1Chart.LinePatternEnum.Solid
    C1Chart1.ChartArea.Inverted = False
End Sub
C#
private void ribbonButton5_Click(object sender, EventArgs e)
{
    c1Chart1.ChartGroups[0].ChartType = C1.Win.C1Chart.Chart2DTypeEnum.Step;
    c1Chart1.ChartGroups[0].ChartData.SeriesList[0].LineStyle.Pattern = C1.Win.C1Chart.LinePatternEnum.Solid;
    c1Chart1.ChartGroups[0].ChartData.SeriesList[1].LineStyle.Pattern = C1.Win.C1Chart.LinePatternEnum.Solid;
    c1Chart1.ChartArea.Inverted = false;
}

 以上でできあがりです。

まとめ

 リボンインターフェースは、Microsoft Officeと同じルック&フィールの操作系をアプリケーションに組み込むことができます。今回はまず、その概要と基本的な専用コントロール(アクション)の使い方を紹介しました。

 次回からは、もう少し踏み込んだリボンの使い方を紹介していきます。

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

著者プロフィール

  • 瀬戸 遥(セト ハルカ)

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

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