SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

ComponentZine(ComponentOne)

コンテンツに反射表現を加えたSilverlightアプリケーションの作成

ComponentOne Studio for SilverlightのC1Reflectorコントロールを使ったWebページの作成

  • このエントリーをはてなブックマークに追加

 ComponentOne Studio for SilverlightのReflector for Silverlightは、テキストやコントロールに3D反射(リフレクション)効果を設定するコンポーネントです。今回は、このReflector for Silverlightを使って、文字列と時刻表示に対してリフレクション効果を設定したWebページを作成してみました。  

  • このエントリーをはてなブックマークに追加

はじめに

 ComponentOne Studio for SilverlightのReflector for Silverlightは、テキストやコントロールに3D反射(リフレクション)効果を設定するコンポーネントです。この3Dリフレクション効果を設定すると、Webページの見栄えをグッと良くすることができます。

 リフレクションは、透明度の変更やぼかし効果の追加、さらに遠近感の調整なども可能です。また、反射対象となるコンテンツが動的に変化すると、リフレクションもそれに合わせて変化するという、大変優れた機能も備わっています。

 今回は、このReflector for Silverlightを使って、装飾した文字列と時刻表示に対してリフレクション効果を設定したWebページを作成してみました。

反射したテキストに透明効果を加えることもできる
反射したテキストに透明効果を加えることもできる
1秒ごとに変化する時刻表示に対してもリフレクション効果を設定できる
1秒ごとに変化する時刻表示に対してもリフレクション効果を設定できる
リフレクション部分をぼかすこともできる
リフレクション部分をぼかすこともできる

対象読者

 Visual Basic/Visual C# 2008を使ってプログラムを作ったことのある人。また、SilverlightおよびXAMLに対する基礎的な知識が必要になります。

必要な環境

 Visual Basic 2008、Visual C# 2008、Visual Studio 2008でプログラムが作れる環境。また、Visual Studio 2008 Silverlight Tools 3.0をインストールしていることが必須条件です。

 なお、本プログラムはWindows Vista上で動作するVisual Studio 2008およびVisual Studio 2008 Silverlight Tools 3.0を使用して作成し、Internet Explorer 8で動作確認を行っています。

コンポーネントのインストール

 ComponentOne Studio for Silverlightを使用する方は、Visual Studio、Visual Basic、Visual C#の開発環境にComponentOne Studio Enterprise 2010Jをインストールする必要があります。

 インストーラは、グレープシティのWebページからダウンロードできます。製品ページの[申込フォーム]をクリックし、グレープシティのWebサイトへ必要情報を登録すると、添付トライアルライセンスキーファイルとダウンロードサイトを記載したE-Mailが送られてきますので、ここからダウンロードします。制限事項などの詳細については、インストーラに同梱されているリリースノートを参照ください。

C1Reflectorコントロールについて

 Reflector for SilverlightのC1Reflectorコントロールは、テキストや他のUIコントロールに対して2Dまたは3Dのリフレクション効果を設定するコンポーネントです。リフレクションとは、ぴかぴかの床や湖の水面に物が反射して写りこむような効果のことです。このリフレクション効果を使うことで、Webページに奥行きや立体感のある表現を加えることができます。

3Dリフレクション

 C1Reflectorコントロールは、Silverlightの3面投影をサポートしており、遠近感のある立体的な反射をコンテンツに付加できます。

 C1Reflectorコントロールには、あらかじめ透明効果を設定する機能が付属し、リフレクションの透明度を自由に設定できます。また、この機能に加え、ぼかしやドロップシャドウといったSilverlightに標準で装備されている効果をリフレクションに適用することもできます。

任意のUI要素が使える

 リフレクション効果は、Webページ内のテキストやボタン、イメージなどのUIElementに対して設定できます。グリッドなどのコンテナと組み合わせて、複数のコンテンツに同じリフレクション効果を設定できます。また、複数のC1Reflectorコントロールを使って、それぞれのコンテンツに違うエフェクトのリフレクション効果を設定することもできます。

面の投影

 C1Reflectorコントロールは平面への投影をサポートしています。これは、2次元で表示されているコンテンツを3次元平面上に存在するように描画する機能です。X、Y、Zの3つの面に沿ってコンテンツを回転させることで、コンテンツとリフレクションを3次元的に描画できます。

自動更新

 リフレクションの対象コンテンツが変更されると、リフレクションも自動的に更新されます。例えば、時刻表示のように1秒ごとに文字が変化するコンテンツでは、リフレクションコンテンツに追随して同じように変化します。アコーディオン効果を設定したコントロールでは、ユーザーがアコーディオンペインを展開すると、リフレクションのアコーディオンペインも一緒に展開されます。

次のページ
Webページの作成

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
ComponentZine(ComponentOne)連載記事一覧

もっと読む

この記事の著者

瀬戸 遥(セト ハルカ)

8ビットコンピュータの時代からBASICを使い、C言語を独習で学びWindows 3.1のフリーソフトを作成、NiftyServeのフォーラムなどで配布。Excel VBAとVisual Basic関連の解説書を中心に現在まで40冊以上の書籍を出版。近著に、「ExcelユーザーのためのAccess再...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/5592 2010/11/26 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング