Walkthrough: Is your Windows 8 app too square and boxy? Here are some options.

There are some really great features in XAML that some developers either 1) do not know they are there or 2) never leverage. Well, in this article, I want to talk about techniques you can leverage to move your Windows app away from the tempting, yet commonplace, square and rectangular design. As it turns out, you can accomplish this feat with very little effort. Just turn on your design mind and continue reading.

Clipping

It’s my opinion that “photo bombing” will inevitably be added to the English dictionary. It’s hilarious when I jump up over the head of some unsuspecting  tourist. But, when some schmuck bombs my photos, the hilarity is lost on me. It’s just stupid. Fortunately, with modern photo editing software, I have options. The easiest of which is to simply crop the loser out of the picture.

Clipping and cropping are kissing cousins. They both reduce the boundary of an image (let’s just stick to images for now). A photographer uses cropping to focus the field of view on the subject. A developer uses clipping to do the same thing, but also to add visual interest to an app. Clipping, it turns out, is awesome, powerful, and simple.

UIElement.Clip Property

Gets or sets the geometry used to define the outline of the contents of an element. This is a dependency property. Elements outside the geometry will be visually clipped in the rendered layout.

For Windows 8, specifically: The Clip property gets or sets the RectangleGeometry used to define the outline of the contents of a UIElement. The clipping geometry for UIElement.Clip in the Windows Runtime API must be a RectangleGeometry. You can't specify a non-rectangular geometry, as is permitted in some XAML frameworks like Microsoft Silverlight.

Path

The path class is pretty great. It, basically, let’s you create anything. It’s a vector drawing – ultimately scalable and cool. From MSDN: Draws a series of connected lines and curves. The line and curve dimensions are declared through the Data property, and can be specified either with a path-specific mini-language, or with an object model.

The Data attribute string begins with the move to command, indicated by "M", which establishes a start point for the path in the coordinate system of the Canvas. Path data parameters are case-sensitive. The capital "M" indicates an absolute location for the new current point. A lowercase "m" would indicate relative coordinates. The first segment is a cubic Bezier curve beginning at (100,200) and ending at (400,175), drawn using the two control points (100,25) and (400,350). This segment is indicated by the "C" command in the Data attribute string. Again, the capital "C" indicates an absolute path; a lowercase "c" would indicate a relative path. The second segment begins with an absolute horizontal line to command "H", which specifies a line drawn from the preceding subpath's endpoint (400,175) to a new endpoint (280,175). Because it is a horizontal line to command, the value specified is an x-coordinate.

Something like this:

In the code above, you can see the complex point system for a path. Getting those paths right on a simple path isn’t all that difficult. Getting those path right on a complex path is a nightmare. As a result, you need to use a tool to do that. Don’t do it by hand. Download Design for free!

Let’s watch the video!

Best of luck!