マウス・ホイールと、通知領域への表示

マウス・ホイールによるスクロールと拡大・縮小を実装する

第2回では、マウス操作のMouseRightButtonDownイベントを、また、第3回では、ブラウザ外実行について述べました。今回は、マウス操作とブラウザ外実行を使った2つのサンプルを紹介します。

要点のみ解説していきますので、ツールの操作手順や開発の基本的な手順については、これまでの連載を参照してください。開発言語はVisual Basicです。

まず、Silverlight 4でサポートされた、マウス・ホイールによるサンプルからです。図1のように、画像を拡大・縮小させたり、TextBox内に表示されているデータをスクロールさせてみましょう。

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

VS 2010のメニューから[File/New/Project]を選択します。「Silverlight Application」を選択して、「Name」に任意のプロジェクト名（サンプルでは「SL4_MouseWheel」）を指定します。.NET Frameworkのバージョンや「Silverlight Version」もデフォルトのままで［OK］ボタンをクリックします。

Solution Explorerのプロジェクト名を右クリックして「Project Dependencies（プロジェクト依存関係）」を選択し、「Project Dependencies」ダイアログ・ボックスの「Depends on（依存先）」内のチェック・ボックスにチェックを付けておきます。

ここで、Solution Explorer（ソリューション・エクスプローラ）からXML文書ファイル（リスト1）を追加します。また、Imageフォルダを作成して、サンプル画像ファイルも追加しておきます。ダウンロード用ファイルには、XML文書ファイル（WhatsLinq.xml）と画像ファイル（LinqSampleImage.png）は追加済みです。

XMLデータは、LINQ to XMLで処理しますので、「Project／Add Reference」からSystem.Xml.Linqを追加してください。一度使用したコンポーネントは、「Recent」タブ内から指定するとよいでしょう。

リスト1: TextBoxコントロールに表示させるデータを記録したXML文書ファイル（WhatsLinq.xml）


<書籍>
  <タイトル 著者="PROJECT KySS">XML設計の心得
    <章 章番号="第3章">
      <節 見出し="LINQ to XMLの概要">
　XMLデータの処理には、LINQ to XML（Language-Integrated Query，統合言語クエリー）を用いる。
　LINQは、.NET Framework3.5より追加された、言語埋め込み型クエリー技術である。2008年12月に日本語版がリリースされたVisual Studio 2008から利用可能となっている。LINQクエリーの基本パターンは、RDB（LINQ to SQL）、XML（LINQ to XML）、Object（LINQ to Object）を問わず同一であるため、データ形式別に異なるクエリー言語を習得する必要はない。～後略～
     
   



ツール・ボックスからコントロールをレイアウトする前に、XAMLコードを編集しておきます。このサンプルでは、TextBoxをスクロールする際に、Canvas.Topの値が必要になりますから、XAMLコード中の要素を

UserControlのPropertiesペインの[Layout]を展開して、Widthに800、Heightに600を指定します。

タイトル表示用のTextBlockコントロール、画像表示用のImageコントロール、XML文書中のテキストを表示するTextBoxコントロールを、1個ずつレイアウトします。

ImageプロパティのWidthは300、Heightは350とし、SourceプロパティにはImageフォルダ内の画像を指定します。

TextBoxコントロールのPropertiesの「Other」を展開して表示されるAcceptsReturnプロパティにチェックを付け、改行を許可して表示するように設定します。VerticalScrollBarVisibilityプロパティにはAutoを指定し、データがTextBoxの表示範囲を超える場合は垂直スクロール・バーを表示します。テキストは回り込んで表示されるよう、「Text」を展開して表示されるTextWrappingプロパティにWrapを指定しておきます。

すべてレイアウトすると、図2のようになります。このレイアウトの結果として書きだされるXAMLコードは省略します。

マウス・ホイールによる処理を記述する

レイアウトができたら、MainPage.xamlを展開してMainPage.xaml.vbを開き、リスト2のようなロジック・コードを記述します。

リスト2: マウス・ホイールによる処理を記述したロジック・コード（MainPage.xaml.vb）

■名前空間の読み込みと変数の宣言
Option Strict On
LINQ to XMLでXMLを処理するクラスの含まれるSystem.Xml.Linq名前空間をインポートします。
Imports System.Xml.Linq
Double型のメンバ変数_topを宣言します。この変数には、TextBox1コントロールのCanvas.Topの値が格納されます。
Dim _top As Double

■ページが読み込まれたときの処理
GetValueメソッドでTextBox1コントロールのCanvas.Topの値を取得し、変数_topに格納しておきます。
XElement.LoadメソッドでXML文書ファイルを読み込みます。LINQ to XMLを用いて<内容>要素の内容テキストを取得して、TextBox1コントロールに表示します。
  Private Sub MainPage_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded
    _top = CDbl(TextBox1.GetValue(Canvas.TopProperty))
    Dim xmldoc As XElement = XElement.Load("WilliamBlake.xml")
    Dim contentStr = xmldoc.Descendants("情報").<内容>.Value
    TextBox1.Text = contentStr
  End Sub

■マウス・ポインタがImage1コントロール上にあって、マウス・ホイールを回転させたときに発生するイベント
e.Deltaプロパティで、マウス・ホイールの相対的な変化量を取得します。
その値が0より大きい場合は、Image1コントロールのWidthとHeightの値を10ずつ減少させ、画像を縮小します。画像の最小サイズは幅100とし、Widthの値が100以下になったときは、処理を中止します。
マウス・ホイールの変化量が、0より小さかった場合は、Image1コントロールのWidthとHeightの値を10ずつ増加させ、画像を拡大します。画像の最大のWidthは500とし、これを超える時は処理を中止します。
  Private Sub Image1_MouseWheel(ByVal sender As Object, ByVal e As System.Windows.Input.MouseWheelEventArgs) Handles Image1.MouseWheel
    If e.Delta > 0 Then
      If Image1.Width <= 100 Then
        Image1.Width = 100
        Exit Sub
      End If
      Image1.Width -= 10
      Image1.Height -= 10
    Else
      If Image1.Width >= 500 Then
        Image1.Width = 500
        Exit Sub
      End If
      Image1.Width += 10
      Image1.Height += 10
    End If
  End Sub

■マウス・ポインタがTextBox1コントロール上にあって、マウス・ホイールを回転させたときに発生するイベント
画像の場合と同様に、e.Deltaプロパティでマウス・ホイールの相対的な変化量を取得します。
その値が0より大きい場合は、上向きにスクロールさせます。GetTopメソッドで、TextBox1コントロール内のTopの値を取得して、1ずつ減少させた値をSetTopメソッドで設定します。
変化した値が0より小さい場合は、下向きにスクロールさせます。1ずつ加算した値をSetTopメソッドで設定します。
スクロールによってTextBoxそのものがスクロールすることを防ぐため、TextBoxの上マージンは、「_top」で取得したCanvas.Topの値を維持します。
  Private Sub TextBox1_MouseWheel(ByVal sender As Object, ByVal e As System.Windows.Input.MouseWheelEventArgs) Handles TextBox1.MouseWheel
    If e.Delta > 0 Then
      Canvas.SetTop(TextBox1, Canvas.GetTop(TextBox1) - 1)
    Else
      Canvas.SetTop(TextBox1, Canvas.GetTop(TextBox1) + 1)
    End If
    Canvas.SetTop(TextBox1, _top)
  End Sub