Expression Blend で Drawing Brush Group

  • Article

複数のブラシ要素をまとめたDrawing Brush Group Object の Expression Blend での作成方法です。

2つのブラシ要素（ここでは画像と半透明の塗りつぶし）を用意します。これを重ね合わせてGridなどでグループ化します。

image

あとは、作成したGridを選んで「ツール」→「ブラシリソースの作成」→「Drawing Brush」でブラシリソースを作成します。

image

以上で完成です。作成したブラシは塗りつぶしの要素として利用できます。

image

XAMLのコードをみるときちんと、DrawingGroup が出来ているのがわかります。

<DrawingBrush x:Key="DrawingBrush1" Viewbox="0,0,168,127" ViewboxUnits="Absolute">
    <DrawingBrush.Drawing>
<DrawingGroup>
            <ImageDrawing Rect="0,0,168,126">
<ImageDrawing.ImageSource>
<BitmapImage CacheOption="OnLoad" CreateOptions="IgnoreImageCache" UriSource="/Dock.jpg"/>
</ImageDrawing.ImageSource>
</ImageDrawing>

            <DrawingGroup Opacity="0.425">
<GeometryDrawing>
<GeometryDrawing.Brush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFF0000" Offset="0"/>
<GradientStop Color="#FF000000" Offset="1"/>
</LinearGradientBrush>
</GeometryDrawing.Brush>
<GeometryDrawing.Geometry>
<RectangleGeometry RadiusX="0" RadiusY="0" Rect="0.5,0.5,167,126"/>
</GeometryDrawing.Geometry>
<GeometryDrawing.Pen>
<Pen Brush="#FF000000" DashCap="Flat" EndLineCap="Flat" LineJoin="Miter" MiterLimit="10" StartLineCap="Flat" Thickness="1"/>
</GeometryDrawing.Pen>
</GeometryDrawing>
</DrawingGroup>

        </DrawingGroup>
    </DrawingBrush.Drawing>
</DrawingBrush>

残念ながら、修正や片方の映像を変えたり色を変えたりするにはDrawing Brush を再定義しなければなりませんが、とりあえず複合要素をもったブラシは作成可能です。