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

2010年6月8日(火)
PROJECT KySS

XAMLコードを編集する

以上の操作で書き出されるXAMLコードを編集していきます。

まず、要素の子要素としてプロパティ要素を記述します。さらに、その子として要素を記述し、SourceプロパティにImageフォルダ内の画像を指定します。これで項目名の横にアイコンが表示されるようになります(リスト1、(1))。

また、「切り取り」と「貼り付け」の間に要素を追加して、区切り線を引きます(リスト1、(2))(図20)。

図20: ContextMenuコントロールにアイコンと区切り線が表示されている

要素には、Clickイベントを追加してイベントハンドラを指定します。Headerが「コピー」のClickイベントには「Copy_Click」を、「切り取り」には「Cut_Click」を、「貼り付け」には「Paste_Click」を関連付けます(リスト1、下線部分)。

次に、要素の親として、要素を追加し、ContextMenuを非表示状態にします(リスト1、(3))。このContextMenuServiceは、ContextMenuを表示するためのシステム実装を提供するものです。

さらに、要素を、の子要素にします(リスト1、(4))。要素は、必ず、親である要素ごと要素内に記述する必要があります。

これによって、RichTextBoxコントロール内で右クリックした場合に限り、Silverlight標準の「Silverlight(S)」メニューは表示されず、それ以外の場所で右クリックした場合には表示されるようになります。

最後に、要素内に要素を記述して、「コピー」および「切り取り」元となるテキストを追加します(リスト1、アミかけ部分)。

最終的にリスト1のようになるよう、編集してください。

リスト1: 編集したXAMLコード(MainPage.xaml)

  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400"
  xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit">

 
   
   
      RIAシステムでのお支払い
      お客様番号:ABCDEF123456
       
        注文確認番号:01234567
     
      マルチタッチ端末のある店舗で、代金をお支払いいただけます。
      お支払い用情報を控えてください。
   
   
      Click="Copy_Click" FontSize="15">
       
         
       

     

      Click="Cut_Click" FontSize="15">
       
         
       

     

     
      Click="Paste_Click" FontSize="15">
       
         
       

     

   

   


 


ロジックコードを記述する

XAMLコードを編集できたら、処理を記述します。

Solution ExplorerのMainPage.xamlを展開し、MainPage.xaml.vbをダブルクリックしてコード画面を開きます。

リスト2のようにロジックコードを記述します。

リスト2: ロジックコード(MainPage.xaml.vb)

■RichTextBoxコントロール上で、マウスの右ボタンが押されたときの処理
マウスの右ボタンでクリックされたXとYの位置を、変数myXとmyYに格納しておきます。
SetValueメソッドで、ContextMenuコントロールの表示位置を設定し、ContextMenuコントロールのIsOpenメソッドにTrueを指定してContextMenuを表示します。アイコン付きのメニュー項目(コピー、切り取り、貼り付け)が表示されます。

Private Sub RichTextArea1_MouseRightButtonDown(ByVal sender As Object, ByVal e As System.Windows.Input.MouseButtonEventArgs) Handles RichTextArea1.MouseRightButtonDown
  Dim myPosition = e.GetPosition(Nothing)
  Dim myX = myPosition.X
  Dim myY = myPosition.Y
  ContextMenu1.SetValue(Canvas.LeftProperty, myX)
  ContextMenu1.SetValue(Canvas.TopProperty, myY)
  ContextMenu1.IsOpen = True
End Sub
■「コピー」がクリックされた時の処理
RichTextBox内で、選択された文字列をクリップボードに格納します。SetTextメソッドはクリップボード内にUnicodeテキストを格納するメソッドです。

Private Sub Copy_Click(ByVal sender As Object, ByVal e As EventArgs)
  If RichTextArea1.Selection.Text.Length > 0 Then
    Clipboard.SetText(RichTextArea1.Selection.Text)
  End If
End Sub
■「切り取り」がクリックされた時の処理
文字列をクリップボードに格納した後、選択された文字列を消去しています。このように、文字列を選択し、選択された文字列をクリップボードに格納するには、RichTextBoxコントロールを使用する必要があります。

Private Sub Cut_Click(ByVal sender As Object, ByVal e As EventArgs)
  If RichTextArea1.Selection.Text.Length > 0 Then
    Clipboard.SetText(RichTextArea1.Selection.Text)
  End If
  RichTextArea1.Selection.Text = String.Empty
End Sub
■「貼り付け」がクリックされた時の処理
クリップボードの中が空でない場合は、GetTextメソッドでクリップボード内のデータにアクセスして、RichTextBox内の選択された位置に、貼り付けます。

Private Sub Paste_Click(ByVal sender As Object, ByVal e As EventArgs)
  If Clipboard.ContainsText() = True Then
    RichTextArea1.Selection.Text = Clipboard.GetText()
  End If
End Sub

以上のコードを記述し終えたら、[Debug/Start Debugging]でデバッグしてみましょう。冒頭の図1、図2のように動作しましたか?「コピー」したり「切り取り」したテキストはクリップボードを経由して、メモ帳などにも貼り付けられますので、用途は多いかもしれません。

四国の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メルマガ会員のサービス内容を見る

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