Export (0) Print
Expand All
Key
M11
M12
M21
M22
Tag
Uri
X1
X2
Y1
Y2
Expand Minimize

Color (DrawingAttributes)

Silverlight

Gets or sets the color of the associated stroke.

<object Color="colorString"  .../>
value = object.Color
object.Color = value

Value

Description

colorString

The Color for a SolidColorBrush expressed as an attribute string. This can be a named color, an RGB value, or an ScRGB value. RGB or ScRGB may also specify alpha information. See the "colorString Grammar" section in Color.

Type: Color

The color of the associated stroke.

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

See Color for details on the various string formats that can be used to specify a color either in XAML or in script. You cannot specify a Brush object element such as LinearGradientBrush for this property value by using property element syntax. You can only use XAML attribute syntax to set Color to a color string, as documented in the "colorString Grammar" section of the Color reference topic.

Setting this property in JavaScript also requires the colorString grammar to specify the value as a string, unless you set it to the value of another object's property that is also a Color. See the "Remarks" section in Color for additional information about the scripting usage of the Color object.

The following JavaScript example simulates three different pen types (pen, marker, and highlighter) by setting the Color, Height, OutlineColor, and Width properties of a DrawingAttributes object. A DrawingAttributes object is first created, and then 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.

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 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 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 preceding example.

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://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>

Community Additions

ADD
Show:
© 2015 Microsoft