Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

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

フォームの作成

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

 今回は、前回の記事「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つのボタン

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

著者プロフィール

  • 瀬戸 遥(セト ハルカ)

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

バックナンバー

連載:ComponentZine(ComponentOne Studio)

もっと読む

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