(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上であつかってみます。

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から提供されるすべてのメンバーの正しい情報については公式を確認してください。

• Microsoft.Expression.Controls - msdn
• Microsoft.Expression.Shapes - msdn

※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種類があります。

References

• Windows Phone 7 Mango: Expression Blend with 16 New Shapes-GeekChamp