The Actipro Blog

All the latest UI control development news from Actipro

Fun With Shapes - ZigZag

BlogPostBanner20142Tips

In the 2014.2 versions of our controls for the WPF, Silverlight, and WinRT/XAML platforms we've been adding several new shape controls to our Shared Library that can be very handy in setting up unique interfaces in your apps.

Yesterday's post examined the new Triangle shape.  For today's post, we'll take a look at a new ZigZag shape that is coming in the next 2014.2 maintenance release.

Introduction

The zig-zag shape renders straight lines that cross from one edge of the shape to the other, and back again.  The apex side and the number of apexes to render can be specified.  It's also possible to set whether the "inside" (fill) of the shape is inverted, or moved to the other side of the apexes.

ZigZag1

Standard fill and stroke properties can be used to give the shape varied appearances.  The example on the right above is particularly interesting because it shows how an "inverted" zig-zag provides the left side of the red ribbon.  It is aligned next to a rectangle (behind the "New!") text, which allows it to generate a complex composited shape.

Advanced Usage

Zig-zag shapes are great for use when content requires a separator.ZigZag2Instead of always using a linear horizontal or vertical rule to separate content, the zig-zag shape adds some variety to the user interface.

Summary

Although shapes like zig-zags are small primitive controls, they can be very helpful in creating modern interesting user interfaces that don't rely purely on squares and rectangles.

You will be able to use our ZigZag class once the next maintenance releases of our 2014.2 WPF, Silverlight, and WinRT/XAML controls are published.

TaskDownload TaskLiveDemo TaskBuyNow

Pingbacks and trackbacks (1)+

Comments are closed