Click here to Skip to main content
15,895,011 members
Articles / Desktop Programming / XAML

Silverlight 1.0 Full JavaScript Intellisense

Rate me:
Please Sign up or sign in to vote.
3.81/5 (16 votes)
21 Dec 2007Ms-PL11 min read 31.9K   141   17  
An article about Silverlight 1.0 full JavaScript Intellisense
<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>&nbsp;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>&nbsp;</td></tr></table><br> "); 
</script>
<!-- !chm2web! -->

<span id="sdkbannersection"></span>
<div class="tableSection"><span id="sdkbannersection"></span>
<table class="buttonbarshade" cellspacing="0">
<tr>
<td>&nbsp;</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;">
&lt;<i>DrawingAttributes</i>&nbsp;<b>Width</b>="<a href=
"o_double.htm">Double</a>" .../&gt;</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>&nbsp;<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('&lt;Stroke/&gt;');
   
   var da = agCtrl.content.CreateFromXaml('&lt;DrawingAttributes/&gt;');
   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;">

&lt;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"&gt;    
  &lt;InkPresenter
                x:Name="inkPresenterElement" 
                background="transparent" 
                Width="600" Height="400" 
                MouseLeftButtonDown="InkPresenterMouseDown" 
                MouseMove="InkPresenterMouseMove" 
                MouseLeftButtonUp="InkPresenterMouseUp"/&gt;

&lt;!-- Pen Button --&gt;
        &lt;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"/&gt;      
        &lt;TextBlock 
          Height="21" Width="78" 
          Canvas.Top="380" Canvas.Left="71"
          Foreground="Gray"
          FontFamily="Verdana" FontSize="12"&gt;Select Pen&lt;/TextBlock&gt;

        &lt;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"/&gt;
          
&lt;!-- Marker Button --&gt;
        &lt;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"/&gt;
          
        &lt;TextBlock 
          Height="21" Width="78" 
          Canvas.Top="380" Canvas.Left="191"
          Foreground="Gray"
          FontFamily="Verdana" FontSize="12"&gt;Select Marker&lt;/TextBlock&gt;

        &lt;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"/&gt;
          
&lt;!-- Highlighter Button --&gt;
        &lt;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"/&gt;
          
        &lt;TextBlock 
          Height="21" Width="78" 
          Canvas.Top="380" Canvas.Left="310"
          Foreground="Gray"
          FontFamily="Verdana" FontSize="12"&gt;Select Highlighter&lt;/TextBlock&gt;

        &lt;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"/&gt;
          
&lt;!-- Erase Canvas Button --&gt;
        &lt;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"/&gt;
          
        &lt;TextBlock 
          Height="21" Width="78" 
          Canvas.Top="380" Canvas.Left="463"
          Foreground="Gray"
          FontFamily="Verdana" FontSize="12"&gt;Erase All&lt;/TextBlock&gt;

        &lt;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"/&gt;
&lt;/Canvas&gt;
</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>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Microsoft Public License (Ms-PL)


Written By
JustinAngel.Net, Senior .Net consultant
Israel Israel
Justin-Josef Angel is a C# Microsoft Most Valuable professional, a Senior .Net consultant in Israel with 4 years of .Net experience and has 8 years of Web experience.

Justin's been working this past year on two Enterprise sized Silverlight projects with his customers. During that time he's gained a real-insight into Silverlight's inner workings and how to integrate Silverlight into the real world of software development. Additionally, During that time he's developed a few well-known projects like the "Silverlight 1.0 Javascript Intellisense", "Silverlight 1.1 Hebrew & Arabic Languages support" and a few others you might know.

Justin is also a seasoned presenter with an impressive track-record of talking in front of thousands of people in Israel.

Justin owns the first .Net blog written in Hebrew - http://www.JustinAngel.Net .
And he also owns an additional blog with mixed Hebrew & English content - http://blogs.Microsoft.co.il/blogs/JustinAngel.

A full list of his articles (all 100+ of them) can be found at: http://www.JustinAngel.Net/#index




Comments and Discussions