Share via

Width Property (DrawingAttributes)

  • Article

Gets or sets the width of the associated stroke.

XAML
<DrawingAttributes Width="Double" .../>
Scripting
value = object.Width
object.Width = value

Property Value

Double

The width of the associated stroke.

This property is read/write. The default value is 3.0.

Remarks

The discrete Height and Width properties on DrawingAttributes supports creating an ink pen that has a horizontal/vertical stroke bias.

Examples

The following Javascript example simulates 3 different pen types (pen, marker and highlighter) by setting the Color, Height, OutlineColor and Width DrawingAttributes properties . First a DrawingAttributes object is created, then it is appended to the Stroke object. The DrawingAttributes properties are then set by one of the three events that simulate a pen type. The EraseCanvas event clears all the Strokes from the Canvas.

JavaScript 
var agCtrl;
var inkPresenter; // Corresponds to InkPresenter element in xaml
var newStroke = null; // The Stroke variable we'll use here in mouse handlers
// DrawingAttributes variables
var daWidth = 2;
var daHeight = 2;
var daColor = "Black";
var daOutlineColor = "Black";
function root_Loaded(sender, args) 
{
    // Get the html object which contains the Silverlight plug-in
    agCtrl = sender.GetHost();
    inkPresenter = sender.findname("inkPresenterElement");
}
// Capture mouse movement when the left button is pressed and create the stroke
function InkPresenterMouseDown(sender,args)
{
   inkPresenter.CaptureMouse();
   
   newStroke = agCtrl.content.createFromXaml('<Stroke/>');
   
   var da = agCtrl.content.CreateFromXaml('<DrawingAttributes/>');
   newStroke.DrawingAttributes = da;
   
   // Set the drawing attributes properties
   newStroke.DrawingAttributes.Width = daWidth;
   newStroke.DrawingAttributes.Height = daHeight;
   newStroke.DrawingAttributes.Color = daColor;
   newStroke.DrawingAttributes.OutlineColor = daOutlineColor;
   
   newStroke.StylusPoints.AddStylusPoints(args.GetStylusPoints(inkPresenter));
   inkPresenter.Strokes.Add(newStroke);
}
// Add the new points to the Stroke we're working with
function InkPresenterMouseMove(sender,args)
{
   if (newStroke != null)
   {
      newStroke.StylusPoints.AddStylusPoints(args.GetStylusPoints(inkPresenter));
   }
}
// Release the mouse
function InkPresenterMouseUp(sender,args)
{
   newStroke = null;
   inkPresenter.ReleaseMouseCapture();
}
// Set the Drawing Attributes for a pen
function SelectPen(sender, args)
{
  daWidth = 1;
  daHeight = 1;
  daColor = "Black";
  daOutlineColor = "Black";
}
// Set the Drawing Attributes for a marker
function SelectMarker(sender, args)
{
  daWidth = 10;
  daHeight = 4;
  daColor = "Blue";
  daOutlineColor = "Blue";
}
// Set the Drawing Attributes for a highlighter
function SelectHighlighter(sender, args)
{
  daWidth = 25;
  daHeight = 5;
  daColor = "Yellow";
  daOutlineColor = "Yellow";
}
// Erase all strokes from the canvas
function EraseCanvas(sender, args)
{
  inkPresenter.Strokes.Clear();
}

The XAML sample below creates the canvas and 4 buttons that are used to select the different pen types and the erase all feature that is simulated by the Javascript events above.

XAML 
<Canvas xmlns="https://schemas.microsoft.com/client/2007"
        xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
        Loaded="root_Loaded"
        x:Name="root"
        Width="600" Height="400">	
  <InkPresenter
 		x:Name="inkPresenterElement" 
		Background="transparent" 
		Width="600" Height="400" 
		MouseLeftButtonDown="InkPresenterMouseDown" 
		MouseMove="InkPresenterMouseMove" 
		MouseLeftButtonUp="InkPresenterMouseUp"/>
<!-- Pen Button -->
	<Rectangle 
	  Height="30" Width="125" 
	  Canvas.Top="375" Canvas.Left="40" 
	  Stroke="Gray" Fill="Black" StrokeThickness="1.5" 
	  RadiusX="2" RadiusY="2" 
	  Opacity="1.0"/>	  
	<TextBlock 
	  Height="21" Width="78" 
	  Canvas.Top="380" Canvas.Left="71"
	  Foreground="Gray"
	  FontFamily="Verdana" FontSize="12">Select Pen</TextBlock>
	<Rectangle 
	  Height="30" Width="125" 
	  Canvas.Top="375" Canvas.Left="40" 
	  x:Name="selectPen" MouseLeftButtonDown="SelectPen" 
	  Stroke="Transparent" Fill="Transparent" StrokeThickness="1.5"  
	  RadiusX="2" RadiusY="2" 
	  Opacity="1.0"/>
	  
<!-- Marker Button -->
	<Rectangle 
	  Height="30" Width="125" 
	  Canvas.Top="375" Canvas.Left="170" 
	  Stroke="Gray" Fill="Black" StrokeThickness="1.5" 
	  RadiusX="2" RadiusY="2" 
	  Opacity="1.0"/>
	  
	<TextBlock 
	  Height="21" Width="78" 
	  Canvas.Top="380" Canvas.Left="191"
	  Foreground="Gray"
	  FontFamily="Verdana" FontSize="12">Select Marker</TextBlock>
	<Rectangle 
	  Height="30" Width="125" 
	  Canvas.Top="375" Canvas.Left="170" 
	  x:Name="selectMarker" MouseLeftButtonDown="SelectMarker" 
	  Stroke="Transparent" Fill="Transparent" StrokeThickness="1.5"  
	  RadiusX="2" RadiusY="2" 
	  Opacity="1.0"/>
	  
<!-- Highlighter Button -->
	<Rectangle 
	  Height="30" Width="125" 
	  Canvas.Top="375" Canvas.Left="300" 
	  Stroke="Gray" Fill="Black" StrokeThickness="1.5" 
	  RadiusX="2" RadiusY="2" 
	  Opacity="1.0"/>
	  
	<TextBlock 
	  Height="21" Width="78" 
	  Canvas.Top="380" Canvas.Left="310"
	  Foreground="Gray"
	  FontFamily="Verdana" FontSize="12">Select Highlighter</TextBlock>
	<Rectangle 
	  Height="30" Width="125" 
	  Canvas.Top="375" Canvas.Left="300" 
	  x:Name="selectHighlighter" MouseLeftButtonDown="SelectHighlighter" 
	  Stroke="Transparent" Fill="Transparent" StrokeThickness="1.5"  
	  RadiusX="2" RadiusY="2" 
	  Opacity="1.0"/>
	  
<!-- Erase Canvas Button -->
	<Rectangle 
	  Height="30" Width="125" 
	  Canvas.Top="375" Canvas.Left="430" 
	  Stroke="Gray" Fill="Black" StrokeThickness="1.5" 
	  RadiusX="2" RadiusY="2" 
	  Opacity="1.0"/>
	  
	<TextBlock 
	  Height="21" Width="78" 
	  Canvas.Top="380" Canvas.Left="463"
	  Foreground="Gray"
	  FontFamily="Verdana" FontSize="12">Erase All</TextBlock>
	<Rectangle 
	  Height="30" Width="125" 
	  Canvas.Top="375" Canvas.Left="430" 
	  x:Name="eraseCanvas" MouseLeftButtonDown="EraseCanvas" 
	  Stroke="Transparent" Fill="Transparent" StrokeThickness="1.5"  
	  RadiusX="2" RadiusY="2" 
	  Opacity="1.0"/>
</Canvas>

Applies To

DrawingAttributes

See Also

Ink Support In Microsoft Silverlight
Stroke
DrawingAttributes(Stroke)