SHOEISHA iD

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

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

ComponentZine(ComponentOne)

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

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

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

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

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

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ページを作成できます。

参考文献

製品情報

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

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

もっと読む

この記事の著者

瀬戸 遥(セト ハルカ)

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

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

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

この記事をシェア

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

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング