Understanding line stroke patterns

Understanding line stroke patterns

WPF provides a number of useful shapes to use in your UI shapes (Rectangle, Ellipse, Line, PolyLine, Polygon, Path). These shape classes have two brush properties: the Fill brush is used to fill the interior of the shape and the Stroke brush is used to paint an outline around the filled interior. If you want the stroke to be visible you must also provide a StrokeThickness as shown in the following XAML.

   <Rectangle  Width='400'
               Margin='30'
               Height='300' 
               Fill='SteelBlue' 
               Stroke='Orange'
               StrokeThickness='15' />

You can exert further control over how the stroke is drawn by modifying additional properties. Let's start by considering the Stroke Dash properties.

Adding dashes to the stroke
The stroke doesn't have to be drawn as a solid entity between two points. You can split the line into a series of dashes with the StrokeDashArray property. As the name implies, StrokeDashArray holds an array of double values. The first value in the DashArray indicates the length of the solid part of the line. The second value in the array indicates the length of the gap. This pattern can continue, add a third value to the array to designate the next solid section length, a fourth value denotes the next gap length and so on. The length is determined by multiplying the array value by the StrokeThickness. In the following example, the lengths are multiples of 15 (solid 30, gap 15,

    Requires Free Membership to View

    Login

    When you register, you'll begin receiving targeted emails from my team of award-winning writers. Our goal is to provide a unique online resource for developers, architects and development managers tasked with building and maintaining enterprise applications using Visual Basic, C# and the Microsoft .NET platform.

    Hannah Smalltree, Editorial Director

    By submitting your registration information to SearchWinDevelopment.com you agree to receive email communications from TechTarget and TechTarget partners. We encourage you to read our Privacy Policy which contains important disclosures about how we collect and use your registration and other information. If you reside outside of the United States, by submitting this registration information you consent to having your personal data transferred to and processed in the United States. Your use of SearchWinDevelopment.com is governed by our Terms of Use. You may contact us at webmaster@TechTarget.com.

solid 45, gap 30).

StrokeThickness='15'
StrokeDashArray='2,1,3,2'

Here is a screen shot showing a (1,1) pattern.

Figure 1 - Pattern (1,1)

Here is a screenshot showing a (5,1) pattern.

Figure 2 - Pattern (5,1)

Adding end caps
By default each solid dash segment is drawn with a flat end cap on each end of the dash. You can change the end caps on the dash by setting the StrokeDashCap property. There are four choices available: Flat, Round, Triangle and Square.

Figure 3 - Triangle Dash Cap


This was first published in March 2010

Disclaimer: Our Tips Exchange is a forum for you to share technical advice and expertise with your peers and to learn from other enterprise IT professionals. TechTarget provides the infrastructure to facilitate this sharing of information. However, we cannot guarantee the accuracy or validity of the material submitted. You agree that your use of the Ask The Expert services and your reliance on any questions, answers, information or other materials received through this Web site is at your own risk.

Back to top