.NET TIPS

[Silverlight 2]マウス・オーバー時にSilverlightコントロールを大きく表示するには?[C#、VB]

デジタルアドバンテージ 一色 政彦
2009/10/29

 Webページの一部としてSilverlightコントロールを埋め込んでいる場合、基本的にはその埋め込み先の領域内でしか描画できない。しかし、その領域サイズよりも大きなものを一時的に表示したいこともあるだろう。そのような場合、一時的にSilverlightコントロールのサイズを大きくするという方法が取れる。

 例えば、Silverlightコントロール上にマウス・カーソルが乗っている状態(以降、マウス・オーバー)のときにだけ、Silverlightコントロールのサイズを大きくするなどである。次のサンプルでは、マウス・オーバー時にSilverlightコントロールが少し大きくなり、マウスが外れると元のサイズに戻る。

Microsoft Silverlight を取得
マウス・オーバー時にSilverlightコントロールを大きく表示するサンプル
Silverlightコントロールが大きくなっても、そのほかのHTMLコンテンツがずれていないこと(HTMLコンテンツ上にSilverlightコントロールがかぶさっていること)に注意してほしい。

■マウス・オーバー時にSilverlightコントロールを大きく表示する方法

 上のサンプルの場合、Silverlightコントロールのサイズが大きくなっても、そのほかのHTMLコンテンツに影響を与えないが、その理由はHTMLコードにある。具体的には、Silverlightコントロール部分のHTMLコードは次のようになっている。

<div id="silverlightControlHost"
  style="width: 400px; height: 80px;">

  <object id="silverlightControl"
    data="data:application/x-silverlight-2,"
    type="application/x-silverlight-2"
    style="position:relative; width: 400px; height: 80px;">
    ……省略……
  </object>

  ……省略……
</div>
相対位置に配置されたSilverlightコントロール部分のHTMLコード
コード中のstyle属性ではCSSプロパティが設定されている。
・widthプロパティ:横幅
・heightプロパティ:高さ
・positionプロパティ:位置(「relative」は相対位置を表す)

 ちなみに、ASP.NETコントロールの場合は、次のようなASP.NETコードになる。

<div id="silverlightControlHost"
    style="width: 400px; height: 80px;">
  <asp:Silverlight ID="silverlightControl"
    runat="server" Source="~/slapp.xap"
    MinimumVersion="2.0.31005.0"
    style="position:relative; width: 400px; height: 80px;"/>
</div>
相対位置に配置されたSilverlightコントロール部分のASP.NETコード(.aspxファイル)

 このHTMLコードでは、<div>要素によって、HTMLコンテンツ内に横幅400px、高さ80pxの領域(いずれも単位はピクセル)が作成されている。その領域の左上を基準とする位置(=相対位置:relative position)に、横幅400px(ピクセル)、高さ80pxの<object>要素(=Silverlightコントロール)が配置されている。これをイメージにすると、次の図のようになる(<div>要素の1つ上のレイヤとして<object>要素が存在し、<div>要素と<object>要素の左上の位置が一致するというイメージ)。

相対位置に配置されたSilverlightコントロールのイメージ図
このように相対位置に配置されたHTML要素は、HTMLコンテンツの領域を使用していないので、そのサイズが変化してもHTMLコンテンツの領域には影響を与えない。

 要するに、Silverlightコントロールのマウス・オーバー時にそのサイズを変化させるには、<object>要素(=Silverlightコントロール)のサイズのみを変化させればよい(<div>要素のサイズは変化させない)。

 Silverlightコントロールのサイズを変化させるには、Silverlightアプリケーション内から<object>要素のCSSプロパティを動的に変更すればよい。CSSプロパティの変更方法は「TIPS:[Silverlight 2]HTML要素のstyle属性のCSSプロパティを取得/設定するには?」を参考にしてほしい。

 あとはマウス・オーバー時とそうでなくなったときのイベントを処理すればよい。マウスがSilverlightコントロールに入ったときに発生するのがMouseEnterイベントで、外れたときに発生するのがMouseLeaveイベントである。これらのイベント・ハンドラをMouseEventHandlerデリゲート(System.Windows.Input名前空間)として追加し、その中にSilverlightコントロールのサイズを変更する処理を記述したのが、次のサンプル・コードだ。

using System.Windows.Browser;
using System.Windows.Input;

HtmlElement slControl;

public Page()
{
  InitializeComponent();

  slControl = HtmlPage.Plugin;

  this.MouseEnter += new MouseEventHandler(Page_MouseEnter);
  this.MouseLeave += new MouseEventHandler(Page_MouseLeave);
}

void Page_MouseEnter(object sender, MouseEventArgs e)
{
  slControl.SetStyleAttribute("width", "500px");
  slControl.SetStyleAttribute("height", "130px");
}

void Page_MouseLeave(object sender, MouseEventArgs e)
{
  slControl.SetStyleAttribute("width", "400px");
  slControl.SetStyleAttribute("height", "80px");
}
Imports System.Windows.Browser
Imports System.Windows.Input

Dim slControl As HtmlElement

Public Sub New()
  InitializeComponent()

  slControl = HtmlPage.Plugin
End Sub

Private Sub Page_MouseEnter(ByVal sender As Object, ByVal e As MouseEventArgs) Handles Me.MouseEnter
  slControl.SetStyleAttribute("width", "500px")
  slControl.SetStyleAttribute("height", "130px")
End Sub

Private Sub Page_MouseLeave(ByVal sender As Object, ByVal e As MouseEventArgs) Handles Me.MouseLeave
  slControl.SetStyleAttribute("width", "400px")
  slControl.SetStyleAttribute("height", "80px")
End Sub
MouseEnter/MouseLeaveイベント・ハンドラのサンプル・コード(上:C#、下:VB)
Silverlightのメイン・ページ(Pageクラス)の中に、このコードを追記する。

 このコードを見れば分かるように、SilverlightコントロールのHTML要素(<object>要素)は、ブラウザのHTML DOMにアクセスするためのHtmlPageクラス(System.Windows.Browser名前空間)の静的プロパティPluginから取得できる。

 このコードを実行すると、冒頭のサンプルと同じ動作になる。

 なお、マウス・オーバー時にSilverlightコントロールの表示位置も変更したい場合もあるだろう。そのような場合には、CSSのleftプロパティとtopプロパティを設定すればよい。その設定のタイミングは、筆者が試した限りでは、Silverlightコントロールのサイズが変更された直後が最適なようだ。つまり、Silverlightコンテンツ領域のResizedイベント・ハンドラでCSSのleftプロパティとtopプロパティを設定すればよい。Resizedイベント・ハンドラの実装方法については、「TIPS:[Silverlight 2]Silverlightコントロールの実際のサイズを取得するには?」を参考にしてほしい。End of Article

カテゴリ:Silverlight 2 処理対象:HTML DOM
使用ライブラリ:MouseEventHandlerデリゲート(System.Windows.Input名前空間)
使用ライブラリ:HtmlPageクラス(System.Windows.Browser名前空間)
使用ライブラリ:Contentクラス(System.Windows.Interop名前空間)
関連TIPS:[Silverlight 2]HTML要素のstyle属性のCSSプロパティを取得/設定するには?
関連TIPS:[Silverlight 2]Silverlightコントロールの実際のサイズを取得するには?

この記事と関連性の高い別の.NET TIPS
[Silverlight 2]Silverlightコントロールの実際のサイズを取得するには?
[Silverlight 2]HTML要素クリック時にSilverlightのメソッドを実行するには?
[Silverlight 2]JavaScriptコードからSilverlightのオブジェクトを利用するには?
[Silverlight 2]Silverlightプラグイン・ロード時にJavaScriptコードを実行するには?
[Silverlight 2]ページ表示時にテキストボックスにフォーカスを設定するには?
このリストは、(株)デジタルアドバンテージが開発した
自動関連記事探索システム Jigsaw(ジグソー) により自動抽出したものです。
generated by

「.NET TIPS」


Insider.NET フォーラム 新着記事
  • 第2回 簡潔なコーディングのために (2017/7/26)
     ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
  • 第1回 Visual Studio Codeデバッグの基礎知識 (2017/7/21)
     Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
  • 第1回 明瞭なコーディングのために (2017/7/19)
     C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
  • Presentation Translator (2017/7/18)
     Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

Insider.NET 記事ランキング

本日 月間