DrawingAttributes Object
Represents the appearance of a Stroke.
XAML |
<DrawingAttributes .../>
|
Scripting |
To create an object using scripting, see CreateFromXAML.
|
Properties
Color, Height, Name, OutlineColor, Width
Methods
Equals, FindName, GetHost, GetValue, SetValue
Remarks
In XAML, DrawingAttributes is used to fill the value of the property element syntax for the DrawingAttributes property.
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> |
See Also
Ink Support in Microsoft Silverlight
Stroke
DrawingAttributes(Stroke)