マウスの右クリックでメニューを表示する

2010年6月8日(火)
PROJECT KySS

マウス・イベントとクリップボード・アクセスの新機能を使う

第1回では、Silverlight4の概要および開発環境の構築手順について解説しました。

第2回の今回からは、実際にサンプルを作成しながら、Silverlight 4の新機能を紹介していきます。

なお、筆者の開発環境は、Windows7 Professional、Visual Studio 2010 Ultimate(英語版)、Expression Blend 4 RC(英語版)です。これ以降、Visual Studio 2010はVS 2010、Expression Blend 4 RCはBlendと略します。

サンプル・ファイルはこちらからダウンロードできます。

今回は、Silverlight 4でサポートされた、マウス操作のMouseRightButtonDown、clipboardオブジェクトへのアクセス機能を用いたサンプルを紹介します。

Silverlight 4では、Silverlightアプリケーション上でマウスの右ボタンをクリックすると、デフォルトの[Microsoft Silverlightの構成]ダイアログ・ボックスを開くだけでなく、独自のメニューを表示することが可能になりました。そこで、右クリックにより「コピー、切り取り、貼り付け」というメニューを表示してみましょう。この実装には、Silverlight4_Toolkit_April_2010に含まれるContextMenuコントロールを使います。

実装する機能の動作は次の通りです。

まず、表示されているテキストを選択し、マウスの右クリックで表示されるメニューから「コピー」あるいは「切り取り」を実行します。すると、「クリップボードへのアクセス許可確認」のメッセージが表示されます(図1)。ここで[はい(Y)]を選択すると、「貼り付け」によって、文章を貼り付けることができます(図2)。

図1: テキストを選択して「コピー」すると、「クリップボードへの
アクセス許可確認」のメッセージが表示される(クリックで拡大)

図2: クリップボード経由でテキストを「貼り付け」した(クリックで拡大)

新規プロジェクトを作成し、依存関係を設定する

さっそくサンプルを作っていきましょう。

ツールの操作手順については第1回で述べましたので、ここでは簡単に説明します。

VS 2010のメニューから[File/New/Project]を選択します。本稿では開発言語にVisual Basicを用いるため、「Installed Templates」の言語がVisual Basicになっていることを確認します。次に、「Silverlight Application」を選択して、「Name」に任意のプロジェクト名を指定します。ここでは「SL4_MouseRightButtonClick」という名前を付けています。

.NET Frameworkのバージョンはデフォルトの「4」、「New Silverlight Application」の[Options]の「Silverlight Version」もデフォルトの「Silverlight 4」のままで[OK]ボタンをクリックします。

本連載では取り上げませんが、VS 2010では、過去のバージョンの.NET Frameworkや、Silverlight 3を選択してアプリケーションを作り分けることができます(図3)。

図3: VS 2010では、過去のバージョンの.NET Framework
や、Silverlight 3対応のアプリケーションを作ることができる

デフォルト設定で新規プロジェクトを作成すると、「プロジェクト名.Web」というフォルダが自動的に作成されます。このフォルダが作成された状態で、xaml.vbファイルやxamlファイルを編集して処理を記述後「Start Debugging」を実行すると、コードの変更が反映されなかったり、エラーが表示される場合があります。これは、SL4_MouseRightButtonClickプロジェクトとSL4_MouseRightButtonClick.Webの依存関係が設定されていないからです。そこで、この段階で、依存関係の設定を行っておきます。

Solution Explorerペインのプロジェクト名を選択して、マウスの右クリックで表示されるショートカットメニューから、「Project Dependencies(プロジェクト依存関係)」を選択します。「Project Dependencies」ダイアログボックスの「Depends on(依存先)」内のチェックボックスにチェックを付けます(図4)。

図4: 「Project Dependencies」を選択し、「Depends
on(依存先)」にチェックを付ける(クリックで拡大)

新規プロジェクトの画面では、図5のように、上にMainPage.xamlの「デザイン」画面、下に「XAML」コードが表示されています。

第1回で触れたように、Silverlight 3までは、コントロールのラフなレイアウトはExpression Blendで行う必要がありました。VS 2010では、このデザイン画面上で、ツールボックスからコントロールをドラッグ&ドロップしてレイアウトすることができるようになっています。

図5: 上にデザイン画面、下にXAMLコードが表示される(クリックで拡大)

四国のSOHO。薬師寺国安(VBプログラマ)と、薬師寺聖(デザイナ、エンジニア)によるコラボレーション・ユニット。1997年6月、Dynamic HTMLとDirectAnimationの普及を目的として結成。共同開発やユニット名義での執筆活動を行う。XMLおよび.NETに関する著書や連載多数。最新刊は「Silverlight実践プログラミング」両名とも、Microsoft MVP for Development Platforms - Client App Dev (Oct 2003-Sep 2012)。http://www.PROJECTKySS.NET/

連載バックナンバー

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています