SHOEISHA iD

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

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

ComponentZine(ComponentOne)

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

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

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

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

 とりあえず、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つのコントロール内に複数のページを持つことができるので、狭いブラウザ内で多くの情報を整理して提供するのにもってこいのコントロールと言えます。

参考文献

製品情報

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

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

もっと読む

この記事の著者

瀬戸 遥(セト ハルカ)

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

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

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

この記事をシェア

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

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング