<html dir="ltr" xmlns:mshelp="http://msdn.microsoft.com/mshelp"
xmlns:silverlightsdk="http://msdn.microsoft.com/silverlight" xmlns=
"http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="online documentation, web online help, web help, chm2web" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="generator" content="chm2web Standard 2.7 (unicode)" />
<meta http-equiv="Content-Type" content=
"text/html; charset=utf-8" />
<title>Width Property (DrawingAttributes)</title>
<link rel="stylesheet" href="../../default.css" type="text/css" />
<script type="text/JavaScript" src="../../files/supply.js"></script>
<script type="text/JavaScript">
chmtop.c2wtopf.pageid = "reference/p_drawingattributes_width.htm";
</script>
</head>
<body topmargin="0"><script type="text/JavaScript">
if (window.name != "content")
document.write(" <table width=\"100%\" bgcolor=\"#e1e1e1\"cellspacing=\"2\" cellpadding=\"0\" style=\"border-collapse: collapse; font-family: sans-serif; font-size: 14px; color: #000000; text-decoration: none; \"> <tr> <td align=\"center\" style=\"border-bottom: 2px solid gray\" > <br> Click <a href=\"../../index.html?page=source%2freference%2fp_drawingattributes_width.htm\">here</a> to show toolbars of the Web Online Help System: <a href=\"../../index.html?page=source%2freference%2fp_drawingattributes_width.htm\">show toolbars</a><br> </td></tr></table><br> ");
</script>
<!-- !chm2web! -->
<span id="sdkbannersection"></span>
<div class="tableSection"><span id="sdkbannersection"></span>
<table class="buttonbarshade" cellspacing="0">
<tr>
<td> </td>
</tr>
</table>
</div>
<div class="tableSection"><span id="sdkbannersection"></span>
<table class="buttonbartable" cellspacing="0">
<tr id="hdr">
<td class="runninghead" nowrap="nowrap"><img src=
"../common/logo.png" height="21" alt="Silverlight SDK" />
</td>
</tr>
</table>
</div>
<p><span class="betaboilerplate"><font color="gray" pointsize="8.5"
face="Verdana">[This topic is pre-release documentation and is
subject to change in future releases. Blank topics are included as
placeholders.]</font></span>
</p>
<h1><a name=
"silverlight_drawingattributes_width_property"></a>Width Property
(DrawingAttributes)</h1>
<div id="mainSection">
<div id="mainBody">
<p>The width of the associated stroke.</p>
<div id="syntaxblock">
<table class="auto_syntaxtable" id="syntaxtable" style=
"width: 90%; background: #CCCCCC; border: none;">
<tr id="syntaxtable">
<th class="syntaxblocklanguage" nowrap="nowrap" style=
"width: 150px; background: #EEEEEE; vertical-align: top;">XAML</th>
<td class="syntaxblockcode" style="background:white;">
<div class="codesyntax" style=
"font-family: 'Courier New', Courier, monospace;">
<<i>DrawingAttributes</i> <b>Width</b>="<a href=
"o_double.htm">Double</a>" .../></div>
</td>
</tr>
<tr id="scriptingSyntaxBlock">
<th class="syntaxblocklanguage" nowrap="nowrap" style=
"width: 150px; background: #EEEEEE; vertical-align: top;">
Scripting</th>
<td class="syntaxblockcode" style="background:white;">
<div class="codesyntax" style=
"font-family: 'Courier New', Courier, monospace;"><i>value</i> =
<i>object</i>.<b>width</b><br />
<i>object</i>.<b>width</b> = <i>value</i></div>
</td>
</tr>
</table>
</div>
<span id="propertyvalue"></span>
<h4><span id="propertyvalue">Property Value</span>
</h4>
<p><a href="o_double.htm">Double</a>
</p>
<p>The width of the associated stroke.</p>
<p>This property is read/write. The default value is 3.0.</p>
<span id="remarkssection"></span>
<h4><span id="remarkssection">Remarks</span>
</h4>
<h4>Example</h4>
<p>The following Javascript events simulate 3 different pen types
(pen, marker and highlighter) by setting the <a href=
"p_drawingattributes_color.htm">Color</a>, <a href=
"p_drawingattributes_height.htm">Height</a>, <a href=
"p_drawingattributes_outlinecolor.htm">OutlineColor</a> and
<a href="p_drawingattributes_width.htm">Width</a> <a href=
"o_drawingattributes.htm">DrawingAttributes</a> properties . First
a <a href="o_drawingattributes.htm">DrawingAttributes</a> object is
created, then it is appended to the <a href=
"o_stroke.htm">Stroke</a> object. The <a href=
"o_drawingattributes.htm">DrawingAttributes</a> properties are then
set by one of the three events that simulate a pen type. The
EraseCanvas event clears all the <a href=
"p_inkpresenter_strokes.htm">Strokes</a> from the <a href=
"o_canvas.htm">Canvas</a>.</p>
<div class="snippetdistributor_codesnippet" id=
"select_ink_snip#SelectInk">
<div style="width: 99%;">
<table class="codeexampletable" style=
"border: 1px solid #999999; background: #CCCCCC; width: 99%;">
<tr>
<th class="codelanguagecell" style=
"background: #CCCCCC; text-align: left;">JavaScript</th>
</tr>
<tr>
<td class="codeblockcell" style=
"background: #e6e6e6; border: none;">
<pre class="codeblock" style=
"background: transparent; border: none; margin: 0px; padding: 0px; font-family:'Courier New', Courier, monospace;">
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 plugin
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();
}
</pre>
</td>
</tr>
</table>
</div>
</div>
<p>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.</p>
<div class="snippetdistributor_codesnippet" id=
"select_ink_snip#SelectInkExample">
<div style="width: 99%;">
<table class="codeexampletable" style=
"border: 1px solid #999999; background: #CCCCCC; width: 99%;">
<tr>
<th class="codelanguagecell" style=
"background: #CCCCCC; text-align: left;">XAML</th>
</tr>
<tr>
<td class="codeblockcell" style=
"background: #e6e6e6; border: none;">
<pre class="codeblock" style=
"background: transparent; border: none; margin: 0px; padding: 0px; font-family:'Courier New', Courier, monospace;">
<Canvas xmlns="http://schemas.microsoft.com/client/2007"
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>
</pre>
</td>
</tr>
</table>
</div>
</div>
<span id="appliestosection"></span>
<h4><span id="appliestosection">Applies To</span>
</h4>
<p><a href="o_drawingattributes.htm">DrawingAttributes</a>
</p>
<span id="seealsosection"></span>
<h4><span id="seealsosection">See Also</span>
</h4>
<p>
<!-- <a href="../conceptual/c_silverlight_shapes.htm">Shapes Overview</a>, -->
<a href="o_stroke.htm">Stroke</a>, <a href=
"p_drawingattributes_color.htm">Color</a>, <a href=
"p_drawingattributes_height.htm">Height</a>, <a href=
"p_drawingattributes_outlinecolor.htm">OutlineColor</a>, <a href=
"o_drawingattributes.htm">DrawingAttributes</a>, <a href=
"p_stroke_drawingattributes.htm">DrawingAttributes (Stroke)</a></p>
</div>
</div>
<script type="text/JavaScript">
var fe = FindFrame("toc", top);
if ((fe != null) && (chmtop.c2wtopf.jstree != null)) {
if (chmtop.c2wtopf.FITEMS[chmtop.c2wtopf.pagenum] != chmtop.c2wtopf.pageid)
chmtop.c2wtopf.jstree.OpenTreeNode("source/" + chmtop.c2wtopf.pageid);
}
</script>
<!-- CHM2WEB -->
<!-- DO NOT DELETE OR MODIFY THIS CODE WITHOUT
WRITTEN PERMISSION OF A!K RESEARCH LABS -->
<table width="100%" cellspacing="0" cellpadding="0"
style="margin-top: 0pt; border-collapse: collapse;">
<tr> <td align="right" style="background-color:white; border-top: 1px solid gray;">
<a href="http://chm2web.aklabs.com" target="_blank" style="font-family: sans-serif; font-size: 11px; text-decoration: none;"><font color="gray">Converted from CHM to HTML with <b>chm2web Standard 2.7 (unicode)</b></font></a>
</td></tr></table>
<!-- /CHM2WEB -->
</body>
</html>