SHOEISHA iD

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

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

ComponentZine(ComponentOne)

WPFのビットマップ効果を使ったチャート表示アプリケーションを作る

ComponentOne Studio Enterprise 2008J(SP2)のChart for WPFコンポーネントで華麗なグラフを表示(その2)

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

ビットマップ視覚効果の設定

 次に、チャートにドロップシャドウ、べベル、アウトグロウという3つの視覚効果を設定します。

WPFのビットマップ視覚効果

 これらの視覚効果は、WPFのビットマップ視覚効果機能を用いて設定します。

 ドロップシャドウは既にタイトルのテキストに施していますが、光が当たった時の影を設定する視覚効果です。影の方向、色、ぼかしの程度、影の深さをプロパティで設定します。今回は、テキストに施したドロップシャドウとは異なるパターンのドロップシャドウを作成し、チャートに設定します。

 べベルは、3Dのように立体的にしたり額縁のようにくぼんだ形状にする視覚効果です。べベルの高さによって、隆起したりくぼんだように見えます。

 アウトグロウは、輪郭の周りに光彩を設定する視覚効果です。蛍光灯の周りのぼけた光のような効果を設定します。光彩の色や範囲をプロパティで設定できます。

 それぞれの視覚効果は、DropShadowBitmapEffect、BevelBitmapEffect、OuterGlowBitmapEffectのタグで作成します。

<DropShadowBitmapEffect Color="DarkGray" Direction="-45" ShadowDepth="3" Softness="0.5" Opacity="0.5" />
<BevelBitmapEffect x:Name="animeBevelEffect" BevelWidth="1" EdgeProfile="CurvedIn" LightAngle="120" 
				  		   					 Relief="0.2" Smoothness="0.4" />
<OuterGlowBitmapEffect GlowColor="BlueViolet" GlowSize="30" Noise="2" Opacity="0.4" />

複数の視覚効果を設定する

 <c1chart:C1Chart>タグの中に<c1chart:C1Chart.BitmapEffect>タグを作成し、その中に設定を記述します。

 ただし、単体のタグはこの場所に記述しますが、複数の視覚効果を設定する場合は<BitmapEffectGroup>を作成し、その中に記述します。

Window1.xamlの追加コード
<c1chart:C1Chart Margin="37,67,73.5,87" Name="c1Chart1" Background="Transparent" Palette="Metro">

    <c1chart:C1Chart.BitmapEffect>
	    <BitmapEffectGroup>
        	<DropShadowBitmapEffect Color="DarkGray" Direction="-45" ShadowDepth="3" Softness="0.5" Opacity="0.5" />
            <BevelBitmapEffect x:Name="animeBevelEffect" BevelWidth="1" EdgeProfile="CurvedIn" LightAngle="120" 
                                         Relief="0.2" Smoothness="0.4" />
            <OuterGlowBitmapEffect GlowColor="BlueViolet" GlowSize="30" Noise="2" Opacity="0.4" />
        </BitmapEffectGroup>
    </c1chart:C1Chart.BitmapEffect>
複数の視覚効果を設定する
複数の視覚効果を設定する

視覚効果をアニメーションで設定する

 今度は、BevelBitmapEffectの光の当たり方をアニメーションさせます。作成したBevelBitmapEffectタグでは、LightAngleプロパティを120度に設定しています。これを、360度から0度まで回転させてべベルの形状が変化するようにアニメーションさせます。

アニメーションを実行するタイミングは、チャートにマウスポインタが重なった時のイベント「MouseEnter」を利用します。

 まず、<c1chart:C1Chart>タグの中に<c1chart:C1Chart.Triggers>タグを作成します。そして、アニメーションを動作させるイベント名と動作内容を設定します。

 個々のタグの内容の説明は省略しますが、光源の角度を360度から0度まで1秒間移動させるように設定します。AutoReverseプロパティをTrueに設定し、このライトの移動を時計回りと反時計回りの2回実行させます。

Window1.xamlの追加コード
<c1chart:C1Chart.Triggers>
	<EventTrigger RoutedEvent="c1chart:C1Chart.MouseEnter">
    	<BeginStoryboard>
        	<Storyboard>
            	 <DoubleAnimation
                	 Storyboard.TargetName="animeBevelEffect"
                     Storyboard.TargetProperty="LightAngle"
                     From="360" To="0" Duration="0:0:1" AutoReverse="True"
                 />
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>
</c1chart:C1Chart.Triggers>

次のページ
チャートを画像で保存する

修正履歴

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

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

もっと読む

この記事の著者

瀬戸 遥(セト ハルカ)

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

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

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

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/4537 2009/11/18 19:58

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング