Share via

DrawingAttributes Property

  • Article

Specifies the appearance of the Stroke.

XAML
<object.../>
  <object.DrawingAttributes>
    <DrawingAttributes .../>
  </object.DrawingAttributes>
<object.../>
Scripting
value = object.DrawingAttributes
object.DrawingAttributes = value

Property Value

DrawingAttributes

Specifies the appearance of the Stroke.

This property is read/write.

Remarks

DrawingAttributes is not a collection, it is a representative object that is used to set various properties of the object that will be used in the stroke rendering. To set the DrawingAttributes property in XAML, you must use the property element syntax shown above and in the example.

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 following XAML example 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

Stroke

See Also

Ink Support in Microsoft Silverlight
Stroke
Color
Height
Width
DrawingAttributes