Post
Ask Question

Working With Pen In WPF

Working with Pen in WPF

While a brush is used to fill shapes with colors, a pen is used to draw outlines of a shape.

The Pen element in XAML is used to create a pen at design-time. The Brush and Thickness are only two required attributes you need to set to create a pen. The Brush property represents the brush that is used to draw an outline and Thickness property represents the thickness of the outline.

A Pen can be created by any kind of brushes discussed above and once a Brush is set for a pen, that brush is used to draw the outlines of a shape. The code listed in Listing 30 creates two Pen elements. First Pen is created using a SolidColorBrush and second Pen is created using a LinearGradientBrush.

  1. <!-- SolidColorBrush Pen -->  
  2. <Pen x:Key="SolidYellowPen" Thickness="5" Brush="Yellow" />  
  3. <!-- GradientBrush Pen -->  
  4. <Pen x:Key="YellowGreenBrush" Thickness="5">  
  5.     <Pen.Brush>  
  6.         <LinearGradientBrush>  
  7.             <GradientStop Offset="0.0" Color="Green" />  
  8.             <GradientStop Offset="1.0" Color="Yellow" />  
  9.         </LinearGradientBrush>  
  10.     </Pen.Brush>  
  11. </Pen>  

Listing 30

The code snippet in Listing 31 creates a GeometryDrawing with a Line and two Rectnagle objects` and uses GeometryDrawing.Pen to draw the outline of the GeometryDrawing. As you can see from Pen element, the thickness of Pen is 5.

  1. <Rectangle Width="200" Height="200" Stroke="Black" StrokeThickness="0">  
  2.     <Rectangle.Fill>  
  3.         <DrawingBrush>  
  4.             <DrawingBrush.Drawing>  
  5.                 <GeometryDrawing Brush="Yellow">  
  6.                     <GeometryDrawing.Geometry>  
  7.                         <GeometryGroup>  
  8.                             <LineGeometry StartPoint="25,25" EndPoint="75,75" />  
  9.                             <RectangleGeometry Rect="50,25,25,25" />  
  10.                             <RectangleGeometry Rect="25,50,25,25" />  
  11.                         </GeometryGroup>  
  12.                     </GeometryDrawing.Geometry>  
  13.                     <GeometryDrawing.Pen>  
  14.                         <Pen Thickness="5">  
  15.                             <Pen.Brush>  
  16.                                 <LinearGradientBrush>  
  17.                                     <GradientStop Offset="0.0" Color="Blue" />  
  18.                                     <GradientStop Offset="1.0" Color="Black" />  
  19.                                 </LinearGradientBrush>  
  20.                             </Pen.Brush>  
  21.                         </Pen>  
  22.                     </GeometryDrawing.Pen>  
  23.                 </GeometryDrawing>  
  24.             </DrawingBrush.Drawing>  
  25.         </DrawingBrush>  
  26.     </Rectangle.Fill>  
  27. </Rectangle>  

Listing 31

The output of Listing 31 looks like Figure 36. As you may notice, the outline of rectangles and line is just flat.

Pen in WPF
Figure 36

Now let's add some creativity to the Pen. Pen supports several more properties including StartLineCap, EndLineCap, DashCap, LineJoin, and MiterLimit.

StartLineCap and EndLineCap define the type of shape to use at the beginning and end of a stroke. The value can be flat, square, triangle and round. LineJoin property defines the type of joint used at the vertices of a shape's outline. The value of LineJoin is type of PenLineJoin enumeration that has Miter, Bevel, and Round values. The following code snippet sets StartLineCap, EndLineCap, and LineJoin properties to Triangle, Round, and Bevel respectively.

  1. <Pen Thickness="5" StartLineCap="Triangle" EndLineCap="Round" LineJoin="Bevel" />  

The DashCap attribute property defines how the ends of each dash are drawn. DashStyle property defines the style of dash used in a pen. The value of DashStyle is a member of DashStyles class that can be a Dash, DashDot, DashDotDot, Dot, or Solid. MiterLimit propert represents the limit on the ratio of the miter length to half this pen's Thickness.

The following code snippet sets DashStyle, DashCap, and MiterLimit properties to DotDot, Triangle, and 0 respectively.

  1. <Pen Thickness="5" StartLineCap="Triangle" EndLineCap="Round" LineJoin="Bevel" DashStyle="DotDot" DashCap="Triangle" MiterLimit="0">  

The code snippet in Listing 33 sets some of these properties using attributes of the Pen element,

  1. <Rectangle Width="200" Height="200" Stroke="Black" StrokeThickness="0">  
  2.     <Rectangle.Fill>  
  3.         <DrawingBrush>  
  4.             <DrawingBrush.Drawing>  
  5.                 <GeometryDrawing Brush="Yellow">  
  6.                     <GeometryDrawing.Geometry>  
  7.                         <GeometryGroup>  
  8.                             <LineGeometry StartPoint="25,25" EndPoint="75,75" />  
  9.                             <RectangleGeometry Rect="50,25,25,25" />  
  10.                             <RectangleGeometry Rect="25,50,25,25" />  
  11.                         </GeometryGroup>  
  12.                     </GeometryDrawing.Geometry>  
  13.                     <GeometryDrawing.Pen>  
  14.                         <Pen Thickness="5">  
  15.                             <Pen.Brush>  
  16.                                 <LinearGradientBrush>  
  17.                                     <GradientStop Offset="0.0" Color="Blue" />  
  18.                                     <GradientStop Offset="1.0" Color="Black" />  
  19.                                 </LinearGradientBrush>  
  20.                             </Pen.Brush>  
  21.                         </Pen>  
  22.                     </GeometryDrawing.Pen>  
  23.                 </GeometryDrawing>  
  24.             </DrawingBrush.Drawing>  
  25.         </DrawingBrush>  
  26.     </Rectangle.Fill>  
  27. </Rectangle>  

Listing 33

The output of Listing 33 looks like Figure 37.

Pen in WPF
Figure 37

The Pen object in WPF is used to create a pen at run-time. The code snippet in Listing 34 creates a Pen object at run-time and sets some of these properties.

  1. privatevoid CreateADynamicPen() {  
  2.     // Create two Rectangle and one Line Geometry  
  3.     LineGeometry line1 = newLineGeometry();  
  4.     line1.StartPoint = newPoint(25, 25);  
  5.     line1.EndPoint = newPoint(75, 75);  
  6.     RectangleGeometry rect1 = newRectangleGeometry();  
  7.     rect1.Rect = newRect(50, 25, 25, 25);  
  8.     RectangleGeometry rect2 = newRectangleGeometry();  
  9.     rect2.Rect = newRect(25, 50, 25, 25);  
  10.     // Create a GeometryGroup and add the geometries to it.  
  11.     GeometryGroup geoGroup = newGeometryGroup();  
  12.     geoGroup.Children.Add(line1);  
  13.     geoGroup.Children.Add(rect1);  
  14.     geoGroup.Children.Add(rect2);  
  15.     // Create a GeometryDrawing and add it to a DrawingGroup  
  16.     GeometryDrawing geoDrawing = newGeometryDrawing();  
  17.     geoDrawing.Geometry = geoGroup;  
  18.     DrawingGroup drawingGrp = newDrawingGroup();  
  19.     drawingGrp.Children.Add(geoDrawing);  
  20.     // Create a linear gradient brush with five stops  
  21.     LinearGradientBrush blueBlackLGB = newLinearGradientBrush();  
  22.     blueBlackLGB.StartPoint = newPoint(0, 0);  
  23.     blueBlackLGB.EndPoint = newPoint(1, 1);  
  24.     // Create and add Gradient stops  
  25.     GradientStop blueGS = newGradientStop();  
  26.     blueGS.Color = Colors.Blue;  
  27.     blueGS.Offset = 0.0;  
  28.     blueBlackLGB.GradientStops.Add(blueGS);  
  29.     GradientStop blackGS = newGradientStop();  
  30.     blackGS.Color = Colors.Black;  
  31.     blackGS.Offset = 1.0;  
  32.     blueBlackLGB.GradientStops.Add(blackGS);  
  33.     // Create a Pen to add to the GeometryDrawing  
  34.     Pen blackBluePen = newPen();  
  35.     blackBluePen.Thickness = 5;  
  36.     blackBluePen.LineJoin = PenLineJoin.Bevel;  
  37.     blackBluePen.StartLineCap = PenLineCap.Triangle;  
  38.     blackBluePen.EndLineCap = PenLineCap.Round;  
  39.     blackBluePen.Brush = blueBlackLGB;  
  40.     geoDrawing.Pen = blackBluePen;  
  41.     // Create a DrawingBrush and fill a Rectangle with it  
  42.     DrawingBrush drawingBrush = newDrawingBrush();  
  43.     drawingBrush.Drawing = geoDrawing;  
  44.     // Create a Rectangle and fill with DrawingBrush  
  45.     Rectangle rect = newRectangle();  
  46.     rect.Width = 200;  
  47.     rect.Height = 200;  
  48.     rect.Stroke = newSolidColorBrush(Colors.Black);  
  49.     rect.Fill = drawingBrush;  
  50.     LayoutRoot.Children.Add(rect);  
  51. }  

Listing 34

The output of Listing 34 generates Figure 38.

Pen in WPF
Figure 38


Similar Articles
Mindcracker
Founded in 2003, Mindcracker is the authority in custom software development and innovation. We put best practices into action. We deliver solutions based on consumer and industry analysis.