リフレクションを持った時刻表示の作成
次は、右側のグリッドに時刻表示をする文字列を作成し、これにリフレクションを設定します。
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プロパティに設定します。
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つの座標軸を操作して立体効果を作り出します。
使用できるプロパティと機能は、次の表のとおりです。
| プロパティ | 機能 |
|---|---|
| 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ページを作成できます。
参考文献
製品情報
