Dante's blog : Blend

The next page!

DanteG — Fri, 10 Jul 2009 21:15:00 GMT

Well, the link isn't QUITE active yet, but if you go to http://expression.microsoft.com/en-us/dd565875.aspx you will see the Overview information for Blend 3, and there's a link to download the Blend 3 RC. Now, at *THIS* particular moment, it doesn't seem like it's up there, but the link on that page should go live very shortly.

I've been with the team for 6 and a half years now, and Blend continues to be something I'm very passionate about. To be completely honest, since I wasn't a big Silverlight fanatic, the jump from Blend v1 to Blend v2 didn't feel like a huge jump. Yes, there were TONS of under-the-cover changes that went into the product, so it could support Silverlight and things like that... but the jump from v2 to v3 is TREMENDOUS. Sketchflow is awesome. Silverlight support is awesome. Behaviors are awesome. Sample Data is awesome. I can go on for days, believe me. (In fact, if you look at all the training classes and things I've done internally, I *HAVE* gone on for days).

Grab it. Check it out. Let me know what you think.

Time to change the world. Again :).

Working with Drawing Brushes

DanteG — Tue, 30 Jun 2009 20:01:00 GMT

Ok folks, I've got a few minutes, and I've been seeing some discussion on our internal lists about Drawing Brushes, how to use them, what they're good for, etc... Sounds like a good time for a Blog post.

First off, what is a DrawingBrush? It's one of the three kinds of TileBrushes that WPF recognizes (along with ImageBrush and VisualBrush). Simply put, it allows you to use a Drawing as a brush, to use on any arbitrary shape.

So, what's a Drawing? A Drawing is simply a set of Visual Elements. You can use pretty much any visuals, rectangles, buttons, Images, etc... but once they become a Drawing, they are no longer interactive. In other words, you can use a Button in a Drawing, but it becomes a 'picture' of a Button, not a real button that can take events, rollover effects, etc... A Drawing is also static. You can't really change it after the fact (Ok, you MAY be able to do it withing code, but I've never tried that).

And, well, since Blend is my area of expertise, I'll demonstrate how to do it with Blend.

(Advance warning... as of right now, Silverlight doesn't support Drawing Brushes, so until they do, this post is only for the WPF crowd, but since we keep seeing more and more of WPF's capabilities moved into Silverlight, it wouldn't surprise me to see DrawingBrushes over there eventually. Also, no, I don't know of any specific plans to move DrawingBrush into Silverlight, and it's possible they never will... I can't tell the future, and I'm not actually on the Silverlight product team).

So, go ahead and fire up Blend and create a WPF Project.

Using the Rectangle Tool, create a rectangle that is 200x100 pixels. Remove the Stroke and set the Fill to a 50% Alpha Red. (#7FFF0000).

Copy and Paste that rectangle, and place the new rectangle adjacent to the first, so it looks like you have a square. Set the Fill of the new Rectangle to have a Fill of 50% Alpha White (#7FFFFFFF).

You should have something like what I'm showing here:

Ok, now group those two rectangles into a Canvas. (You can do Grid too, if you prefer. It really doesn't matter).

Copy and Paste the Canvas, then rotate it 90 degrees. You should start to get an idea of the effect we're looking for here. (Anyone want to go out for pizza?)

To create a DrawingBrush, you need a single base element, and Blend will take all the children and move them into the DrawingBrush for you. At the moment, the two Canvas elements are siblings, and their only parent is the LayoutRoot, which isn't going to work. So, group the two Canvas elements into another Canvas. The visual tree should look like this:

Now, select that base Canvas (the one I have selected in the image above), and in the Tools Menu, select "Make Brush Resource" and "Make Drawing Brush". You're going to get the "Create Resource" dialog, since TileBrushes are handled, by Blend, as resources. Go ahead and set the name and scope to whatever you want and hit Ok.

If it looks like nothing happened, that's Ok. What it did was copy all of the contents of the selected Rectangle and create a Drawing out of them, and create a resource for you. If you don't believe me, switch over to the Resources pane, and look for the Drawing Brush.

In fact, now, we don't even need the original canvas any more, so go ahead and delete it.

Now draw a nice big rectangle (or you could even use your LayoutRoot, if you wanted to).

Go to the Property Inspector, and set the Fill to the new DrawingBrush. It should paint your rectangle with our red cross hatch. Grab the BrushTransform tool, and your rectangle's corner adorners will show up, just as if you were going to resize it. However, when you grab the bottom right adorner and drag it up, you'll see that you're resizing the BRUSH, and not the whole rectangle. That's exactly what you want. In the Image below, I've given my rectangle a thick, black stroke, so you can see that I've resized the FILL, and not the whole rectangle.

You'll also notice that as soon as you do this, you'll break the connection from the DrawingBrush resource. That's Ok. The Resource is of the two rectangles at a specific size, and in this case, we want to have our brush tile for us.

The final step is to set the TileMode on the Fill to Tile. You can also use the BrushTransform tool to mess with the Brush a bit more... maybe rotate it or give it a skew, and you'll get something like this:

There you have it. You can continue to experiment... try taking the Stroke off the rectangle you just made, and convert *IT* into a Drawing Brush, and reuse it. Maybe try with a FlipXY, and you can get wild pretty quickly. Here's a quick example of something I threw together using two rectangles and an ellipse, and just keep reusing the "Make Drawing Brush" command with the Brush Transform tool.

Now, a feature that some folks probably don't know about, is that you can actually edit a DrawingBrush after the fact. To do so, follow these instructions:

Switch to the Resources pane.

Drag the DrawingBrush that you want to edit to the artboard. You'll get a context menu as normal, but there's an option to "Copy DrawingBrush to Canvas". When you do this, you'll get a Canvas with your DrawingBrush exactly as it was before you made it into a DrawingBrush at the beginning.

Go ahead and make any changes you want. (Maybe if you were following the steps here, you'll want to change the 50% white rectangle to a completely empty rectangle, which will change the visuals slightly.

When you're done, right click the BASE canvas that was created, in the Timeline, and you'll find commands for "Move into Source DrawingBrush" or "Copy into Source DrawingBrush". If you choose Move, the canvas that was created will be destroyed, but the information will be moved into your resource. If you choose Copy, it will update the resource, but not delete your Canvas. This latter option is helpful if you just want tweak your brush, see how it looks, and so on.

Remember, though, that as soon as you used the Brush Transform tool, it broke the resource connection, so if you followed THESE steps, you're not going to see it update immediately in the full tablecloth, but you should be able to take the updated DrawingBrush and go through the last steps pretty easily.

Have fun with it!

Cre8 and ZAAZ

DanteG — Wed, 20 May 2009 23:21:00 GMT

This is particularly overdue, but now that I've been featured on the Expression community site, I really need to get back to posting again :).

Last month ago, I got the opportunity to present at the Cre8 summit in Orlando. I gave two presentations, one on Sketchflow in Expression Blend and one on Blend in general. I was also given the chance to give a keynote during lunch on the second day to show off Sketchflow.

I have to say, that this was one of the most nerve wracking things I've done, speaking to a community of Designers who are still only starting to look at Microsoft products seriously for Web Design. Every eye was on me, and I'm quite happy with how Blend behaved for me. I had plenty of folks compliment the speech, and they were shocked when they heard it was my first.

Blend is really starting to take a serious turn toward being a real competitor. I can feel that by the questions I get asked when I'm talking to folks. We're getting less of the "So, what is this all about?" questions, and more people asking about specifics like Silverlight penetration and the relative complexities between making a prototype in Sketchflow versus working in Visio or Powerpoint. It's building a lot more excitement, and that's just awesome to be a part of.

Recently, I also got a chance to go visit ZAAZ here in Seattle. These are folks who do both Silverlight and Flash development, but they're looking at Sketchflow for doing prototypes in either environment. The most priceless moment was when I was showing off Behaviors in Sketchflow, and one of the designers looked up and said "That f***ing rocks!" It's one thing to work six years on a product, and know in your heart how great it is, and how much it's going to change the landscape, but to have someone looking at it for the first time put it into words... it's a real thrill.

We're doing more internal training classes. More folks are getting interested, and the momentum is really building. I can't wait to unleash this one.

And yes, I'm going to get back on the technical tricks very soon. I've been getting some good questions on DrawingBrush, and there's some functionality that isn't as discoverable as I'd like.

Featured!

DanteG — Mon, 03 Mar 2008 19:35:00 GMT

Well, I just had it pointed out to me, that my blog is now listed on http://expression.microsoft.com. I'm actually pretty excited to see myself up there. It does, however, make me realize that I should spend a little time sprucing up the look of my blog.

The current theme is something like "Fire", which I chose because of my love for the elements. You can figure it out... a thought of 'hot software' and the like. But, I'm not saying that Blend isn't 'hot' any more... just that I need to figure out a new 'feel' for my blog.

So, if it seems to change a couple times in the near future, it's just me getting a feel for new looks and such. I will continue to post new thoughts and ideas as I go along. Now that the big thing I was working on (which, naturally, I can't say anything about yet), I should have some more time to play and find new things out. I've been experimenting with font embedding and custom characters, and that should be a pretty cool post coming soon!

Moving objects around interactively

DanteG — Fri, 22 Feb 2008 01:08:00 GMT

I was playing around with Blend today, and decided that I wanted to write a function to allow my user to drag the shapes around on my artboard. Granted, this could use a bit of polish, since there are some tweaks that would make it a bit better, but the overall sense should work.

For starters, we need to add a couple private variables to our Window... so I added these three lines:

private Point initialDragPoint = new Point(0, 0);

private Point currentDragPoint = new Point(0, 0);

private bool dragging = false;

My naming may not be the best, but what I'm setting up here is to keep track of where I clicked the mouse on my object, and for any mouse event, where I am now. I'm also setting up a boolean flag, just to make the code a bit cleaner.

Now, I've already opened Blend, and created a Rectangle. Also, since I don't really want/need all of the layout power of the Grid, I've changed the layout type of my root element to a Canvas. You COULD do this whole thing with RenderTransforms, but in this case, I think that's just more hassle then it's worth.

We need to hook up three events... MouseDown, MouseMove and MouseUp. We'll start with MouseDown...

private void StartMove(object sender, System.Windows.Input.MouseButtonEventArgs e)

{

if (!this.dragging)

{

this.initialDragPoint = e.GetPosition(this);

this.dragging = true;

}

Ok, this method won't do a whole heck of a lot, but what it does is remember the point where the mouse came down, then swap the flag to remember that we're now moving. You'll want to hook this event up to the "MouseDown" event on your shape(s) that you want to allow the user to move.

Next, we'll do MouseUp (which is when the user releases the mouse button).

private void EndMove(object sender, System.Windows.Input.MouseEventArgs e)

{

if (this.dragging)

{

this.dragging = false;

}

Again, another simple one... all we do is tell our system that we're done dragging when the user lets go of the mouse button. Finally, the workhorse... MouseMove.

private void Moving(object sender, System.Windows.Input.MouseEventArgs e)

{

if (this.dragging)

{

this.currentDragPoint = e.GetPosition(this);

Vector dragVector = this.currentDragPoint - this.initialDragPoint;

FrameworkElement actor = sender as FrameworkElement;

double curLeft = (double)actor.GetValue(Canvas.LeftProperty);

double curTop = (double)actor.GetValue(Canvas.TopProperty);

curLeft += dragVector.X;

curTop += dragVector.Y;

actor.SetValue(Canvas.LeftProperty, curLeft);

actor.SetValue(Canvas.TopProperty, curTop);

this.initialDragPoint = this.currentDragPoint;

}

Let's look at it piece by piece.

First, obviously, we only want to do something if we're currently dragging. So, we gate the whole method to only act if this.dragging is true.

Next, we figure out where the mouse currently is. e.GetPosition(this) does that for me. For the record, the 'this' as an argument just says that I want the point relative to the window. Since I used (this) in MouseDown as well, both of my points will be in the same scale.

To see how this works, let's say that when we did the MouseDown, we were 100 pixels down and 100 pixels to the right of the top left of our window. Then, when we got the MouseUp, we were 120 pixels down and 120 pixels to the right. So, this.initialDragPoint would be (100,100). The e.GetPosition(this) sets the currentDragPoint to (120,120).

The next step is to calculate our dragging Vector. We want our rectangle to move down and to the right, so the calculation is easy... Now, I could have used a Point just as easily, but I tend to think of this as an actual movement vector, so I used the Vector class instead. dragVector gets set to (120-100, 120-100) or (20,20), which is the movement we want on our rectangle.

Next, I need to get the actor (or the shape that my user is moving), and I need it as a FrameworkElement. By casting it to a Framework element, this same code would work for anything... a Grid with a bunch of elements in it... a single rectangle... pretty much anything.

Then, I just use GetValue to get the current Left and Top (see why I wanted to use a Canvas), adjust them by the dragVector, and then set those values.

Finally, the last thing I need to do, is set THIS point as my new base point, so that the new drag is relative to here. Imagine if I hadn't reset it, and then moved the mouse 20 more pixels to the right. The initial point would be 100,100, but the new dragPoint would be (140,120), so my rectangle, which I already moved 20x20 pixels, would be moved another 40x20 pixels. That's no good. So, updating that base value is important.

Granted, there are still some quirks here... for instance, you could start the drag with the left mouse button, then press the right mouse button while dragging... then releasing EITHER button would drop it. I'm sure there are plenty of refinements... but the point is that this should give everyone a good starting point.

MIX '08

DanteG — Thu, 14 Feb 2008 01:28:00 GMT

~~Well, it's official, I'm going to be presenting at the MIX convention!~~

~~I'm really excited for this, although it's going to be busy for a little while. We need to do dry runs and such. The tentative title is "Unlocking the Creative Genome", but that title may change.~~

I don't know how many folks who read my blog will be at MIX, but if you are, please stop by and introduce yourself. I'm also going to be in the Expression Blend sandbox, helping folks out with labs and such. I'll send more information as I get it.

If you're not familiar with the MIX, check out http://www.visitmix.com.

CORRECTION: Due to technical issues, my trip to the MIX has been cancelled. My apologies to anyone who was planning on coming to see me there. :(

Transparent Windows and how to Resize them

DanteG — Wed, 21 Nov 2007 22:44:00 GMT

A teammate came to talk to me, because he's working with a semi-transparent window, with no Border, and he wants to be able to resize it. Allowing a user to move, minimize, maximize and close it are easy, but how to resize?

Well, this is actually pretty easy. There is a property on the Window named ResizeMode, and if you set it to "CanResizeWithGrip", then a ResizeGrip control is placed on your window automatically, and if you run the app, it will, correctly, resize your window.

But, the default grip is six small squares arranged in a SE-pointing triangle. And, if you look in Blend, that control isn't actually in the XAML, so there's no way to modify it. You can't even make it transparent to put a customized control 'under' it. And it's magical, in that it you can't possibly get another control on top of it, even with Bring To Front... So, how do you customize the look and feel of that control?

You'll find that you can create a new ResizeGrip control, and place it in the bottom right, but you will find that it will be rendered under this mystical ResizeGrip, so no customization there either...

Under the covers, here's the problem. That ResizeGrip is not 'technically' part of the Window. Just as WPF is about to instantiate the window, it sees that the ResizeMode is set to CanResizeWithGrip, and it creates that grip for you in the SE corner. It simply instantiates the control, sets the properties to show up in the bottom left, and that's it. Unfortunately, this means that you can't modify any of the properties on it, since it's actually created when the Window is Instantiated.

I suppose, if you wanted to, you could, in code, track down that control by looking at the children of the Window, although I'm not even sure it *IS* technically even there.

You could also create your own custom control (probably inherited from Thumb), and implement all your own MouseDown/Up/Move code to do your resizing for you.

Thankfully, here's a better solution. Drop a ResizeGrip somewhere on your document, and edit a copy of the template. But, when the dialog comes up to let you know that you're creating a new Template, click the "Apply To All" radio button, instead of supplying a name. By specifying Apply To All, you're telling WPF that any new controls of this type, unless they specify a new template, should use the template that you're creating at this moment. Go ahead and trick out the ResizeGrip however you want in the Template, then delete the ResizeGrip that you created at the beginning of this process.

Now, you've got a new default ResizeGrip template, so now when WPF instantiates that ResizeGrip, it gets your new default template, and gets the look and feel you want.

The obvious question, now, is that once you've done this, what if you want different ResizeGrips for different areas of your window? I.e. maybe my dialogs that show names have a resize grip with a yellow smiley face, but my dialogs for error messages show a little horned devil.

Two points here... First, when you define your new default template, you can specify the scope. So, if you scope your new template to the Application, then ALL your ResizeGrips will look identical. However, if you scope it to individual windows, those windows can have different templates.

Second, there's nothing stopping you from creating a template whose appearance is a transparent block. Then, you can simply put whatever you want your grip to look like at the bottom right, and the real resize grip will be rendered on top, but since it's transparent, you won't see it... you'll just get the functionality. Of course, if you're going to try this route, make sure your little smiley faces or whatever are laid out in such a way that they'll stay at the bottom right :).

Enjoy!

PS: If folks don't know how to set up moving/close/minimize behavior on transparent windows, give me a shout, and I'll put something here for those scenarios.

XBox 360 Live Gamertags in Blend!

DanteG — Fri, 26 Oct 2007 00:23:00 GMT

The honorable Major Nelson just posted that someone created a Vista Gadget that will display the GamerTag information for your friends on XBox Live. Well, for those who don't know, if I'm not mistaken, Vista Gadgets are generally written in Silverlight (Please correct me if someone knows better).

But, how to get that information? Well, Silverlight doesn't have Databinding yet, but WPF does. If you check out the Major's post, he points you to a Microsoft Evangelist by the name of Adam Kinney who wrote the gadget. Following him, you end up with Duncan Mackenzie who talks about how to connect to his services and get GamerTag info.

Here, to make things easier, open up Blend, and try this:

Create a new project, and then click +XML in the Data Pane. The dialog will come up asking for DataSource info. Paste this into the URL for the XML Data:

http://duncanmackenzie.net/services/GetXboxInfo.aspx?GamerTag=LordSaphon

Now, check out the Data pane. You'll see XboxInfoDS, which you can expand to see a bunch of data fields. If you drag out the "Gamertag (string)" onto the design surface and create a Label, it will proudly display "LordSaphon" (since that was the Gamertag you supplied in the URL, and yes, I am LordSaphon).

You can go ahead and drag the GamerScore, ReputationImageUrl and so on out to the artboard and you'll see those fields displayed as well. Please, don't laugh at my GamerScore... I know it's not huge :).

Remember that any field that is an image Url should probably be bound to an Image control. You can create your own WPF Gamertag application. It also shouldn't be too difficult to modify the Source property of the DataSource, so you can dynamically switch which user you want to display!

Enjoy!

--Dante (LordSaphon on XBox Live)

PS: The service I'm using for getting the XBox Live information is on a webpage not affiliated with Microsoft (as far as I know), so if that information changes, the results you get are beyond my control. This information is provided "as-is", so don't hold me or Microsoft responsible if you get anything unexpected from the site.

References:

Duncan Mackenzie: http://duncanmackenzie.net/blog/put-up-a-rest-api-for-xbox-gamertag-data/default.aspx

Adam Kinney: http://adamkinney.com/blog/272/default.aspx

Major Nelson: http://majornelson.com/archive/2007/10/25/xbox-friends-watch-a-sidebar-gadget-using-silverlight.aspx

Changing the selection color in a ListBox

DanteG — Mon, 15 Oct 2007 23:36:00 GMT

I just worked through figuring this out today, and since it was sufficiently irritating, I thought I'd post it here. Plus, I don't want all my 'loyal readers' to think I've disappeared :).

Anyway, in the application I'm working on, I have a ListBox with specific elements in it. If it were databound, I know how to change the selection color, but in this case, I couldn't seem to figure out how to get anything except the System Colors.

If you want to see what I mean in Blend, drop a ListBox on the artboard and using the Right Click menu, add a couple ListBoxItem to it. Now, run the app. When you select any of the items, it is highlighted in whatever color your computer has as the SelectedItem color (On my machine, it's Silver, because I'm using XP with a Silver color scheme).

However, digging through the properties of the ListBox, I couldn't find which property was bound to that System Resource. So, how could I override it and change it.

Here are the steps I eventually had to do: (These are the steps from the start)

Create a ListBox
Add a ListBoxItem to the ListBox
Select the ListBoxItem
Edit the Template of the ListBoxItem (Remember the name, you'll need it later)
Now, in the Triggers pane, choose the property trigger for "IsSelected = True"
Select the Bd element
In the Property pane, you will see that next to the Background brush, the property marker (the little square) is green. This is indicating that it's using a resource. Just change the brush type to something else, and the marker will switch back to white. You can now edit the background to whatever you want.

Now, with the IsSelected Property Trigger selected, any changes you make will be put into the Template, and you're good to go. You will probably want to go back to the root (using the scope up button), and assign that Style to all the ListBoxItem, so select them all in the Object Tree, and set the Style property to the local resource that was created in step 4 above.

Repeating an animation

DanteG — Fri, 03 Aug 2007 22:29:00 GMT

It may not be a huge revelation for other folks, but with some of the testing I've been doing, I really started getting frustrated with some stuff.

Specifically, I've got a fairly complex animation, and I want it to repeat forever. However, setting the repeat count on each and every property that I'm animating is rather tedious. "Set the repeat count on the X Rotation... set the repeat count on the Y Rotation... set the repeat count on the X Skew... *sigh*... Set the repeat count on the Y Skew..." etc...

Now, you can't set the repeat count on a composite keyframe in the hopes that the RepeatCount will be propogated downward inside Blend (Yes, I've asked my PMs for that feature, and MAYBE it will make it into the product some day, but who knows...).

So, how do you handle this? Now, I'm sure the XAML experts already knew this, but if you go into the XAML, you can just add RepeatBehavior="Forever" to the Storyboard. The XAML now looks like:

<Window.Resources>
<Storyboard x:Key="Timeline1" RepeatBehavior="Forever">

And that's it. Now, the animation will start at the beginning, run until the time when all the existing animations have ended, then start over again.

Again, most of the XAML folks probably already knew this, but I thought it was pretty cool.

One of the worst parts of my job...

DanteG — Fri, 27 Jul 2007 21:34:00 GMT

Is when I can't talk about something!

By now, most folks should be downloading the August preview of Expression Blend 2, which I'm super excited to see finally getting out. (If you didn't already know... Get it HERE)

But, one of the features that I've been testing personally is one I'm really excited about, but got cut from the August preview for a variety of reasons. For obvious reasons, I can't say what the feature was and why it was cut. And that drives me CRAZY sometimes!

I can't wait to start talking about the new feature, what you can do with it, how much fun I've had playing with it and so on... and now I have to wait until our next tech preview. And even *I* don't know how long that's going to be. (No, it's not a case of "I know but can't say in a public forum", but I actually don't know).

Ah well, I guess my loyal readers will just have to wait and see.

And, for the record, I should have a new blog post coming out soon that describes how to do a parameterized Value Converter. In the Total Training series (Check out http://totaltraining.com/microsoft for details), I go over how to create a Value Converter that changes a control different colors based on the value (I.e. if it's greater then 90, turn it green, etc...). However, I had someone ask me privately how to create a generic one that you could configure. I've got a couple solutions, and I'm putting the polish on those now.

Calligraphy In Ink! (Part 2)

DanteG — Thu, 21 Jun 2007 01:09:00 GMT

Ok, see this is what happens when I have some time to 'play' with Blend.

My previous post showed how to modify the stylus tip to get something akin to a calligraphy pen. But, the pen that I got most recently got is called a scroll point. The tip itself looks like a fairly broad pen, but there's a 'gap' in the middle, so it's effectively drawing two parallel lines. You use the same gestures you'd use with a normal pen, it just looks somewhat different. (Sorry, I can't seem to find a bloody link on the web to show you what I'm talking about).

So, I want to duplicate THIS effect. It's a bit trickier then it was with the widening the tip, but it's still doable.

First, I need to implement my own handler for when I'm working with the Stylus, so I can intercept the event and add the second (and for fun) third line. I only want to draw when the stylus is down, so easily enough, add a property on the paper for when we're drawing. (Now, here I was a bit lazy and did it on the Window itself, but moving it the paper should be easy enough).

public partial class Window1

{

bool drawing = false;

public Window1()

{

this.InitializeComponent();

}

private void OnStylusDown(object sender, System.Windows.Input.StylusDownEventArgs e)

{

this.drawing = true;

}

private void OnStylusUp(object sender, System.Windows.Input.StylusEventArgs e)

{

this.drawing = false;

}

(Of course, I do need to hook the StylusDown and StylusUp events up correctly, but that's trivial in Blend). Ok, now I can just check this.drawing, and if it's true, then the Stylus is actually on the surface. All I need to do, is when I'm drawing, add another stroke. So, add a StylusMove event:

private void OnStylusMove(object sender, System.Windows.Input.StylusEventArgs e)

{

if (this.drawing)

{

StylusPointCollection originalPoints = e.GetStylusPoints(Paper);

StylusPointCollection newPoints = new StylusPointCollection();

StylusPointCollection moreNewPoints = new StylusPointCollection();

foreach (StylusPoint thisPoint in originalPoints)

{

newPoints.Add(new StylusPoint(thisPoint.X + 3, thisPoint.Y + 3, thisPoint.PressureFactor));

moreNewPoints.Add(new StylusPoint(thisPoint.X + 6, thisPoint.Y + 6, thisPoint.PressureFactor));

}

Paper.Strokes.Add(new Stroke(newPoints));

Paper.Strokes.Add(new Stroke(moreNewPoints));

}

Add this and run it, and it's almost there. You'll see the additional lines get added, but there's one 'stupid' issue. if you look, the second and third strokes, depending on your speed, will look somewhat dotted. Here's what's happening. Let's say, for the sake of argument, that based on your drawing speed, the StylusMove is getting called each time with 3 points. Consider when you draw a line of length 9. The original line will correctly connect every point, 1 to 2, 2 to 3, 3 to 4 and so on.

However, in our instance, the StylusMove gets called with points 1, 2 and 3, so it creates a stroke connecting those three points. It gets called the second time with points 4, 5 and 6, and it creates that stroke. Here is the problem... nothing ever connects points 3 and 4! So where the original stroke is 9 connected points, our added strokes are three seperate strokes, each three points long, and disconnected.

Well, that's no good. So, we need to remember what point 3 was, so that when we start the next stroke segment, we use that as our initial point and connect there. So, in effect, instead of 1-2-3 4-5-6 7-8-9, we end up with 1-2-3 3-4-5-6 6-7-8-9, and since 3 and 3 match, it works.

However, once the Stylus comes off the page, we want to forget that final point, otherwise, we'd be always attaching the end point to the begin point of the new stroke, and that's obnoxious.

So, start by adding two new properties, one for the last detected point, and one for whether or not we're 'remembering' a point.

StylusPoint lastDetectedPoint = new StylusPoint();

bool drawingContinuousLine = false;

So, whenever drawingContinuousLine is set to true, we need to initialize the newPoints and moreNewPoints collections to that lastDetectedPoint (adjusted, of course, by 3 and 6 respectively). And, every time we add a new stroke in the StylusMove, we need to remember that lastDetectedPoint and state that we are drawing.

private void OnStylusMove(object sender, System.Windows.Input.StylusEventArgs e)

{

if (this.drawing)

{

StylusPointCollection originalPoints = e.GetStylusPoints(Paper);

StylusPointCollection newPoints = new StylusPointCollection();

StylusPointCollection moreNewPoints = new StylusPointCollection();

if (this.drawingContinuousLine)

{

newPoints.Add(new StylusPoint(this.lastDetectedPoint.X + 3, this.lastDetectedPoint.Y + 3, this.lastDetectedPoint.PressureFactor));

moreNewPoints.Add(new StylusPoint(this.lastDetectedPoint.X + 6, this.lastDetectedPoint.Y + 6, this.lastDetectedPoint.PressureFactor));

}

foreach (StylusPoint thisPoint in originalPoints)

{

newPoints.Add(new StylusPoint(thisPoint.X + 3, thisPoint.Y + 3, thisPoint.PressureFactor));

moreNewPoints.Add(new StylusPoint(thisPoint.X + 6, thisPoint.Y + 6, thisPoint.PressureFactor));

}

Paper.Strokes.Add(new Stroke(newPoints));

Paper.Strokes.Add(new Stroke(moreNewPoints));

this.drawingContinuousLine = true;

this.lastDetectedPoint = originalPoints[originalPoints.Count - 1];

}

And, last but not least, we want to make sure that on StylusUp, add state that we're no longer drawing a ContinuousLine, so our strokes correctly stop getting drawn.

private void OnStylusUp(object sender, System.Windows.Input.StylusEventArgs e)

{

this.drawing = false;

this.drawingContinuousLine = false;

}

And there you have it. Here's the final code (if you don't want to go hunting and pasting throughout my code). In order to make this work:

Create an InkCanvas, and name it Paper
Hook StylusUp, StylusDown and StylusMove to OnStylusUp, OnStylusDown and OnStylusMove respectively
Add the code
Enjoy

Note that this will only work with an actual Stylus, so you can't use a Mouse to mock it up. However, it wouldn't be too hard to add the code to work with a Mouse as well.

public partial class Window1

{

bool drawing = false;

StylusPoint lastDetectedPoint = new StylusPoint();

bool drawingContinuousLine = false;

public Window1()

{

this.InitializeComponent();

}

private void OnStylusMove(object sender, System.Windows.Input.StylusEventArgs e)

{

if (this.drawing)

{

StylusPointCollection originalPoints = e.GetStylusPoints(Paper);

StylusPointCollection newPoints = new StylusPointCollection();

StylusPointCollection moreNewPoints = new StylusPointCollection();

if (this.drawingContinuousLine)

{

newPoints.Add(new StylusPoint(this.lastDetectedPoint.X + 3, this.lastDetectedPoint.Y + 3, this.lastDetectedPoint.PressureFactor));

moreNewPoints.Add(new StylusPoint(this.lastDetectedPoint.X + 6, this.lastDetectedPoint.Y + 6, this.lastDetectedPoint.PressureFactor));

}

foreach (StylusPoint thisPoint in originalPoints)

{

newPoints.Add(new StylusPoint(thisPoint.X + 3, thisPoint.Y + 3, thisPoint.PressureFactor));

moreNewPoints.Add(new StylusPoint(thisPoint.X + 6, thisPoint.Y + 6, thisPoint.PressureFactor));

}

Paper.Strokes.Add(new Stroke(newPoints));

Paper.Strokes.Add(new Stroke(moreNewPoints));

this.drawingContinuousLine = true;

this.lastDetectedPoint = originalPoints[originalPoints.Count - 1];

}

private void OnStylusDown(object sender, System.Windows.Input.StylusDownEventArgs e)

{

this.drawing = true;

}

private void OnStylusUp(object sender, System.Windows.Input.StylusEventArgs e)

{

this.drawing = false;

this.drawingContinuousLine = false;

}

Calligraphy in Ink!

DanteG — Thu, 21 Jun 2007 00:06:00 GMT

Ok, this is something I think is kinda cool... one of my side hobbies is calligraphy. I've been doing it since I was in early high school, and there's something graceful in the old style of writing. Well, as far as I knew, an InkCanvas only allows either a single rectangle or ellipse tip, which is pretty much set.

Well, that's not true. I did some experimenting, and by using the StylusTipTransform property on the DefaultDrawingAttributes of an InkCanvas, you can create whatever tip you want. Check this code out, that I call in the Window1 constructor: (My InkCanvas is named "Paper").

public Window1()

{

this.InitializeComponent();

Paper.DefaultDrawingAttributes.StylusTipTransform = new RotateTransform(-45).Value;

Paper.DefaultDrawingAttributes.Width = 20;

Paper.DefaultDrawingAttributes.StylusTip = System.Windows.Ink.StylusTip.Rectangle;

Paper.DefaultDrawingAttributes.IgnorePressure = false;

// Insert code required on object creation below this point.

}

Try that out, and it works pretty cool! Now, changing the Width of the tip makes a small or wider nib, and you do get slightly different looks if you change the StylusTip from Rectangle to Ellipse or turn on IgnorePressure. Actually, the way it works right now, I prefer the IgnorePressure to be ON, then it looks more like you're doing calligraphy with a pen, as opposed to with it off, it looks like you work with a brush.

So, the next thing I want to do (and I should be able to figure something out), is to get a dual line. I got my hands on a neat calligraphy marker that has two tips and a space between it. It's hard to visualize, but imagine if you draw a straight line, what you actually get are two straight lines spaced a little bit apart.

Command line arguments

DanteG — Wed, 13 Jun 2007 03:41:00 GMT

Ok, this was really bugging me... I needed to figure out how to create a Window application, and parse in the command line arguments. I know how to do it with a Console application, but not a Window app. So, how do you do it?

Well, it's a little tricky, but it can be done.

First, you need to add an event handler to the Application (App) itself, so go into App.xaml and add an event handler for Startup. The code will now look like this (I added the lines in Italics):

<Application

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

x:Class="DragSource.App"

StartupUri="Window1.xaml"

Startup="app_Startup">

<Application.Resources>

</Application.Resources>

</Application>

Now you need to define that method in your application, and you need a place to put it. So, open App.xaml.cs. Define a string[] to hold the arguments, and handle the event. Easily enough:

public partial class App: System.Windows.Application

{

public static string[] args;

void app_Startup(object sender, StartupEventArgs e)

{

App.args = e.Args;

}

If you notice, the app_Startup event handler takes StartupEventArgs, and one of the fields on that 'e' object is Args. The command lines are broken up on quotes and then on spaces. So, if I called my app as: MyApp "1 2 3" 4 "5 6", I would get three arguments. The first is 1 2 3, the second is 4 and the last is 5 6.

Finally, you can now access those args in your Window1.Initialize by just accessing App.args.

public Window1()

{

this.InitializeComponent();

foreach (string key in App.args)

{

Console.WriteLine(key);

}

I'm up on the web!

DanteG — Tue, 27 Mar 2007 21:40:00 GMT

Ok, this isn't anything too new for most folks, but the "Trailer" for the Total Training series on Expression Blend is on the net. Check it out at http://youtube.com/watch?v=nqgjv0lODYU.

Yeah, that's me. And yes, I'm quite proud of it. :)