(Expression)Blendの図形を利用する
About
VisualStudio2012から同梱されるようになったBlendをつかって、扇形・円グラフ・矢印・三角形などの図形を描画します。
矢印(Arrow)や扇形(Arc)、円グラフ(Pie)といった特殊な図形をWPFで描画するための手段はいくつかあります。
1つ目は汎用コントロールとして自力で実装することです。しかしながら汎用コントロールを実装するのは非常に面倒です。これはカスタムコントロールを実装したことがある全てのプログラマが思うことでしょう。そしてカスタムコントロールの実装経験がない人には敷居が高すぎます。
2つ目は市販のライブラリを購入することです。ところが市販のライブラリは非常に高価で、しかも個人で購入するには高機能すぎて、とても形状描画のためだけに導入する気にはなれません。
3つ目はMicrosoftが提供する(Expression)Blendを利用する方法です。BlendはUIデザインなどに利用するソフトウェアで、矢印や三角形などの図形が標準的に用意されています。Blendで用意される特殊な図形は、WPFプロジェクトから参照することによって、一般的な図形と同様にVisualStudio上であつかうことができます。
これまでBlendは有料のソフトウェアとして提供されていましたが、VisualStudio2012からBlendが標準で同梱されるようになりました。そこで、WPFにはなくBlendにはある図形を、WPF上であつかってみます。
WpfApplication_ShapesInBlend.zip
- VisualStudio2012
- WPF 4.5
- Blend 4.5(VisualStudio2012同梱ver)
VisualStudio2012に同梱されるBlendからは名称が「Blend」になっているようです。従来製品は「ExpressionBlend」でした。
欠点として、BlendのDLLとそれに関連する大量のファイルが出力されてしまうという点があげられます。
Blendと対象名前空間への参照を追加する
dll参照の追加
まずはBlendに参照を通す必要があります。Blendの図形は「Microsoft.Expression.Drawing」にあります。プロジェクトの参照設定から追加しておきます。VisualStudio2012であれば「アセンブリ>拡張>Microsoft.Expression.Drawing」です。
名前空間参照の追加
ここであつかうBlendのコントロールは、2つの名前空間にそれぞれ与えられています。1つは「Microsoft.Expression.Shapes」もう1つは「Microsoft.Expression.Controls」です。それぞれ名前空間を追加しておきます。ここでは「exshape」と「exctrl」としました。
<Window x:Class="WpfApplication_BlendShapeTest.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:exshape="clr-namespace:Microsoft.Expression.Shapes;assembly=Microsoft.Expression.Drawing" xmlns:exctrl="clr-namespace:Microsoft.Expression.Controls;assembly=Microsoft.Expression.Drawing" Title="MainWindow" Height="500" Width="640">
Blendの図形の描画
はじめに
Blendから与えられる図形のあつかいは、WPFで標準的に用意されるShape、例えばRectangleやEllipseと同様です。しかしながらいくつかの専用のプロパティが用意されているので、ここではそれらのプロパティについて言及します。
Blendから提供されるすべてのメンバーの正しい情報については公式を確認してください。
※2013.06.09現在最新バージョンは4.5となっていますが、リファレンスは4.0までしか確認できませんでした。
Arc(扇形・円グラフ・パイ形状)
円弧、扇形、円グラフを描画するには、Arcクラスを利用します。
<exshape:Arc Width="50" Height="50" Fill="LightGray" Stroke="Black" ArcThickness="1" ArcThicknessUnit="Percent" StartAngle="45" EndAngle="270" />
- ArcThicknessプロパティ
- 扇形の太さを設定します。値によって中抜きの円グラフなどが作れます。
- ArcThicknessUnitプロパティの値によって、設定する値の単位が変わります。
- Percentのとき、値を相対値で設定します。値の範囲は0-1です。
- Pixelのとき、値を絶対値(pixel)で設定します。
- ArcThicknessUnitプロパティ
- ArcThicknessを相対値で設定するか、絶対値で設定するかを設定します。
- StartAngleプロパティ
- 円弧の開始する角度を設定します。度数法です(ふつう0-360)。
- EndAngleプロパティ
- 円弧の終了する角度を設定します。度数法です(ふつう0-360)。
BlockArrow(矢印)
矢印を描画するには、BlockArrowクラスを利用します。
<exshape:BlockArrow Width="50" Height="50" Margin="0,10,0,0" Fill="LightGray" Stroke="Black" Orientation="Right" ArrowBodySize="0.5" ArrowheadAngle="130"/>
- Orientationプロパティ
- 矢印の向きを設定します。
- Up,Down,Left,Rightの4種類があります。
- ArrowBodySizeプロパティ
- 矢印の本体の太さを設定します。
- 値の範囲は0-1です。
- 0.5が標準でWidthの半分の太さに設定されるようです。
- ArrowheadAngleプロパティ
- 矢印先端の尖った部分の角度を設定します。
- 値の範囲は60-180の度数法です。
- 90が標準で、60のとき3角形、180のとき長方形になります。
RegularPolygon(多角形・星)
3角形6角形10角形といった多角形や、星形などを描画するにはRegularPolygonクラスを利用します。
<exshape:RegularPolygon Width="50" Height="50" Margin="0,10,0,0" Fill="LightGray" Stroke="Black" PointCount="5" InnerRadius="0.47211"/>
- PointCountプロパティ
- いくつの頂点からできる形状であるかを設定します。
- 3角形なら3、6角形なら6を設定します。
- InnerRadiusプロパティ
- 公式には「図形の中心から最も近い点までの距離を取得または設定します。」とあります。
- 「図形の中心」はWidth/Heightの中心なのか多角形の中心なのか定かではありません(確認してません)。
- 「最も近い点」は頂点間を結ぶ辺の上の1点となるようです。
- 値の範囲は0-1です。
- 公式には「図形の中心から最も近い点までの距離を取得または設定します。」とあります。
Callout(吹き出し)
吹き出しを描画するには、Calloutクラスを利用します。
<exctrl:Callout Width="100" Height="30" Fill="LightGray" Stroke="Black" Content="Callout" FontSize="12" CalloutStyle="Cloud" AnchorPoint="0,1.25"/>
- CalloutStyleプロパティ
- 吹き出しの種類を設定します。
- Cloud,Oval,Rectangle,RoundRectangleの4種類があります。
- AnchorPointプロパティ
- 左上を原点として、吹き出しの矢印の位置を設定します。
- 図形の左上を(0,0)、図形の右下(Width,Height)を(1,1)とする相対座標で設定します。
- 値の範囲は特にないようです。Widthの長さ1は、図形のWidthに等しい長さとなります。
- Callout.Width=200のとき、(-1,0)と設定すると、左方向に200の長さの矢印が伸びる。(-0.5,0)なら100になる。
LineArrow(矢印線)
矢印付きの線を描画するには、LineArrowクラスを利用します。
<exctrl:LineArrow Width="30" Height="30" Margin="0,12,0,0" Fill="LightGray" Stroke="Black" ArrowSize="10" BendAmount="1" StartArrow="NoArrow" EndArrow="Arrow" StartCorner="TopLeft"/>
- ArrowSizeプロパティ
- 矢印の先端のサイズを設定します。
- BendAmountプロパティ
- 矢印の曲がり具合を設定します。
- StartCornerプロパティに設定された値によって曲がる方向が異なります。
- 値の範囲は特にないようです。正負の値を反転させることで、曲がる方向が反転します。
- 0のとき、曲がりがなく斜め掛けの直線となります。
- 2次のベジェ曲線のように見えます。
- StartArrowプロパティ
- 線の始点の矢印形状を設定します。
- Arrow, NoArrow, OpenArrow, OvalArrow, StealthArrowの5種類があります。
- 線の始点の矢印形状を設定します。
- EndArrowプロパティ
- 線の終点の矢印形状を設定します。
- Arrow, NoArrow, OpenArrow, OvalArrow, StealthArrowの5種類があります。
- 線の終点の矢印形状を設定します。
- StartCornerプロパティ
- 線の始点の位置を設定します。
- TopLeft, TopRight, BottomLeft, BottomRightの4種類があります。
- 線の始点の位置を設定します。