KB)今回は、前回の記事「Accessのデータをステップチャートで表示する.NETアプリケーションの作成」で作成したアプリにリボンインターフェースを組み込み、ボタン一つでグラフの種類を変更できるような便利なアプリへと機能を追加してみましょう。はじめにアプリケーションのユーザーインターフェースは、アプリケーションの顔であり機能の操作性でもあります。このUIの出来によっては、アプリケーションの評価が大きく変わるとも言えます。Office2007で導入されたリボンインターフェースは、Windows標準のツールバーを大きく進化させたもので、その特徴はツールバーにタブページを組み込むことで、アプリケーションの操作体系をわかりやすいものにしながら、多くの機能をツールバー化することができる点だと思います。2007で導入された『リボンツールバー』を実装しているコンポーネントです。Officeユーザーインタフェースと同じルック&フィールを備えたアプリケーションを開発できます。そこで今回は、前回の記事「Accessのデータをステップチャートで表示する.NETアプリケーションの作成」で作成したアプリケーションにリボンインターフェースを組み込み、ボタンでグラフの種類を変更できるようにしてみました。2010でプログラムが作れる環境。2010を使用して作成し、動作確認を行っています。2.0Jのアセンブリファイルを添付する必要があります。RuntimeのDLLをアプリケーションと一緒に配布するのと同じです。本記事のサンプルアプリケーションを正常に動作させるためには、次のファイルをインストールする必要があります。Profileでのみ使用可能)これらのファイルを、プログラムを実行するフォルダにフォルダ構成を変えずに格納します。Frameworkがインストールされていることが必須条件です。2010Jをインストールする必要があります。インストーラは、グレープシティのWebページからダウンロードできます。製品のトライアル版一覧ページにてダウンロードしたい製品にチェックを入れ、ページ右上部の[申込フォーム]をクリックしてグレープシティのWebサイトへ必要情報を登録すると、添付トライアルライセンスキーファイルとダウンロードサイトを記載したE-Mailが送られてきますので、ここからダウンロードします。制限事項などの詳細については、インストーラに同梱されているリリースノートを参照ください。コントロールの追加インストール後、プロジェクトにツールボックスに専用のタブを作成し、使用するコントロールを追加します。追加するコントロールは、アセンブリ名が「C1.Win.C1Ribbon」の「C1Ribbon」「C1StatusBar」です。アセンブリ名が「C1.Win.C1Ribbon」の「C1Ribbon」「C1StatusBar」コントロールを選択するまた、ツールボックスにコンポーネントを追加しただけでは、プロジェクトにコンポーネントを追加したことにはなりません。プロジェクトの参照設定へ次のDLLへの参照を組み込んでください。UI(リボン)を実装しています。ユーザーインタフェースと同じルック&フィールを備えたアプリケーションを構築できます。C1Ribbonコントロールの主な機能リボンの目的は、アプリケーションの機能をわかりやすく表示し、各機能へのアクセスをすばやく簡単に見つけることができる、ユーザーフレンドリーなインターフェースを提供することです。リボンは、従来のメニュー、ツールバー、およびタスクペインに代わって画面上部の領域に表示されています。関連するコマンドはグループに分類され、さらに関連するグループがタブに分類されています。グループ内には、C1Ribbon専用のコントロールを組み込むことができ、ButtonやTextBox、ListBoxなどWindows標準のコントロールと同じ機能を備えています。2.0Jから、C1Ribbon専用のもの以外のコントロールもリボンに追加して使用できるようになりました。C1RibbonコントロールとともにC1StatusBarコントロールを使用すると、ユーザーに操作中の情報を提供したり、スライドバーを使ったズーム機能なども可能になります。リボンの実装方法リボンを実装するには、3つの方法があります。テンプレートからC1Ribbonフォームを作成するC1Ribbonコントロールを使用したアプリケーションを作成するための最も簡単な方法は、プロジェクトテンプレートを利用して、C1Ribbonアプリケーションプロジェクトを作成する方法です。この方法を使うと、リボンとステータスバーを備えたフォームが作成されます。Studioにプロジェクトテンプレートを作成しておきます。一部のWindowsフォームだけでC1Ribbonコントロールを使用するWindowsアプリケーションを作成してからリボンフォームを追加することもできます。Studioにプロジェクトテンプレートを作成しておきます。Windowsフォームで作成した既存アプリケーションのUIを、C1Ribbonコントロールに置き換えるアプリケーションコードを編集することでWindowsフォームをリボンフォームに変更します。Windowsフォームをリボンフォームに変更するには、「C1.Win.C1Ribbon.2.dll」または「C1.Win.C1Ribbon.4.dll」への参照設定をしておく必要があります。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]から次の参照を追加します。4の場合)参照を追加する次に、Windowsフォームをリボンフォームに変換します。コードウィンドウを開き[Form1.Designer.vb]または[Form1.Designer.cs]を開き、次のコードを変更します。{//...}また、C#のみ「Form1.cs」の次のコードも修正します。フォームデザイナに戻り、ツールボックスからC1Ribbonコントロールをフォームにドラッグ&ドロップします。これで、フォームの上部にリボンインターフェースが追加されます。リボンは、デフォルトで1つのタブと1つのグループを持っています。タブには「Tab」と、グループには「Group」という文字列が記述されているので、この2つの文字列をインライン編集でタブは「グラフ」に、グループは「グラフの種類」に変更します。インライン編集を行うには、グループをクリックしてアクティブにしてから文字列をクリックします。インライン編集で文字列を変更するリボンインターフェースを持ったフォームになるグループにボタンを組み込む続いて、グループのフローティングツールバーを使用し、リボンのグループにボタンの画像を組み込みます。グループをクリックしてアクティブにし、タイトル文字の「グラフの種類」にマウスポインタを重ねると、自動的にフローティングツールバーが表示されるので、[アクション]をクリックします。[アクション]をクリック使用可能な専用コントロールが表示されるので、ここから[ボタンの追加]を選びます。小さな画像が付いたボタンが1つ、グループに追加されます。「ボタンの追加」を選ぶ小さな画像が付いたボタンが1つグループに追加される今度は今挿入したボタンをクリックします。ボタン用のフローティングツールバーが表示されるため[テキストの設定]をクリックしてテキスト編集ボックスを表示し、「Button」という文字を削除します。テキストボックスで「Button」という文字を削除するもう一度ボタン用のフローティングツールバーを表示し、「画像の変更」を選びます。画像設定エディタが開いたら「大画像」の「画像の選択」リストを展開し[Chart]を選びます。これで、ボタンの画像が縦棒グラフに変わります。C1Ribbonコントロールでは、このようにアイコン画像が沢山用意されています。「画像の選択」リストを展開し[Chart]を選ぶボタンの画像が縦棒グラフに変わるここまでの手順を繰り返し、以下の4種類のボタン画像も追加します。Undo設定した5つのボタンチャートタイプを変更するここからは、ボタンを押すとグラフの種類を変更する処理を作成していきます。ボタンをダブルクリックした際、ボタンのイベントハンドラが作成されるので、その動作をここに記述します。縦棒グラフ最初のボタンでは、縦棒グラフに変更する処理を作成します。ChartGroupクラスのChartTypeプロパティの値を、Chart2DTypeEnum列挙体のメンバ「Bar」に設定します。ChartAreaプロパティに設定するAreaクラスのInvertedプロパティをFalseにしておきます。このプロパティは、棒グラフを横棒にしたときなどXY軸を入れ替えるプロパティで、TrueでX軸とY軸のデータを入れ替えます。次のボタンで横棒グラフに変更する際に使用しますが、この縦棒グラフに戻すときは、X軸とY軸のデータを入れ替え直す必要があるので、InvertedプロパティをFalseにします。false;}なお、このあとチャートタイプを入れ替えるのに、以下のChart2DTypeEnum列挙体のメンバを操作します。ヒストグラム横棒グラフ2番目のボタンは、横棒グラフに変更します。横棒グラフは、Chart2DTypeEnum列挙体のメンバはそのままで、InvertedプロパティをTrueにするだけです。true;}折れ線グラフ3つ目のボタンは、折れ線グラフに変更する処理を行います。折れ線グラフは、Chart2DTypeEnum列挙体のメンバ「XYPlot」を指定します。このままなら、そのまま折れ線グラフが設定されますが、「XYPlot」はシンボルのみの散布図の作成にも使われますので、明示的に線種を「Solid」に指定しておきます。横棒グラフから折れ線グラフに変更される場合もありますので、XY軸のデータを元に戻すためにInvertedプロパティをFalseに設定しておきます。ちなみに、ChartGroupsプロパティは複数のChartGroupがある場合に、どのChartGroupを操作するのかを指定するプロパティで、このC1Chartは1つのChartGroupしかありませんので、「ChartGroups(0)」と指定します。このチャートは2つのデータを使っていますので、それぞれのデータを結ぶ線はSeriesListプロパティで指定し個々に線種を設定します。false;}チャートを散布図に変更4番目のボタンは、チャートを散布図に変更します。散布図は「XYPlot」の線をなくし、シンボルだけにしたもにです。「LineStyle.Pattern」プロパティを「LinePatternEnum.None」に設定して線を消し、シンボルだけにします。ここでも横棒グラフから変更される場合を想定し、XY軸のデータを元に戻すためにInvertedプロパティをFalseに設定しておきます。false;}元のステップチャートに戻す最後のボタンは、チャートを元のステップチャートに戻します。これは、Chart2DTypeEnum列挙体のメンバを「Step」にし、散布図から変更されることを想定して線を描画するようにします。ここでも横棒グラフから変更される場合を想定し、XY軸のデータを元に戻すためにInvertedプロパティをFalseに設定しておきます。false;}以上でできあがりです。Officeと同じルック&フィールの操作系をアプリケーションに組み込むことができます。今回はまず、その概要と基本的な専用コントロール(アクション)の使い方を紹介しました。次回からは、もう少し踏み込んだリボンの使い方を紹介していきます。3.1のフリーソフトを作成、NiftyServeのフォーラムなどで配布。Basic関連の解説書を中心に現在まで40冊以上の書籍を出版。圧縮・解凍UNIX基本講座@CodeZine『CodeZine(コードジン)』の公式アカウントです。【NEW】デブスト2019デブサミ2019福岡・関西デブサミ2019夏デブスト関西デブサミ2019×ログインEメールパスワード※旧SEメンバーシップ会員の方は、同じ登録情報(Eメール&パスワード)でログインいただけます。イラストの無断転載を禁じます。記載されているロゴ、システム名、製品名は各社及び商標権者の登録商標あるいは商標です。