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

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

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

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

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

C#

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>

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

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

完成したページ

まとめ

　C1Reflectorコントロールは、反射効果を簡単に設定できるコントロールです。テキストだけでなく、イメージ画像やコントロールなど、さまざまなコンテンツに適用できるのでデザインの自由度が高く、豊かな表現のWebページを作成できます。

参考文献

• Microsoft Silverlightデベロッパーセンター

製品情報

• ComponentOne Studio