Fun With Shapes - ZigZag

by Avatar Bill Henning (Actipro)
Tuesday, November 4, 2014 at 11:49am

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.

ZigZag2

Instead 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

Fun With Shapes - Triangle

by Avatar Bill Henning (Actipro)
Monday, November 3, 2014 at 6:42am

BlogPostBanner20142Tips

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

For this post, we'll take a look at a new Triangle shape.  Incidentally this shape is used in the MicroTrendIndicator control we recently added to our Micro Charts controls.

Introduction

The triangle shape is a basic triangle that will fill the area you give it.  You use an enumeration to set which side the apex (point) of the triangle is on.

Triangle1

Standard fill and stroke properties can be used to give the shape varied appearances.

Advanced Usage

While a triangle shape standalone might not be very interesting, when it's combined seamlessly into other UI, it can make for some very nice presentations.

Triangle2

In this usage scenario, we use the triangle shape to help build a touch-friendly sort of breadcrumb control.

Triangle3

Here's another breadcrumb usage scenario but in this case, a smaller centered triangle is used to divide the items.

Summary

Although shapes like triangles 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 can use our Triangle class today by downloading the latest versions of our WPF, Silverlight, and WinRT/XAML controls.

TaskDownload TaskLiveDemo TaskBuyNow