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

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

2010/11/26 14:00

ダウンロードサンプルソース（C#） (1.1 MB)
ダウンロードサンプルソース（VB） (1.6 MB)

　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秒ごとに変化する時刻表示に対してもリフレクション効果を設定できる

リフレクション部分をぼかすこともできる

対象読者

　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ページの作成

　では、さっそくWebページを作成していきましょう。今回のプログラムでは、グリッドを使ってコントロールを配置します。グリッドは1行2列に設定し、それぞれTextBlockコントロールとC1Reflectorコントロールを配置します。

コントロールのレイアウト（GridのShowGridLinesプロパティを“True”にしてグリッド線を表示しています）

Silverlightプロジェクトの作成

　まずは、Silverlightプロジェクトの作成からです。

Visual Studio 2008 Silverlight Tools 3.0をインストールし、Visual Studioで新しいプロジェクトを作成すると、「プロジェクトの種類」に［Silverlight］が追加されています。これを選んで「テンプレート」から［Silverlightアプリケーション］を選びます。

［Silverlightアプリケーション］を選ぶ

「新しいSilverlightアプリケーション」というダイアログボックスが表示されるので、「新しいWebプロジェクトの種類」でリストから［ASP.NET Webサイト］を選びます。

リストから［ASP.NET Webサイト］を選ぶ

プロジェクトが作成され、新しいWebサイトに「MainPage.xaml」が作られてXAMLのコードが表示されます。

文字列とリフレクションの作成

　最初に1行2列のグリッドを設定します。Gridに行を追加するには、ColumnDefinition要素を必要な行数分定義します。幅はWidthプロパティで指定します。

<Grid x:Name="LayoutRoot">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

　</Grid>の前の行にカーソルを置き、ツールボックスにあるC1Reflectorコントロールのアイコンをダブルクリックすると、この位置にC1Reflectorコントロールが作成されます。

　コンテンツにリフレクション効果を設定する場合、C1Reflectorコントロールのタグの中にコンテンツを記述していきます。まずはグリッドの左側にグラデーションで塗りつぶしたテキストを作成し、これにリフレクション効果を設定するので、グリッドの列を指定し、コンテンツを右揃えに配置します。

<Grid x:Name="LayoutRoot">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

<c1ext:C1Reflector Grid.Column="0" HorizontalAlignment="Right">
</c1ext:C1Reflector>

　テキストブロックを<c1ext:C1Reflector>と</c1ext:C1Reflector>の間に作成します。そして、表示する文字列と文字サイズを指定し、文字色に線形グラデーションブラシを設定します。この時点では、鏡に映ったような、綺麗な反射が作成されます。

<c1ext:C1Reflector Grid.Column="0" HorizontalAlignment="Right">
         
    <TextBlock Grid.Column="0" Text="Hello! Reflection Effect" FontSize="26">

      <TextBlock.Foreground>
          <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
            <GradientStop Color="DarkTurquoise"  Offset="0.0" />
            <GradientStop Color="LimeGreen" Offset="1.0" />
          </LinearGradientBrush>
      </TextBlock.Foreground>
    </TextBlock>

この時点では鏡に映ったような反射が作成される

　また、文字に対してドロップシャドウも設定します。C1Reflectorコントロールは、このグラデーションによる塗りつぶしやドロップシャドウもきちんと反射してリフレクション効果を作成してくれます。

<c1ext:C1Reflector Grid.Column="0" HorizontalAlignment="Right">
         
    <TextBlock Grid.Column="0" Text="Hello! Reflection Effect" FontSize="26">

      <TextBlock.Foreground>
          <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
            <GradientStop Color="DarkTurquoise"  Offset="0.0" />
            <GradientStop Color="LimeGreen" Offset="1.0" />
          </LinearGradientBrush>
      </TextBlock.Foreground>
                 
      <TextBlock.Effect>
          <DropShadowEffect Color="Black"></DropShadowEffect>
      </TextBlock.Effect>
    </TextBlock>

リフレクションへの透明度の設定

　続いて、リフレクションに効果を設定してみます。まずは、透明度を変えて薄い反射にします。

　これは、C1ReflectorコントロールのReflectionEffectsプロパティに、ReflectionOpacityEffectクラスのCoefficientプロパティとOffsetプロパティを設定します。

　Coefficientプロパティは、透明度を計算する指数関数に適用される率を表すプロパティです。値を大きくすると、反射対象との距離に伴い、透明度が増加します。

　Offsetプロパティは、透明度を計算する指数関数に適用されるオフセット値を表すプロパティで、値が大きいと透明度の開始値が小さくなります。この、透明度の開始値と増加率を使い、リフレクションの透明度を設定します。ここでは、Coefficientを「1」に、Offsetを「0.5」に設定してみます。テキストブロックの次の行に、下記のXAMLを記述します。

<c1ext:C1Reflector.ReflectionEffects>
	<c1ext:ReflectionOpacityEffect Coefficient="1" Offset="0.5"/>
</c1ext:C1Reflector.ReflectionEffects>

　これで、テキストの反射が少し透明になります。

透明度を変えたリフレクション

リフレクションへのぼかし効果の設定

　今度は、リフレクションをぼかして水面に反射しているような雰囲気に変えてみます。先ほど入力したリフレクションへの透明度設定のXAMLをコメントアウトし、次のXAMLを追加します。

	<!--c1ext:C1Reflector.ReflectionEffects>
		<c1ext:ReflectionOpacityEffect Coefficient="1" Offset="0.5"/>
	</c1ext:C1Reflector.ReflectionEffects-->

	<c1ext:C1Reflector.ReflectionEffects>
		<BlurEffect Radius="5"/>
	</c1ext:C1Reflector.ReflectionEffects>
</c1ext:C1Reflector>

　ぼかし効果は、C1ReflectorコントロールのReflectionEffectsプロパティに、BlurEffectクラスを設定します。このクラスは、Silverlightの標準クラスで、Radiusプロパティを使ってぼかしのピクセルの半径を指定します。

リフレクションをぼかす

リフレクションを持った時刻表示の作成

　次は、右側のグリッドに時刻表示をする文字列を作成し、これにリフレクションを設定します。

2つ目のC1Reflectorコントロールの作成

　ツールボックスのC1Reflectorコントロールのアイコンをダブルクリックし、2つ目のC1Reflectorコントロールを作成します。グリッドの2列目を配置場所に指定し、左揃えにします。

　また、リフレクションに透明効果を設定します。透明度の設定値は、先に作成したリフレクションと同じです。

<c1ext:C1Reflector Grid.Column="1" HorizontalAlignment="Left">
    <c1ext:C1Reflector.ReflectionEffects>
        <c1ext:ReflectionOpacityEffect Coefficient="1" Offset="0.5"/>
    </c1ext:C1Reflector.ReflectionEffects>

時刻表示の作成

　次に、テキストブロックを作成します。時刻表示にビハインドコードを使用するので、テキストブロックに名前を付け、線形グラデーションで塗りつぶします。また、影も付けておきます。

<TextBlock Grid.Column="1" x:Name="text1" FontSize="30">
    <TextBlock.Foreground>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
          <GradientStop Color="Yellow" Offset="0.0" />
          <GradientStop Color="LimeGreen" Offset="1.0" />
        </LinearGradientBrush>
    </TextBlock.Foreground>
             
    <TextBlock.Effect>
        <DropShadowEffect Color="Black"></DropShadowEffect>
    </TextBlock.Effect>
</TextBlock>

タイマーによる時刻処理の作成

　ビハインドコードでは、タイマーによる時刻表示処理を作成します。

　まず、DispatcherTimerクラスのインスタンスを作成して、Intervalプロパティを100ミリ秒に設定し、Startメソッドを実行してタイマーをスタートさせます。

　そして、新しいイベントハンドラ「Tick」を作成し、DateTime構造体のNowプロパティで現在の時刻をシステムから取得し、テキストブロックのTextプロパティに設定します。

Visual Basic

Imports System.Windows.Threading

Partial Public Class MainPage
    Inherits UserControl

    Private WithEvents timer As New DispatcherTimer()

    Public Sub New()
        InitializeComponent()

        timer.Interval = New TimeSpan(0, 0, 0, 0, 100)
        timer.Start()

    End Sub

    Public Sub timer_Tick(ByVal sender As Object, ByVal e As EventArgs) Handles Timer.Tick
        text1.Text = DateTime.Now.ToString

    End Sub
End Class

using System.Windows.Threading;

namespace sl_reflection_cs
{
    public partial class MainPage : UserControl
    {
        private DispatcherTimer timer = new DispatcherTimer();

        public MainPage()
        {
            InitializeComponent();
            timer.Interval = new TimeSpan(0, 0, 0, 0, 100);
            timer.Tick += new EventHandler(timer_Tick);
            timer.Start();
        }

        void timer_Tick(object sender, EventArgs e)
        {
            text1.Text = DateTime.Now.ToString();
        }
    }
}

　ここまでに作成したリフレクションを確認します。半透明のリフレクションが時刻表示に設定され、時刻が変わると、リフレクションの文字も一緒に変わります。

リフレクションを持った時刻表示が作成される

リフレクションの変形効果

　今度は、このテキストとリフレクションを変形させ、奥行きを付けてみます。これは、C1ReflectorコントロールのContentProjectionプロパティを使います。このプロパティに、PlaneProjectionクラスのプロパティを使い、XYZの3つの座標軸を操作して立体効果を作り出します。

　使用できるプロパティと機能は、次の表のとおりです。

PlaneProjectionクラスのプロパティ
プロパティ	機能
RotationX	X軸の周囲でオブジェクトを回転する度数
RotationY	Y軸の周囲でオブジェクトを回転する度数
RotationZ	Z軸の周囲でオブジェクトを回転する度数
CenterOfRotationX	回転するオブジェクトの中心のX座標
CenterOfRotationY	回転するオブジェクトの中心のY座標
CenterOfRotationZ	回転するオブジェクトの中心のZ座標
GlobalOffsetX	画面のX軸方向に沿ってオブジェクトが変換される距離
GlobalOffsetY	画面のY軸方向に沿ってオブジェクトが変換される距離
GlobalOffsetZ	画面のZ軸方向に沿ってオブジェクトが変換される距離
LocalOffsetX	オブジェクトの面のX軸方向に沿ってオブジェクトが変換される距離
LocalOffsetY	オブジェクトの面のY軸方向に沿ってオブジェクトが変換される距離
LocalOffsetZ	オブジェクトの面のZ軸方向に沿ってオブジェクトが変換される距離

　今回は、「RotationX」「RotationY」「RotationZ」の3つのプロパティを使って、オブジェクトを少し回転させます。

    <c1ext:C1Reflector.ContentProjection>
        <PlaneProjection RotationX="15" RotationY="25" RotationZ="0"/>
    </c1ext:C1Reflector.ContentProjection>
</c1ext:C1Reflector>

　表示すると、時刻が奥から手前に出てくるような効果ができあがりました。

奥から手前に出てくるようなリフレクション効果