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

NotificationWindowに予定表を表示する

今度は、ブラウザ外実行でのみ実行可能な、NotificationWindow を使ったサンプルを紹介します。

NotificationWindowは、システム・エリア内で表示される通知エリアです。このサンプルでは、予定を記録したXMLデータを読み込み、その日の予定を通知エリアに表示しています（図3）。

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

先のサンプル作成時と同様の手順で、新規Silverlight 4プロジェクト（プロジェクト名は「SL4_Notification」）を作成してください。プロジェクト依存関係を設定し、「Project／Add Reference」からSystem.Xml.Linqを追加しておきます。

また、予定を記録したXML文書ファイル（リスト3）を追加しておきます。

リスト3: 予定を記録したXML文書ファイル（myPlan.xml）



 
  2010/04/29日付>
   
3 「ThinkIT」原稿の正式版対応、修正
プライベート・クラウドへのSilverlight 3 アプリケーションの移設
    内容>
  予定>
  ～予定>繰り返し、略。
予定表>


このサンプルはブラウザ外実行（Out-Of-Browser）で動作します。ブラウザ外実行を設定するには、VS 2010のメニューから「Project／SL4_Notification Properties」を選択し、「Enable running application out of browser（アプリケーションのブラウザ外実行を有効にする）」にチェックを付けます。

[Out-of-Browser Settings]ボタンの使用が可能になりますので、これをクリックします。ブラウザ外実行時に表示されるWindowのサイズを、「Width」と「Height」に入力して設定します（図4）。

MainPageとユーザー・コントロールのレイアウト

ブラウザ外実行の設定ができたら、コントロールをレイアウトしていきます。まず、MainPage.xamlのデザイン画面に、タイトル表示用のTextBlockとButtonコントロールをレイアウトします。ButtonコントロールのContentプロパティには「本日の予定」と指定します（図5）。このレイアウトによって書き出されるXAMLコードは省略します。

次に、通知エリアに表示させるユーザー・コントロールを作成して、レイアウトしていきます。

Solution Explorer内のプロジェクト名を右クリックして表示されるメニューから、「Add／New Item」を選択します。

「Silverlight User Control」を選択し、「Name」を指定します。ここではデフォルトの「SilverlightControl1.xaml」のままで作業を進めます（図6）。

いま作成したSilverlightControl1.xaml内のレイアウトを行います。

UserContorlのWidthに300、Heightに100を指定しましょう。通知エリアのHeightに100以上の値を設定すると、下側が切れてしまいますから、注意してください。また、プログラム内で、NotificationWindowのHeightに100より大きい値を指定するとエラーになります。

ToolboxからRectangle、Button、RichTextBoxコントロールをレイアウトします。

RectangleコントロールのFillプロパティには目立つ色を指定しておきましょう。ButtonコントロールのContentプロパティには「閉じる」と指定し、Rectangleの右上に重ねます。

RichTextBoxコントロールのIsReadOnlyプロパティにはチェックを付けて編集を不可とします。

すべてレイアウトすると図7のようになります。このレイアウトによって書き出されるXAMLコードはリスト5の通りです。

リスト5: 通知エリアのXAMLコード（SilverlightControl1.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" Width="300" Height="100">