DrawingAttributes (Stroke)
Microsoft Silverlight will reach end of support after October 2021. Learn more.
Specifies the appearance of a Stroke object.
<object.../>
<object.DrawingAttributes>
singleDrawingAttribute
</object.DrawingAttributes>
<object.../>
value = object.DrawingAttributes
object.DrawingAttributes = value
Property Value
Type: DrawingAttributes
The appearance of a Stroke object.
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 in the syntax and in the example.
Example
The following JavaScript example simulates three pen types (pen, marker and highlighter) by setting the Color, Height, OutlineColor, and Width properties of a DrawingAttributes object. The DrawingAttributes object is first created, and then appended to the Stroke object. The properties of the DrawingAttributes object are then set by one of the three events that simulate a pen type. The EraseCanvas event clears all the Strokes from the Canvas.
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, the four buttons that are used to select the different pen types, and the Erase All feature that is simulated by the Javascript events in the previous example.
<Canvas xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
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>