Partager via


DrawingAttributes

Microsoft Silverlight will reach end of support after October 2021. Learn more.

Represents the appearance of a Stroke object.

<DrawingAttributes   .../>

Managed Equivalent

DrawingAttributes

Remarks

In XAML, the DrawingAttributes object fills the value of the property element syntax for the DrawingAttributes property.

Example

The following JavaScript example simulates three different pen types (pen, marker, and highlighter) by setting the Color, Height, OutlineColor, and Width properties of the DrawingAttributes object. The example creates a DrawingAttributes object and then appends it to the Stroke object. The example then sets the DrawingAttributes properties by one of the three events that simulate a pen type. The EraseCanvas event clears all the Strokes property values from the Canvas.

var agCtrl;
var inkPresenter; // Corresponds to InkPresenter element in XAML.
var newStroke = null; // The Stroke variable for mouse handlers.
// Define DrawingAttributes variables.
var daWidth = 2;
var daHeight = 2;
var daColor = "Black";
var daOutlineColor = "Black";

function root_Loaded(sender, args) 
{
    // Get the HTML object that 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 DrawingAttributes 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.
function InkPresenterMouseMove(sender,args)
{
   if (newStroke != null)
   {
      newStroke.StylusPoints.AddStylusPoints(args.GetStylusPoints(inkPresenter));
   }
}

// Release the mouse button.
function InkPresenterMouseUp(sender,args)
{
   newStroke = null;
   inkPresenter.ReleaseMouseCapture();
}

// Set the DrawingAttributes for a pen.
function SelectPen(sender, args)
{
  daWidth = 1;
  daHeight = 1;
  daColor = "Black";
  daOutlineColor = "Black";
}

// Set the DrawingAttributes for a marker.
function SelectMarker(sender, args)
{
  daWidth = 10;
  daHeight = 4;
  daColor = "Blue";
  daOutlineColor = "Blue";
}

// Set the DrawingAttributes 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 four buttons for selecting 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>