本の形で情報を表示するSilverlightアプリケーションの作成

ComponentOne StudioのBook for Silverlightを使ったWebページの作成

ブックのデザインを変える

　とりあえず、C1Bookコントロールを使った「我が家のネコブック」はできあがりましたが、デザイン的に少し物足りないですね。そこで、少しカスタマイズしていきます。

C1Bookクラスのメンバプロパティ

　C1Bookコントロールは、いくつかのクラスを継承して作られているので、継承してきたクラスのメンバと、C1Bookクラス独自に組み込まれたメンバを使うことができます。

C1Bookクラスの継承階層

System.Object
  System.Windows.DependencyObject
    System.Windows.UIElement
      System.Windows.FrameworkElement
        System.Windows.Controls.Control
          System.Windows.Controls.ItemsControl
            C1.Silverlight.Extended.C1Book

C1Bookクラスのメンバプロパティ

名前	説明
CurrentPage	現在表示されているページを取得または設定します
CurrentZone	マウスが置かれているブックのゾーンを取得します
Dispatcher	（DependencyObjectから継承されます）
FoldSize	折り返しのサイズをピクセル単位で取得または設定します
IsFirstPageOnTheRight	ブックの最初のページがブックの右側に表示されるかどうかを取得または設定します
IsMouseOver	マウスがコントロール上にある場合は、Trueを返します
LeftPageTemplate	ブックの左側に表示されるページのテンプレートを取得または設定します
PageFoldAction	ページめくりアニメーションを発生させるアクションを取得または設定します
RightPageTemplate	ブックの右側に表示されるページのテンプレートを取得または設定します
ShowInnerShadows	内側の影を表示するかどうかを取得または設定します
ShowOuterShadows	外側の影を表示するかどうかを取得または設定します
ShowPageFold	折り返しを表示するかどうかを取得または設定します
TurnInterval	ページめくりアニメーションの時間の長さ（ミリ秒）を取得または設定します

背景色の設定

　カスタマイズの手始めとして、C1Bookコントロールの背景色を変えましょう。デフォルトでは白色なので、これをゴールド系のグラデーションに変えます。

　使用するプロパティは「Background」で、線形グラデーションブラシ（LinearGradientBrush）を作成して塗りつぶします。線形グラデーションブラシは、「Gold」と「White」の2色で、左上から右下に斜めに流れるグラデーションを作成します。

　グラデーションの定義をする場所は、<c1ext:C1Book>タグのすぐ下にします。

※注

グラデーションの定義方法については、記事末に記載している「Microsoft Silverlightデベロッパーセンター」のコンテンツを参照してください。

<c1ext:C1Book x:Name="_book" Width="600" Height="400" >

	<!-- ページの背景にグラデーションを設定 -->
    <c1ext:C1Book.Background>
    	<LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> 
        	<GradientStop Color="Gold" Offset="0"/>
            <GradientStop Color="White" Offset="0.5"/>
            <GradientStop Color="Gold" Offset="1"/>
        </LinearGradientBrush>
    </c1ext:C1Book.Background>

    <!-- 表紙 -->
    <StackPanel VerticalAlignment="Center"  HorizontalAlignment="Center" Margin="20">

背景がゴールドのグラデーションになった

ページの折り返しのサイズとページめくりの速度を変える

　次に、ページの折り返しのサイズとページめくりの速度をカスタマイズします。

　ページの折り返しのサイズは、プロパティのリストにあるように、「FoldSize」プロパティを使用します。この数値が大きければ大きいほど、折り返しのサイズが大きくなります。ここでは、「80」にセットします。プロパティへの値の代入は、<c1ext:C1Book>タグの中に直接記述します。

<c1ext:C1Book x:Name="_book" Width="600" Height="400"  FoldSize="80" >

　もし、ページの折り返しを使いたくなければ、「ShowPageFold」プロパティを「Never」に設定します。

ページの折り返しが大きくなった

　また、TurnIntervalプロパティでページめくりの速度を変えることができます。単位はミリ秒で、数値が大きいほどめくる速度は遅くなります。

<c1ext:C1Book x:Name="_book" Width="600" Height="400"  FoldSize="80" TurnInterval="500">

ブックを閉じた状態から開始する

　デフォルトでは、C1Bookコントロールは2ページの見開きから始まるようになっていますが、最初は表紙から始めたいという要望もあると思います。その場合は、「IsFirstPageOnTheRight」プロパティを「True」に設定すれば、最初のページが右側に表示されるようになります。

表紙からスタートできる

まとめ

　ComponentOne Studio for Silverlightは、Webページにこれまでにない新しい視覚効果を提供するコントロールがいくつも含まれており、Book for Silverlightもユーザーが本をめくる感覚で情報を見ることができる機能を提供しています。しかも、とても簡単な記述で実装できるため、プログラマ以外にもデザイナーでも扱うことができるという利点もあります。

　操作方法の革新性は、ユーザーの関心を引き付ける大きな要素です。1つのコントロール内に複数のページを持つことができるので、狭いブラウザ内で多くの情報を整理して提供するのにもってこいのコントロールと言えます。

参考文献

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

製品情報

• ComponentOne Studio