Dante's blog

The next page!

LordSaphon — 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 :).

The longevity of a console

LordSaphon — Thu, 02 Jul 2009 01:01:00 GMT

I am very passionate about Blend, there's no question there. But, I'm also a gamer... both board games and computer (PC/Console) games.I was having a conversation with a good friend yesterday, and the more I think about it, the more I just can't accept his argument. Please keep in mind that these are *MY* opinions, and don't reflect the opinions of Microsoft. Everything here is also based on publicly released and announced information, and has absolutely no information that isn't available to everyone else. I don't have some secret inside contact within XBox operations who's feeding me information... it's just the result of, what I thought, was a pretty interesting conversation.

So, the start of the conversation was about the XBox 360. Recently (I believe it was at E3), Microsoft said that they still see another good 5 years in the existing console, so there are no plans for another XBox until the 2014-2015 time frame.

My comment is that this is great. I would be ecstatic to have another five years in the hardware we've already bought. Besides, since we have two entertainment centers, we have TWO Xboxes, and I'm not in a huge hurry to replace them both.

This is where my friend (who I will call X) disagrees. His comment is that Microsoft should be persuing the enthusiast crowd more heavily. The PC Gaming crowd, which is getting more and more alienated, since more people are developing for consoles, are being forced to move to the consoles. Subsequently, they want the BEST graphics, the BEST sound, and everything like that. So, they're not going to want to move to a new console that's based on 3-4 year old technology.

X asserts that most 'serious' PC gamers upgrade their PC hardware on a once-a-year or once-every-two-year schedule. These gamers want a new console, so everything looks as good as it does on their $2000+ PCs, and if we want to entice them, which we certainly should, we need to make sure that our console is up to date with the biggest, strongest hardware to look it's absolute best.

This is where I disagree, for a handful of reasons...

1. The enthusiast crowd is an interesting crowd, but thanks to the advent of the Wii, a new crowd is getting into gaming. This is the crowd that likes casual games that they can pay $10-$15 for, pick up and play, and run with. The XBox 360 and the Live Arcade is VERY enticing to this crowd. We don't need new hardware to play games like Geometry Wars or Uno. The existing hardware is an excellent solution for these folks.

2. Microsoft loses money on every XBox they make, and recovers that money in accessories and gaming licenses. This is simply a fact. And, let's be honest, the 360 wasn't the smoothest launch ever (My wife is on her third XBox now, and I worry that this one won't last too long either). As time goes on, the amount MS loses on each box decreases as the cost of the parts goes down. Why would we reboot that loss amount when the current console still has life in it?

3. We are in an economy with the highest unemployment in a VERY long time. If, as a bread winner in a family, I had $400 to spend on our entertainment, would I rather buy a new console, and possibly not even have enough money for a game for said console, or would I use that $400 to buy about 6 new games? I firmly believe that the percentage of Americans, right now, who could go out to the store and drop $400 without having to think about it for a few minutes, is pretty low.

4. The console market is *NOT* a market that can keep up with computers. Period. Let's say, for the sake of argument, that the XBox 360-II was announced. We'd end up sending out development kits to various studios, who would know the expected specs of the machine. Now, let's release the 360-II to the market 6 months later. How many of those initial games would really be worth playing? They may have started development sooner, but let's face it... the developers don't know the tricks to make the 360-II really sing the way they can with the 360 today. So, those first wave of games are going to be... meh. Now, let's release the 360-II to the market 2 years later instead of 6 months. Developers have time to make some better games, but now the hardware is 2 years old! The people who upgrade their PC on a once-every-two-years model are already talking about a console that's on par with their LAST generation.

5. And... let's take a look at games right now. How many games out there are people buying based on their graphics? Sure, good graphics are a good selling point, but I'm going to go back to an old argument here, that the technology is not what makes better games. It's game DESIGN. The 360 is plenty strong enough for sophisticated and in-depth games. Don't believe me, check out GTA or Resident Evil 5. Gears of War II has awesome graphics and might have pushed the console further then anyone else did, but everyone says that the gameplay and storyline were lackluster (Although, I enjoyed the daylights out of the game). Stop spending time trying to make the graphics look awesome, and make us a game that's fun, immersive and things like that. Case in point, I was reading an article on IGN about RPGs, and they said that the only RPG that's exclusive to the PS3 that's really worth getting excited about is Valkyria Chronicles. That's not a game that pushed their hardware too hard... from a technical standpoint, it didn't really do much that you couldn't have done on a PS2 or original XBox, aside from more Polygons. But, the GAMEPLAY was what drew you in. Which would you rather have... a pretty game or a good one?

So, considering all of this, and thinking about this from a strategic point... let's say you're the Microsoft exec in charge of making the call...

Do you invest in new technologies that extend the longevity of your console...
>> A console that many development houses are getting DAMNED good at coding against
>> A console that is currently dominating the market, without any strong competition (In my less then humble opinion, Sony is not really a competitor, and Nintendo is a different market segment)
>> A console that is having a lower and lower cost every day as the components get cheaper
>> A console with a damned impressive games library

Or, do you spend the time making a new console...
>> A new console that new developers are going to have to learn how to make it sing
>> A new hardware model, especially after you finally got your existing console working reliably (for the most part)
>> A console that will either require backward compatibility (more work), or not (reducing your game library, and piss off your faithful audience)
>> A console that will have technical capabilities that are at least one generation behind current PCs

To be honest, as I type this out, it almost becomes a shame that we have to rev our consoles every couple years. Because, every couple years, we have to start spending our development dollars on learning the new technology, and less dollars on good, sophisticated and immersive game play. I would argue that the BEST games come out a couple years after one console has come out, when developers know the box and focus on the game, but before the next console comes into play, when the developers stop thinking about this console and start looking ahead to the next.

Viva la 360...

Working with Drawing Brushes

LordSaphon — 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

LordSaphon — 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.

A Silverlight TextBlock with Tracking? Surely you jest!

LordSaphon — Fri, 27 Feb 2009 23:02:00 GMT

Well, I know it’s been a while since I’ve posted… although I’m going to be paying a LOT more attention to this moving forward. I’m hoping though that my first post back will be worth it.

We’ve been talking a lot to designers about what they want, and one thing I keep hearing is a desire for Tracking and Kerning. Currently, Silverlight doesn’t really support those, and there really isn’t an easy way to do it.

So, on the bus this morning, I started thinking, and this is what I came up with. As always, feel free to use any code here that you like, but use at your own risk. I’m certainly up for hearing possible improvements on it. Right now, this only does Tracking, but I’m trying to figure out how to do the kerning as well.

So, naturally, I’m doing this in Blend (not a huge surprise), but I want to do this in Silverlight. So, I’m creating a new Silverlight project, and I’m going to be creating a custom control. Start off by drawing a TextBlock, selecting it, and choose “Make User Control”. Blend will ask you for a name, and I chose “KerningTextBlock”.

Here’s my strategy. I’m going to use a StackPanel to take care of lining up all my characters, and create TextBlocks for EACH character. Then, set the padding on those TextBlocks to increase the space uniformly between consecutive characters.

So, get rid of the TextBlock that’s already there, and drop in a StackPanel. Rename that StackPanel since we’re going to be interacting with it in code. I named it “TextDisplay”, since that made sense to me. Also, set the Width and Height to Auto and set the Orientation to Horizontal.

Cool, now I want to create two DependencyProperties on our control, and that means code. So, open up the Solution in VS, and let’s get cracking. I want to implement “ActualText” as a string, so I can set it in one place, and have the StackPanel create it’s TextBlocks, and then a “Tracking” as a double that I can set and see the results.

First, the ActualText:

public static readonly DependencyProperty ActualTextProperty = DependencyProperty.Register("ActualText", typeof(string), typeof(KerningTextBlock), new PropertyMetadata(ActualTextValueChanged));

public string ActualText

{

get

{

return (string)GetValue(ActualTextProperty);

}

set

{

SetValue(ActualTextProperty, value);

}

private static void ActualTextValueChanged(DependencyObject caller, DependencyPropertyChangedEventArgs e)

{

}

This is all pretty much “boilerplate” code. I can use “ActualText” to get and set the property, and every time it changes, ActualTextValueChanged will get called. I’ll use that later to update the contents of my StackPanel.

Next, let’s go ahead and get Tracking:

public static readonly DependencyProperty TrackingProperty = DependencyProperty.Register("Tracking", typeof(double), typeof(KerningTextBlock), new PropertyMetadata(TrackingValueChanged));

public double Tracking

{

get

{

return (double)GetValue(TrackingProperty);

}

set

{

SetValue(TrackingProperty, value);

}

private static void TrackingValueChanged(DependencyObject caller, DependencyPropertyChangedEventArgs e)

{

}

All right, we’ve got our DPs, now let’s hook them up. For starters, let’s do the ActualText. Whenever it gets changed, we want to clear out the children of the TextDisplay StackPanel, and add new TextBlocks for each character. Here’s the code, and I’ll go through it after:

private static void ActualTextValueChanged(DependencyObject caller, DependencyPropertyChangedEventArgs e)

{

StackPanel textDisplay = ((KerningTextBlock)caller).TextDisplay;

textDisplay.Children.Clear();

foreach (char thisChar in e.NewValue.ToString().ToCharArray())

{

TextBlock newTextBlock = new TextBlock();

newTextBlock.Text = thisChar.ToString();

newTextBlock.Padding = new Thickness(0, 0, ((KerningTextBlock)caller).Tracking, 0);

textDisplay.Children.Add(newTextBlock);

}

So, what am I doing here? First, I’m grabbing the TextDisplay control. Since the method is static, I can’t simply go to “this.TextDisplay”. But, “caller” is the my KerningTextBlock, and all I need to do is cast it to KerningTextBlock and get my control.

Once I’ve got the TextDisplay, I’m going to empty it, with the Children.Clear command.

Finally, I’m going to iterate through each character in the new value, and create a new TextBlock for it. Those TextBlocks are going to get the character as their text, and set the Padding on it to my Tracking property. If you follow the logic, let’s say ActualText is “Dante” and Tracking is 4.0. We clear out the TextDisplay StackPanel, so it’s empty. We then create a TextBlock with only the letter “D”, and give it a 4 pixel padding (to the right). We then add it to the TextDisplay, and continue on with the next letter. We move on to the “a”, add the TextBlock, and so on.

I realize that this could be optimized to only add additional TextBlocks as needed, and changing the text on the characters instead of destroying and recreating them, but I wanted to start simple. When the handler is called, the “e” argument contains both the OldValue and the NewValue, so writing an optimizer wouldn’t be impossible.

So, if I wanted to, I could just tell the Tracking property to call the same method as ActualText. But, I decided that I wanted to clean it up just a bit.

private static void TrackingValueChanged(DependencyObject caller, DependencyPropertyChangedEventArgs e)

{

StackPanel textDisplay = ((KerningTextBlock)caller).TextDisplay;

foreach (UIElement thisCharacter in textDisplay.Children)

{

((TextBlock)thisCharacter).Padding = new Thickness(0, 0, ((KerningTextBlock)caller).Tracking, 0);

}

In this case, we’re just iterating through all of the children and resetting the padding. Much less destructive then going through and destroying all the children and rebuilding them every time.

The cool part about all of this is that you can set properties like the Foreground or FontFamily on the UserControl, and they end up getting inherited. So, once you’ve put all this in, rebuild the project in Blend, and instantiate one of our controls in Blend.

Once you’ve got it in Blend, go down to the Misc category, and you’ll see that both Tracking and ActualText show up as properties. You can set them there and see the effects immediately. Plus, like I said, go ahead and change the Foreground, Font Family, Size, etc… and they’ll update immediately.

I don’t know how to make Blend think that the control is a Text control, so F2 isn’t going to work like a normal TextBlock, but the concept is there.

Now, the part that I’m trying to figure out, is a good way to do the Kerning. Tracking is easy since it’s a uniform spacing between all the characters, but to be able to adjust the positions of individual pairs of characters would be cool. It would be even cooler to automatically detect it, and since you technically can get the geometry of text, it SHOULD be calculatable, but making that performant may be tricky.

Well, hope ya’ll enjoy J.

Featured!

LordSaphon — 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

LordSaphon — 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

LordSaphon — 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. :(

Getting the 'Vista' minimize with Windowless applications

LordSaphon — Wed, 16 Jan 2008 19:18:00 GMT

Here's the problem. Launch Blend, and create a window that has AllowsTransparency set to true (which sets the WindowStyle to None). Looks good, yes? Now, add a button, and in the Click handler, set the WindowState property to Minimized.

Run the application on Vista, and click your minimize button. You'll notice that the window just vanishes! It doesn't get the nice minimize behavior like you'd expect (You know, the animation. Minimize any other app, and you'll see what I mean).

One of my teammates, Brian, was trying to get this to work, and he did some research. Apparently, if you set this.WindowStyle to WindowStyle.SingleBorderWindow, it will minimize correctly. He was pretty excited about this, and brought it to me. I'm not completely sure why it works, because when you restore the window, it's still the "none" WindowStyle, but it does work.

Problem is, if you run the minimize behavior a second time, it fails with an InvalidOperationException, and your app comes crashing down.

We tried resetting the WindowStyle back to None after Minimizing it, but that caused a different InvalidOp.

So, we played with it a bit, and it seems (oddly enough) that if you set the property ONCE after the window has been created, that you get the minimizing behavior. You just can't set it twice.

So, try this method:

private void MinimizeIt(object sender, RoutedEventArgs e)

{

if (this.WindowStyle != WindowStyle.SingleBorderWindow)

{

this.WindowStyle = WindowStyle.SingleBorderWindow;

}

this.WindowState = WindowState.Minimized;

}

And from our experimentation, this would consistently cause the window to minimize in the "Vista" way, didn't cause a crash, and oddly enough, didn't change the appearance at all. Oddly enough, for grins, I tried putting that line in the Window1.Loaded event handler (Well, without the If statement), and it gives me the InvalidOperation exception.

Transparent Windows and how to Resize them

LordSaphon — 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!

LordSaphon — 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

LordSaphon — 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

LordSaphon — 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.

Variable Value Converters

LordSaphon — Sat, 28 Jul 2007 00:52:00 GMT

I've been asked how to create a Value Converter that you can configure the behavior of. In my Total Training series I showed you how to create a Value Converter that would return a color, Red if the value was below a hard coded value, Yellow if it's between the Red threshold and another value, and Green otherwise.

But, in that case, the Red, Yellow and Green thresholds were hard coded into the VC. What if I want a more generic Value Converter that I can specify the thresholds, and even further, what if I want to specify all the colors myself. (I.e. if the value is 100, turn Blue or something).

This can be done in WPF by creating a parameterized Value Converter, and Blend does support working with those kinds of VCs, so let's look at how to do it.

First, create the simple "Rectangle, TextBlock, Slider" combination. We're going to bring the Slider to the text of the TextBlock, and change the Fill of the Rectangle based on the value.

Here's some XAML if you want to just use what I've got:

<Grid Margin="77,60,255,0" VerticalAlignment="Top" Height="34">

     <Rectangle HorizontalAlignment="Left" Margin="0,0,0,6" Width="49" Fill="#FFFFFFFF" Stroke="#FF000000" RadiusX="7.5" RadiusY="7.5"/>

     <TextBlock HorizontalAlignment="Left" Margin="53,6,0,0" Width="19" Text="{Binding Path=Value, ElementName=Slider, Mode=OneWay}" TextWrapping="Wrap"/>

     <Slider Margin="76,0,0,6" x:Name="Slider" LargeChange="10" Maximum="100" SmallChange="1" IsSnapToTickEnabled="True"/>

</Grid>

Ok, so now let's create the basic three-tier Value Converter. For now, we're going to say a value of 80 or higher is Green, 50 or higher is Yellow and anything else is Red. Here's the code:

using System;

using System.Collections.Generic;

using System.Text;

using System.Windows.Data;

using System.Windows.Media;

namespace ValueConverters

{

class ThreeTierHardCodedVC: IValueConverter

{

#region IValueConverter Members

public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

{

try

{

double inputValue = System.Convert.ToDouble(value);

if (inputValue >= 80)

{

return new SolidColorBrush(Colors.Green);

}

else if (inputValue >= 50)

{

return new SolidColorBrush(Colors.Yellow);

}

else

{

return new SolidColorBrush(Colors.Red);

}

catch (Exception e)

{

return new SolidColorBrush(Colors.White);

}

public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

{

throw new Exception("The method or operation is not implemented.");

}

#endregion

}

Ok, so far so good. If you databind the fill of the Rectangle to the Text of the TextBlock, and pass it through this VC, you'll see that the Rectangle changes color as you move the slider. So, the next step is how we're going to parameterize the VC. For now, I'm just going to accept a two element string, seperated by semicolons. I use semicolons instead of commas just so I don't need to worry about internationalization right now.

So, in effect, if the user passes 80;50, I'm stating that when the value is greater then 80, turn green, between 80 and 50, turn yellow, and below 50, turn red. The parameter will be passed to us (unsurprisingly) as the parameter named "parameter". We'll take it, split it into an array, and just parse those values out. To see how this works, try hooking up one slider like this using 80;50 and another at 95;5.

This is better, except that you're forced into the red/yellow/green colors. What if you want to expand on that? What if you want to be able to configure those colors yourself. To do this, I wrote a quick function that takes a string and converts it to a color. It's not too difficult to write, but if you want to use it, here it is:

private Color GetColorFromString(string input)

{

Type colorClass = typeof(Colors);

List<MethodInfo> colorMethods = new List<MethodInfo>(colorClass.GetMethods());

foreach (MethodInfo info in colorMethods)

{

string methodName = info.Name;

if (info.Name.StartsWith("get_"))

{

string actualColor = info.Name.Split('_')[1];

if (String.Compare(input, actualColor, true) == 0)

{

// We have a match!

return (Color)info.Invoke(null, null);

}

return Colors.Black;

}

This method will take any color that is in the Colors object, and return the appropriate color. (If someone knows an easier way to do this, I'd love to hear it). You will need to add System.Windows.Media, System.Windows.Data and System.Reflection to use my method. If you want more info on the Colors class, take a look at: http://msdn2.microsoft.com/en-us/library/system.windows.media.colors.aspx

Ok, so now with this, we're going to modify our VC one more time, to allow it to take three arguments. My plan is to go through the arguments one at a time, check to see if our input is greater then the first, if so, return the color, if not, go on to the second. I'm actually going to ignore the first piece of the final argument, since it will simply end up as the default. I'm going to seperate the arguments with ';', and individual pieces with a ':'. So, here's the new code:

public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

{

try

{

string paramAsString = parameter.ToString();

string[] splitParam = paramAsString.Split(';');

string[] firstArgument = splitParam[0].Split(':');

string[] secondArgument = splitParam[1].Split(':');

string[] thirdArgument = splitParam[2].Split(':');

double firstInterval = System.Convert.ToDouble(firstArgument[0]);

Color firstColor = this.GetColorFromString(firstArgument[1]);

double secondInterval = System.Convert.ToDouble(secondArgument[0]);

Color secondColor = this.GetColorFromString(secondArgument[1]);

Color thirdColor = this.GetColorFromString(thirdArgument[1]);

double inputValue = System.Convert.ToDouble(value);

if (inputValue >= firstInterval)

{

return new SolidColorBrush(firstColor);

}

else if (inputValue >= secondInterval)

{

return new SolidColorBrush(secondColor);

}

else

{

return new SolidColorBrush(thirdColor);

}

catch (Exception e)

{

return new SolidColorBrush(Colors.White);

}

If you give THIS one a try, set the parameter to something like: 95:Azure;10:Coral;0:SeaGreen. Now we've got a VC that you can configure all three brackets, as well as the colors that go with them.

Of course, this is hideously inelegant, so I want to make one last change. Instead of hard coding and breaking the parameters apart this way, I'm going to just create a loop. This will tighten up the code, and actually allow us to go an arbitrary number of brackets. So, if you need to have 15 different brackets of different colors from Indigo to MintCream, you can do it. So, we'll pull those ugly "secondParameter" lines out, and replace it with a foreach. (I've included the entire class here, in case you want to cut and paste)

using System;

using System.Collections.Generic;

using System.Text;

using System.Windows.Data;

using System.Windows.Media;

using System.Reflection;

namespace ValueConverters

{

class FullyVariableVC : IValueConverter

{

private Color GetColorFromString(string input)

{

Type colorClass = typeof(Colors);

List<MethodInfo> colorMethods = new List<MethodInfo>(colorClass.GetMethods());

foreach (MethodInfo info in colorMethods)

{

string methodName = info.Name;

if (info.Name.StartsWith("get_"))

{

string actualColor = info.Name.Split('_')[1];

if (String.Compare(input, actualColor, true) == 0)

{

// We have a match!

return (Color)info.Invoke(null, null);

}

return Colors.Black;

}

#region IValueConverter Members

public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

{

try

{

string paramAsString = parameter.ToString();

string[] splitParam = paramAsString.Split(';');

double inputValue = System.Convert.ToDouble(value);

foreach (string bracket in splitParam)

{

string[] bracketParameters = bracket.Split(':');

Double bracketLimit;

try

{

bracketLimit = System.Convert.ToDouble(bracketParameters[0]);

}

catch (InvalidCastException)

{

return this.GetColorFromString(bracketParameters[1]);

}

if (inputValue >= bracketLimit)

{

return new SolidColorBrush(this.GetColorFromString(bracketParameters[1]));

}

catch (Exception e)

{

return new SolidColorBrush(Colors.White);

}

return new SolidColorBrush(Colors.White);

}

public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

{

throw new Exception("The method or operation is not implemented.");

}

#endregion

}

Give this one a fly, and set the parameter to: 95:Azure;75:HotPink;40:Blue;10:Coral;-9999:Orange.

Enjoy :).

(As always, code here is provided "As-is" with no warranty, implied or otherwise. Use at your own risk)

One of the worst parts of my job...

LordSaphon — 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)

LordSaphon — 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!

LordSaphon — 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

LordSaphon — 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);

}

Game Engine

LordSaphon — Wed, 28 Mar 2007 19:50:00 GMT

Ok, as Blend continues its march, my mind starts moving to things I might do with it. And, naturally, one of the thoughts I've been having, is to write a game in it. There are plenty of technical aspects I need to work out... but here's what I'm thinking.

It's a "Turn Based RTS". Yup... let's start off with an oxymoron.

I can't remember the game, but in my old Commodore 64 gaming days, I remember a game where you'd give individual orders to each of your units, hit "End Turn", and it would go into RT mode and you'd see the moves carried out. I.e. you could tell unit A to move from location X to location Y, and consider enemy B to be the primary target. When you hit play, it would 'play' for about 10 seconds, and unit A would start walking toward location Y, and if his chance to hit target B went above some threshhold (You could set it from "Only fire on assured success" to "Fire even if you can't see the idiot"), he would open fire.

I want to take this concept, and start a game with it. Basically, you have a semi-open battlefield (Yes, fog of war would be good here), and say four guys. You give each guy a "Destination" and either "Hold Fire", "Aim at Target X" or "Shoot best target" along with a threshhold.

So, on an object level, I see:

Unit: Health (double), Accuracy (double), Camo (double), Armor (double), Speed (double), Location (point), TargetLocation (point), FireMode (enum), FireThreshhold (double), Weapon (Weapon)

Weapon: MinimumDamage (double), MaximumDamage (double), OptimumRange (double), MinimumRange (double), MaximumRange (double), ArmorPenetration (double), Accuracy (double), ShotsPerTurn (int), CycleRate (double), ReloadRate (double), Ammunition (int), CycleTimeRemaining (double), ReloadTimeRemaining (double), ClipSize (int)

The percentage chance to hit is a function of:

Distance Modifier (A function of Range against the Range parameters of the Weapon) * Unit.Accuracy * (1 - Target.Camo) * Weapon.Accuracy.

So, if a unit has an accuracy of 80% firing at perfect optimum range at a target with 20% camo with a weapon with normal accuracy (100%), the equation becomes: 1.0 * 0.8 * (1 - 0.2) * 1 which results in a chance to hit of 64% chance to hit. Furhtermore if the weapon has a 80% accuracy, this drops the hit chance to 51.2%.

The BaseDamage becomes a random number betweeen MinimumDamage and MaximumDamage.

The target's actual armor is Target.Armor * (1 - Weapon.ArmorPenetration). So a unit with 20% armor being fired on with a weapon that has 25% Armor penetration results in an actual armor of .2 * (1-.25) = 0.15 or 15%

So, the actual damage ends up being BaseDamage * (1 - (Target.Armor * (1 - WeaponArmorPenetration))). So, if the target with 20% armor is hit for 100 points from a weapon with 25%penetration, you get:

100 * (1 - (.2 * (1-.25)))
100 * (1 - (.2 * .75))
100 * (1 - .15)
100 * .85
85 points of damage

This scheme will allow for highly agile characters which are harder to hit, as well as having highly accurate characters to compensate, as well as heavily armored characters which take less damage, and armor piercing weapons to deal with them.

I'm also thinking that accuracy and armor shouldn't be limited to 100%. I.e. if a unit has 200% armor, then it ignores all weapons that have armor penetration of 50% or less. Similarly, a unit with 150% accuracy will hit any unit that doesn't have at least 33% camo at optimum range. I can also conceive of obstacles that will cause an addition hit modifier to be included. I.e. if the line of fire traces through any piece of the "Smoke" region, then an additional 10% penalty is included into the calculation. (Multiply in another 0.9 to the hit calculation).

As I'm thinking about it, I could also see the same weapon having multiple profiles... i.e. an Assault Rifle can be fired "Single Shot", which has a ShotsPerTurn of 1, but a higher accuracy (and maybe better range) or fire it "Burst" which has a ShotsPerTurn of 3, but lower accuracy. For the record, CycleRate is the amount of time between shots, and ReloadRate is the time required once the ammunition is expended to put in a new clip.

So, when a weapon fires:

Number of shots to fire is Max(Ammunition, ShotsPerTurn)
Calculate all the shots
Ammunition -= Number of shots to fire
If Ammunition == 0 then ReloadTimeRemaining = ReloadRate
Otherwise CycleTimeRemaining = CycleRate
The weapon can't be fired if ReloadRate or CycleRate are non-zero

At this point, I need to start thinking of how the weapons fire. I'm thinking we need events for "WeaponReloaded" "WeaponCycled" "WantsToShoot", etc...

More later as I go along.

I'm up on the web!

LordSaphon — 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. :)

Creating an alternate layout panel

LordSaphon — Thu, 08 Mar 2007 02:40:00 GMT

Ok, this is neat. This is the first time I've worked with layout panels and actually creating one of my own. Here's the code:

class OverlapStackPanel : StackPanel

{

protected override Size ArrangeOverride(Size arrangeSize)

{

UIElementCollection children = this.InternalChildren;

int childrenResolved = 0;

foreach (UIElement child in children)

{

Rect targetRect = new Rect(40 * childrenResolved, 30, child.DesiredSize.Width, child.DesiredSize.Height);

child.RenderTransform = new RotateTransform(-20);

child.Arrange(targetRect);

childrenResolved++;

}

return arrangeSize;

}

Now, let's look at it. First off, I could have inherited from Panel instead of StackPanel, and to be honest, I'm not sure how much of a change that would produce (I'll have to experiment with that).

The only method I'm introducing is modifying the ArrangeOverride. This is telling the Panel that instead of using the built in Arranger, I'm going to specify my own.

It's easy to see that I got the list of children, and all I did was create a Rect and in that, calculate where the child should go. I'm moving it over by childrenResolved * 40, so the first child is at X=0, then next at 40, then 80, etc... I moved it down by 30 to be arbitrary, and then used the child's desired size to get the width and height.

Adding the RotateTransform is just for fun, but it does cause problems, since it's effectively overwriting ANY RenderTransform that the user might apply. To do this correctly, I should probably get the existing RenderTransform, and add the desired rotation and all of that, but here, my goal is to demonstrate the simplicity.

The two lines that you can't forget... you need to call child.Arrange and pass the rectangle, otherwise, the child just ends up in Oblivion. And, if you don't return the arrangeSize, I'm sure it will do something funky. Again, something else I haven't experimented with yet.

To be honest, I've surprised myself with how easy this was to do. With some math, it wouldn't be too hard to create a layout that takes the controls and fans them out in a way that looks like a hand of cards or something.

Using a Timer

LordSaphon — Wed, 07 Mar 2007 22:24:00 GMT

Ok, most C# developers can probably do this in their sleep, but I needed to hook up a timer that would do something every N milliseconds. And every time, I have to decide if I need a System.Threads.Timer or a System.Timers.Timer and so on. So...

This is using the System.Threads.Timer class, since Timers had a lot of discussion about Server side coding, and I just decided that it didn't look right.

First, we need to keep the Timer in scope. I made a mistake of creating a local timer in a method, and as soon as the method ended, the Timer went out of scope and stopped working. That's not too useful. So, start with:

private Timer tickTimer;

Now, create the method that the tickTimer will call. It has to return void and accept a single parameter as an object. So, in this case:

private void NotifyTimer(Object stateInfo)

{

Debug.WriteLine("Tick");

}

I added the Debug statement, so I could run dbmon, and see when the timer is running. If I were 'shipping' this, I'd hide that with Debug controllers and such... but that's not a critical discussion here.

Finally, when I'm ready to start the timer, instantiate the object:

public WordGame()

{

TimerCallback notifier = new TimerCallback(this.NotifyTimer);

this.tickTimer = new Timer(notifier, new AutoResetEvent(true), 0, 250);

}

The first line creates the method that I'm going to call whenever the timer gets called. Then, I instantiate it. I have to pass the TimerCallback as the first argument, and I have to look up what the AutoResetEvent does.

The last two arguments, in this case 0 and 250 indicate how long the timer should wait until it calls the Callback for the first time, then the interval between calls. In this case, I'm telling it to start immediately, and keep calling that callback every 250ms.

Keep in mind, in this case, that timer is going to start as SOON as my object is instantiated (note that my code is in the constructor for my class), and at the moment, it won't ever stop. I can then use Timer.Change to modify those parameters... say start the timer when the game actually starts and stop the timer once the player is out of time, but those are just some performance improvements.

Databinding to CLR Objects

LordSaphon — Wed, 07 Mar 2007 21:08:00 GMT

I'm sure everyone else runs into these issues all the time, but every time I have to do this, I end up pulling up MSDN and looking all of this up. It's not too efficient, so I'm going to drop a few points here for reference.

First: Binding a basic type (String, Int, etc...)

For starters, if the CLR object is supposed to have properties that you're going to bind to, then it needs to implement INotifyPropertyChanged. VS makes it easy to implement the interface, just right click and tell it to implement, and it puts the default methods in.

Then, add this code:

private void NotifyPropertyChanged(string info)

{

if (PropertyChanged != null)

{

PropertyChanged(this, new PropertyChangedEventArgs(info));

}

Now, with this code in place, whenever you change the value of any property that you're going to be databinding to, you just need to call this.NotifyPropertyChanged(property). So, for instance, if the player gets 5 more points, just do score += 5 and this.NotifyPropertyChanged("Score");

Second: Binding a List

Then, in the game I'm working on, there is a list of words that the user has already found. I want to display that list in a list box. I thought I could just do a public property the looks like:

public List<string> MyList

{

get

{

return this.myList;

}

This seemed straightforward, as I bound the ItemsSource of my ListBox to this property. Problem was, when I updated this.myList, and even when I called PropertyChanged, my ListBox didn't update. I dug around for a while, and finally checked with a Dev, and discovered that there is another class ObservableCollection<string> that fixes everything. In fact, you don't even need to do the PropertyChanged when you bind a ListBox to an ObservableCollection. So, in the above case, I just used:

public ObservableCollection<string> MyList

{

get

{

return this.myList;

}

Third: Connecting the application's DataContext

For this one, I've found two different ways to do the same thing, and I'm not sure which is correct (or more 'proper').

So, here's the scenario. I've got this engine for my "WordGame", which is a class. I want to databind controls on my application to the fields in the WordGame object, and I need to call methods on it. The best way to do this is to bind the DataContext to an instance of WordGame, and then bind everything through ExplicitDataContexts. But, the tricky part comes when I want to call a method on the WordGame object itself. In the event handler for my Button, I don't have direct access to the object. For sake of conversation, the method is called "StartNewGame()" on WordGame to begin the whole process.

Option 1:

In Blend, Add the CLR Object as a data source, and bind the DataContext of the LayoutRoot to the datasource. Then, I can drop a TextBlock down and data bind the text to the ExplicitDataContext, and I see all the fields that I want to bind to. Ok, great. Now, in my Window1.xaml.cs, I have to add this property:

private WordGame myGame = null;

public WordGame MyGame

{

get

{

if (this.myGame == null)

{

this.myGame = this.LayoutRoot.GetValue(Grid.DataContextProperty) as WordGame;

}

return this.myGame;

}

Now, in any of my event handlers, I can access this.MyGame and get the desired behavior.

Option 2

In the Constructor for my Window, I added this code:

private WordGame myGame = null;

public Window1()

{

this.InitializeComponent();

this.myGame = new WordGame();

this.LayoutRoot.DataContext = this.myGame;

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

}

This looks simpler at first, but the BIG problem is that since the actual DataBinding happens in the constructor, Blend doesn't recognize it as design time, so I can't do any of my databinding using the Property Markers and such.

So, in this case, I'm happiest with option 1.

I also want to include my Timer code, but I'll do that in a seperate post.

Working with the Opacity Masks

LordSaphon — Tue, 10 Oct 2006 01:43:00 GMT

Well, it's been a while since I've managed to post, but I've been working with Interactive Designer pretty heavily lately, and it's been a pretty exciting time.

On top of that, I've starting doing internal training classes at Microsoft for Interactive Designer. It started with a couple classes on how Graphic Designer and Interactive Designer can work together, but it's grown to a full-blown formal series of classes.

Last week, we spent a fair amount of time on the Appearance Palette, talking about what it can do. Specifically, most people don't know how to work with opacity masks, and just what you can do with them.

The best place to start, is on what an opacity mask actually is. There are several ways you can make an object partially transparent... to show what objects are underneath.

First, you can set the Opacity on the entire object. This applies a uniform N% transparency to the entire object, stroke, fill, and all. This opacity is an animatable property, so you can make the object fade in or out with this, but you can't control which parts get more or less transparency.

Second, you can set the Alpha channel on individual colors. This allows a gradient where you can see through parts of the element, and still have solid colors elsewhere. The downside is that an individual channel is not animatable, and this sets individual colors on a single piece (Fill/Stroke/etc...). So, if you want, for instance, a linear gradient whose tranparency extends both into the stroke and the fill, getting this correct is a VERY tricky business.

Finally, you can use an opacity mask. It's the least commonly used, since it's not immediately apparent how it works. But, it provides some functionality that the other two methods don't provide.

An opacity mask is a brush that is applied on top of all of the other brushes that make up an element. However, in an opacity mask, only the alpha channel is applied.

(I need to learn how to put pictures into my blog... I'll work on that for next time around)

But, if you've got Interactive Designer available, try this. Create a rectangle with a wide stroke. Make the stroke Black and the rectangle itself red.

Now, switch to the Opacity Mask, and change the type to a linear gradient. At first, you won't see any change in the rectangle, but that's because the Opacity Mask brush has an alpha that goes from 1.0 to 1.0. In other words, the opacity of every pixel in the element will remain at it's previous setting.

Change the right gradient stop's Alpha to 0.0.

At this point, the right side of the rectangle, stroke and fill, both disappear. What happened? Consider a pixel 3/4th of the way across the rectangle. The brush that effects the color of that pixel has an Alpha of 1.0, or completely opaque. The Opacity mask, 3/4s of the way across has an alpha channel of 0.25. So, the 1.0 and the 0.25 are multiplied together, and the pixel is displayed with a 25% transparency.

This may not be too exciting, but select the paint transform tool, and drag the vector around. Change the spread method to either reflect or repeat. As you drag around the gradient, you can see how you can do things with the Opacity Mask that you wouldn't be able to do any other way. Try using a Radial Gradient as well...

The biggest take-away here is that Opacity Masks are applied to the entire object at once, regardless of fill/stroke, etc... and you can do anything with an opacity mask that you can do with any other brush with regards to animation and paint transform.

--Dante

Updating an Image control

LordSaphon — Tue, 20 Jun 2006 23:21:00 GMT

I had a coworker as me how to update an Image control in code. Specifically, he wanted to create a quick file browser that had a Next and Previous button to scroll through a preset list of Images.

Creating the list and iterating through directories is pretty easy, so I'll omit that (Although, if someone wants to see that code, just comment on this post, and I'll post it seperately).

Then, I just had a quick helper method that looks like this:

public void LoadImage(Image image, string imagePath) 
{
    if (File.Exists(imagePath))
    {
        image.Source = new BitmapImage(new Uri(imagePath)); 
    } 
}

The challenge that our designer ran into, is that Source requires an "ImageSource" class, and he didn't know how to create one. BitmapImage is a class that inherits from ImageSource, and simply takes a Uri in the constructor with the location of the image. The helper function accepted the Image control as an argument, just so that I could use the same method to update any number of Image controls.

And really, that's all there is to it. Of course, my version had a transparent InkCanvas on top of the Image, and I discussed how to load and save Ink in a previous post. If folks are interested, I can post more of the code for my Image/Markup Browser here.

--Dante