ブックのデザインを変える
とりあえず、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
| 名前 | 説明 |
|---|---|
| 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つのコントロール内に複数のページを持つことができるので、狭いブラウザ内で多くの情報を整理して提供するのにもってこいのコントロールと言えます。
参考文献
製品情報
