Manish Pansiniya's Blog

.NET, C#, Javascript, ASP.NET and lots more…:)

Expression Blend : Drawing – WPF Tutorial #5

leave a comment »

Hope you refered my Previous Post and read the topics mentioned in the post from UserGuide of Microsoft Expression Blend.

Now the next topic to discuss is Drawing. Please keep open User Guide with you so that we can refer it easily.

In WPF, all the object drawn are the Vector based. Vector Graphics means the object which you place is generated using different points, lines, surfaces rather then pixels. That means when you scale the object, it doesn’t loose the clarity of the control/shape. Also the same would be resolution independant. The benefit of changing graphics from raster to vector is you do not need to implement anything special for different resolution.

You have different tool for different kind of drawing. Following are some of the shapes and selection ICONs.

Shapes and Path

There are 2 things to keep in mind while drawing Vector based graphics. We have option of Shapes or Path. Ellipse, rectangle etc are shapes. While Paths have defined points. Path can be drawn using Pen or Pencil and you can edit and move the points within path. There is always an option to convert shapes to path.

Combining Path/Shapes

You can combine different path or shapes with different option. Put 2 circle in the artboard side by side so that they overlap and fill the circle with color. Now select different option from Object Menu > Combine > (Different Option is there).

You can try each and see it how does it affect the shapes. Else look into the user guide (Drawing section)

Compound Path/Shapes

When you compound path/shapes, the intersection of the shapes are substracted and resulting path would be the remaining portion. You can put 2 shapes and try Compund Path from Object Menu > Path > Compound Path. If option is disabled, just convert the shapes into path and try again.

Opacity Mask under Brush Section

When you change opacity mask the image/shape/path will be converted to opaq shape. Here you are changing Alpha component and that is used for transperancy. I set the 50% transperant to square in following figure. You can see it become transperent like green glass. 🙂

Here, I just show you Drawing section overview. You can complete it from User Guide now. And then Next Post..:P


Written by Manish

October 15, 2007 at 2:03 pm

Posted in .NET, .NET 3.0, WPF

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: