Drawing in Silverlight - A quick comparison between 1.0 and 1.1
|
I started playing with silverlight annotation/drawing with the 1.0 version when it was WPF/E, so all of my investment for learning was in javascript. I've been playing finally with the 1.1 .NET version and found that by going right to C#, I have the shortest learning curve since I can copy and paste most of my javascript code and just make some tweaks. The XAML remains the same for both solutions. Here's a comparison between using Silverlight 1.0 and Silverlight 1.1 to create the most basic control for drawing. All it will do is let you draw in black ink. The XAML doesn't Within my XAML control, the InkPresenter exposes three events. I've placed a Rectangle in there as well so that we can see the border of the InkPresenter surface.
<InkPresenter x:Name="InkPresenter"
Width="489" Height="228" Canvas.Left="77" Canvas.Top="102"
MouseLeftButtonDown="InkPresenterOnClick"
MouseMove="InkPresenterMouseMove"
MouseLeftButtonUp="InkPresenterMouseUp" >
<Rectangle Width="490" Height="228" Fill="#FFFFFFFF" Stroke="#FF000000"/>
</InkPresenter>
The code will do a few things: When the user puts the mouse down on the screenIn order to draw, the code starts a new Ink.Stroke and tells the control to CaptureMouse activitiy . The stroke is added to the InkPresenter. Additionally, we set the color and width of the stroke. This is not really necessary in this example, but it sets you up to be able to change the color and width of the pen by having other functions that modify the variables that these values are stored in. As the user moves the mouse, we collect points into the stroke. When the user picks up the mouse, we release the in-memory stroke. In Javascript the code looks like this:
var wpf; var inkPresenter; // Corresponds to InkPresenter element in xaml var newStroke = null; // The Stroke variable we'll use here in mouse handlers var currentColor="#FF000000"; //black currentWidth=3; function root_Loaded(sender, args) function InkPresenterMouseDown(sender,args) function InkPresenterMouseMove(sender,args) function InkPresenterMouseUp(sender,args) In the above code, I had to create my stroke object using createFromXaml. In .NET, of course, I can just create the object! Much of the rest of my code is the same, yet you'll see where there are differences from using the silverlight javascript objects and the .NET objects. using System; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Ink; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; namespace SilverlightInk111 public void Page_Loaded(object o, EventArgs e) void InkPresenterMouseUp(object sender, MouseEventArgs e) |
