.NET TIPS [Silverlight 2]マウス・オーバー時にSilverlightコントロールを大きく表示するには?[C#、VB]デジタルアドバンテージ 一色 政彦2009/10/29 |
|
|
Webページの一部としてSilverlightコントロールを埋め込んでいる場合、基本的にはその埋め込み先の領域内でしか描画できない。しかし、その領域サイズよりも大きなものを一時的に表示したいこともあるだろう。そのような場合、一時的にSilverlightコントロールのサイズを大きくするという方法が取れる。
例えば、Silverlightコントロール上にマウス・カーソルが乗っている状態(以降、マウス・オーバー)のときにだけ、Silverlightコントロールのサイズを大きくするなどである。次のサンプルでは、マウス・オーバー時にSilverlightコントロールが少し大きくなり、マウスが外れると元のサイズに戻る。
マウス・オーバー時にSilverlightコントロールを大きく表示するサンプル | |
※Silverlightコントロールが大きくなっても、そのほかのHTMLコンテンツがずれていないこと(HTMLコンテンツ上にSilverlightコントロールがかぶさっていること)に注意してほしい。 |
■マウス・オーバー時にSilverlightコントロールを大きく表示する方法
上のサンプルの場合、Silverlightコントロールのサイズが大きくなっても、そのほかのHTMLコンテンツに影響を与えないが、その理由はHTMLコードにある。具体的には、Silverlightコントロール部分のHTMLコードは次のようになっている。
|
|
相対位置に配置されたSilverlightコントロール部分のHTMLコード | |
コード中のstyle属性ではCSSプロパティが設定されている。 ・widthプロパティ:横幅 ・heightプロパティ:高さ ・positionプロパティ:位置(「relative」は相対位置を表す) |
ちなみに、ASP.NETコントロールの場合は、次のようなASP.NETコードになる。
|
|
相対位置に配置された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コントロールのサイズを変更する処理を記述したのが、次のサンプル・コードだ。
|
||
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コントロールの実際のサイズを取得するには?」を参考にしてほしい。
カテゴリ: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」 |
- 第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用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
|
|