Code Badger (Brad Tutterow's Blog)

IOC with StructureMap : Presentation Materials

2010-02-24T18:40:37Z

For those that might be interested, here are the presentation materials from my talk at the St Louis .NET User’s group last night. We talked about the need for managing our code dependencies, how to apply the dependency inversion principle, how to use dependency injection, and finally, how to use StructureMap to wire up our dependency injection for us.

A few key definitions from the talk

What is a dependency? Any thing the code I’m working on needs to work that is not the code I’m working on. Remember that dependencies may very well be your OTHER code sitting in the same project that you’re working in.

The dependency inversion principle tells us that high-level modules should not depend on low-level modules. Rather, both should depend on abstractions.

One very effective way to pull this off is through the use of interfaces.

Materials

Share this post: Email it! | bookmark it! | digg it! | reddit!

No Silverlight 4 with Visual Studio 2010 RC

2010-02-18T01:07:03Z

I think I’m actually sort of relieved to find out that the Visual Studio 2010 Release Candidate doesn’t support Silverlight 4. I just finished up my Silverlight 4 development environment a few weeks back and wasn’t looking forward to blowing it away just yet.

But just in case you were about to do the same thing, and didn’t notice the fine print on the download page, you’ve now been warned. No Silverlight 4 with Visual Studio 2010 RC.

I’m sure it’s hard enough to get all the tools playing together in release software, so it’s understandable that sometimes get left behind with all the betas floating out there currently.

Share this post: Email it! | bookmark it! | digg it! | reddit!

Building a Silverlight Game: Part 9: Dropping Dragged Rectangles

2010-02-10T20:22:48Z

Introduction and Review

This is the eight post in a series on building a Silverlight game. In the last post, we coded up all the steps to drag rectangles around the canvas. This left us with a very simple program where we could pick up and drag the top-most rectangle on a stack.

The obvious thing that are code from last week couldn’t do though, is drop the rectangle when you let go of the mouse. We’ll write the code for dropping the dragged rectangle in this post.

Wiring up a mouse event

Like the other features that we’ve implemented so far, we first need to pick the mouse event to write into.

When checking if dragging was a valid thing to do, we attached to MouseEnter
When setting up a rectangle to be dragged, we attached to MouseLeftButtonDown
When dragging a rectangle, we attached to MouseMove
And finally, for dropping a rectangle, we will attach to MouseLeftButtonUp

In Blend, setting this up is just a matter of selecting the orange rectangle, bringing up the properties tab, switching to the event view, and double-clicking in the textbox next to MouseLeftButtonUp

This will generate our method stub and the XAML below.

        1: <Rectangle Height="50" Width="100" Fill="Orange" 

       2:            MouseEnter="Rectangle_MouseEnter" 

       3:            MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" 

       4:            MouseMove="Rectangle_MouseMove" 

       5:            MouseLeftButtonUp="Rectangle_MouseLeftButtonUp" />

       1: private void Rectangle_MouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e)

       2: {

       3:     // TODO: Add event handler implementation here.

       4: }

Just like our previous features, we’re going to defer anything related to dragging or dropping to our DragAndDrop class. Let’s add the call to the event handler.

       1: private void Rectangle_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)

       2: {

       3:     dragAndDrop.Drop(

       4:         sender as Rectangle,

       5:         e.GetPosition(null));

       6: }

The Drop() Method

Here’s the new Drop() method for DragAndDrop.cs

       1: public void Drop(Rectangle rectangle, Point position)

       2: {

       3:     dragging = false;

       4:     Panel panel = main.GetDropPanel(position);

       5:     RectangleDropper.DropRectangle(

       6:         draggingCanvas,

       7:         panel,

       8:         originalParent,

       9:         rectangle,

      10:         position);

      11:     rectangle.ReleaseMouseCapture();

      12:     rectangle.Opacity = 1;

      13: }

On line 3, we set our dragging boolean to false. This boolean is checked by our Drag() method, so setting it to false stops the rectangle from moving around with the mouse.

On line 4, we get the panel to drop the rectangle into. For now, this line won’t compile. More on it later.

On line 5, we drop the rectangle into the appropriate panel. This line will also not compile at the moment since we don’t have a RectangleDropper class yet.

Lines 11 and 12 reverse the UI stuff that we did when we started to drag. We release the mouse capture and set the opacity of the rectangle back to 1 so that it’s not see through anymore.

Now about those lines that are throwing compile errors – lines 5 and 6.

Getting the panel to drop the rectangle into

When the user released the mouse, the rectangle needs to drop neatly into the panel that they mouse is currently over. The problem that we have is that the DragAndDrop helper doesn’t know about the panels and shouldn’t. They are a concern of the main control.

So let’s put a method on our main control that the DragAndDrop helper can call to find out about panels. We’ll call it GetDropPanel() and it will look this:

       1: public StackPanel GetDropPanel(Point position)

       2: {

       3:     if (position.X > Canvas.GetLeft(RightBorder))

       4:     {

       5:         return RightPanel;

       6:     }

       7:     if (position.X > Canvas.GetLeft(MiddleBorder))

       8:     {

       9:         return MiddlePanel;

      10:     }

      11:     return LeftPanel;

      12: }

Remember that this method belongs to our main control, not the DragAndDrop helper. It takes the position of the mouse, provided by the DragAndDrop helper, and gives the panel that lives at that location.

To use this code from the DragAndDrop helper, we need to make sure that the DragAndDrop helper has a reference back to the main control. We’ll add it as a constructor dependency for the DragAndDrop helper class.

       1: private MainPage main;

       2: private Canvas draggingCanvas;

       3: private RectangleMover mover;

       4:  

       5: private bool dragging = false;

       6: private Panel originalParent;

       7:  

       8: public DragAndDrop(MainPage main, Canvas draggingCanvas)

       9: {

      10:     this.main = main;

      11:     this.draggingCanvas = draggingCanvas;

      12:     mover = new RectangleMover(

      13:         draggingCanvas.Height,

      14:         draggingCanvas.Width);

      15: }

Now, when the main control creates an instance of the DragAndDrop class, it will have to pass itself in. A more object-oriented approach would be to have the main control implement an interface and pass that in, but this is just a simple game, so we’re not going to bother.

Here’s the code for the main control to instantiate an instance of DragAndDrop

       1: private DragAndDrop dragAndDrop;

       2:  

       3: public MainPage()

       4: {

       5:     InitializeComponent();

       6:     dragAndDrop = new DragAndDrop(this, this.LayoutRoot);

       7: }

Dropping the rectangle

The last piece of the puzzle to drop the rectangle is the RectangleDropper class. It looks like this.

       1: public class RectangleDropper

       2: {

       3:     public static void DropRectangle(

       4:         Canvas canvas, 

       5:         Panel panel, 

       6:         Panel oldParent,

       7:         Rectangle rectangle,

       8:         Point position)

       9:     {

        if (RectangleHasMoved(rectangle, panel))

        {

            if (RectangleIsBiggerThanRectangleOnTop(rectangle, panel))

            {

                panel = oldParent;

            }

            canvas.Children.Remove(rectangle);

            panel.Children.Insert(0, rectangle);

        }

    }

  

    private static bool RectangleHasMoved(Rectangle rectangle, Panel panel)

    {

        return !panel.Children.Contains(rectangle);

    }

  

    private static bool RectangleIsBiggerThanRectangleOnTop(Rectangle rectangle, Panel panel)

    {

        if (panel.Children.Count.Equals(0))

        {

            return false;

        }    

        Rectangle topRectangleInPanel = panel.Children[0] as Rectangle;

        return topRectangleInPanel.ActualWidth < rectangle.ActualWidth;

    }

}

It has one public method, DropRectangle(), that defers to a couple of private methods to make sure that the basic rules for dropping are followed.

Download source code so far

Share this post: Email it! | bookmark it! | digg it! | reddit!

Abtest = Tina

2010-02-10T02:03:33Z

Check out this nice querystring from the fine folks at TurboTax. I can only speculate as to who Tina is and what her abs are being tested on.

Share this post: Email it! | bookmark it! | digg it! | reddit!

Presenting at .NET User Group – Feb 22

2010-02-08T18:18:17Z

I’ll be presenting on Inversion of Control with StructureMap at the next meeting of the .NET user group. It will be exactly as awesome as it sounds.

Simplify your life with Inversion of Control! One of the most challenging aspects of software development is dealing with code that depends on other code. The Dependency Inversion principle tells us that we should depend on abstractions, not concretions but it doesn’t tell us how to do that. That’s where Dependency Injection comes in – we inject our dependencies into the mushy center of our classes with a big syringe. This can often be as messy as it sounds, but luckily Inversion of Control Containers can help us by providing a single source for configuring dependencies. This presentation will show how to effectively manage dependencies with StructureMap, an open-source IOC container. StructureMap can make your life easier, your code more maintainable, and the world a better place.

http://www.stlnet.org/DesktopDefault.aspx

Share this post: Email it! | bookmark it! | digg it! | reddit!

Building a Silverlight Game : Part 8 : Writing Code to Drag Rectangles

2010-01-21T19:28:17Z

Introduction and Review

This is the eight post in a series on building a Silverlight game. In the last post, we talked about all the steps that we need to take to drag a rectangle around. In this post, we’ll write the code to satisfy all those steps and let us drag our rectangles around the canvas.

For the sake of review, remember that in Part 6 we wrote code to prepare a rectangle for dragging. This included

Setting a flag that tells us a rectangle is being dragged
Adjusting the opacity of the rectangle to provide a nice visual effect
Capturing the mouse so the rectangle will be sure to respond to mouse events

        1: public void StartDrag(Rectangle rectangle)

       2: {

       3:     if (rectangle.Cursor.Equals(Cursors.Hand))

       4:     {

       5:         dragging = true;

       6:         rectangle.CaptureMouse();

       7:         rectangle.Opacity = 0.6;

       8:     }

       9: }

That will set up a rectangle for dragging. The code that will drag the rectangle around (Part 7) needs to do these things:

Check the flag to make sure it’s true
Remove the rectangle from the stack panel
Place the rectangle on the canvas so we can drag it around
Bring the rectangle forward
Move the rectangle to the current position of the mouse

Wiring up the proper event

The first thing to do is to decide when we want to do all these things. In other words, what event of what object? The answer (for now) is that we want to do these things when the MouseMove event of the topmost rectangle fires off. To get things started in blend, just select the top-most rectangle in the object explorer, switch your properties tab to the event view, and double-click inside the MouseMove event’s textbox. This will auto-generate an event handler method and wire it up in the XAML.

If you’re not using Blend, the same event can be wired up manually in Visual Studio.

       1: <StackPanel x:Name="LeftPanel" Orientation="Vertical" 

       2:     Canvas.ZIndex="1" VerticalAlignment="Bottom">

       3:     <Rectangle Height="50" Width="100" Fill="Orange" 

       4:                MouseEnter="Rectangle_MouseEnter" 

       5:                MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" 

       6:                MouseMove="Rectangle_MouseMove" />

       7:     <Rectangle Height="50" Width="110" Fill="Blue" />

       8:     <Rectangle Height="50" Width="120" Fill="Green" />

       9:     <Rectangle Height="5" Width="120" Fill="Black" />

      10: </StackPanel>

Just like we’ve done with all of our other rectangle events so far, we are going to delegate the actual work to the DragAndDrop.cs class.

       1: private void Rectangle_MouseMove(object sender, System.Windows.Input.MouseEventArgs e)

       2: {

       3:     dragAndDrop.Drag(

       4:         sender as Rectangle,

       5:         e.GetPosition(null));

       6: }

The Drag() method

You can see that we’re calling a Drag method on the instance of DragAndDrop. This method wants to know the rectangle to drag and the current position of the mouse. Now we just need to write this method.

First things first, here’s the entire Drag() method.

       1: public void Drag(Rectangle rectangle, Point position)

       2: {

       3:     if (dragging)

       4:     {

       5:         StackPanel panel = rectangle.Parent as StackPanel;

       6:         if (panel != null)

       7:         {

       8:             originalParent = panel;

       9:             panel.Children.Remove(rectangle);

      10:             draggingCanvas.Children.Add(rectangle);

      11:             Canvas.SetZIndex(rectangle, 5);

      12:         }

      13:         mover.Move(rectangle, position);

      14:     }

      15: }

Let’s step through this one line at a time.

On line 3, we’re checking our dragging flag. Since this method will be called whenever the rectangle’s MouseMove event fires, we want to make sure that we really should be dragging before we start moving things all over the screen.

On line 5, we put the rectangle’s parent in a local variable. This is so we can put the rectangle back where it belongs in things go awry.

On line 6, we check to see if the rectangle’s parent is null. If it is, then that means the cast to StackPanel failed (line 5). And that means that the parent is not a stack panel. And THAT means that rectangle is on the canvas. And if the rectangle is on the canvas, then we skip lines 8 – 11, since those lines put the rectangle on the canvas. Remember that this is being called over and over as the mouse moves across the screen.

On line 8, we keep track of the original parent. On line 9, we remove the rectangle from it’s parent stack panel. On line 10, we place the rectangle on the dragging canvas. And on line 11, we bring the rectangle to the front of the screen.

Finally, one line 13, we call out to another class that will actually move the rectangle. We haven’t written the code for this class yet.

If you paste the code for the Drag() method into your copy of DragAndDrop.cs, you’ll notice it doesn’t compile. We just have to make a handful of changes to get things all wired up and working.

The first problem is that we don’t have a field variable for the original parent. The next problem is that we don’t have a reference to a dragging canvas.

DragAndDrop’s new constructor

Both of these problems are resolved by changing our field declarations and constructor definition.

       1: private Canvas draggingCanvas;

       2:  

       3: private bool dragging = false;

       4: private Panel originalParent;

       5:  

       6: public DragAndDrop(Canvas draggingCanvas)

       7: {

       8:     this.draggingCanvas = draggingCanvas;

       9: }

Now we have fields for the dragging canvas and the original parent. Notice also that we added the dragging canvas as a parameter for the constructor. We’re telling anyone that wants to create an instance of a DragAndDrop helper that they better provide a canvas to use.

If you remember, it’s MainPage.xaml.cs that is currently creating an instance of the DragAndDrop helper. So we need to change the code there to pass in the dragging canvas. In this case, the dragging canvas is the layout root for the main page.

       1: public MainPage()

       2: {

       3:     InitializeComponent();

       4:     dragAndDrop = new DragAndDrop(this.LayoutRoot);

       5: }

The RectangleMover class

At this point, the only thing that’s preventing our code from compiling is line 13 of the Drag() method above.

   1: mover.Move(rectangle, position);

To get this working, we need a class that move a rectangle around the canvas … a mover. This class will be very dumb. While the DragAndDrop class has all the logic associated with dragging a rectangle around, the mover will just know how to move a rectangle within the bounds of a canvas.

The code for this class looks like this:

       1: public class RectangleMover

       2: {

       3:     private double heightLimit;

       4:     private double widthLimit;

       5:  

       6:     public RectangleMover(double heightLimit, double widthLimit)

       7:     {

       8:         this.heightLimit = heightLimit;

       9:         this.widthLimit = widthLimit;

    }

  

    public void Move(Rectangle rectangle, Point position)

    {

        double left = CalculateRectangleLeft(rectangle, position);

        double top = CalculateRectangleTop(rectangle, position);

        Canvas.SetLeft(rectangle, left);

        Canvas.SetTop(rectangle, top);

    }

  

    private double CalculateRectangleTop(Rectangle rectangle, Point position)

    {

        double top = position.Y - (rectangle.ActualHeight / 2);

        double maxTop = this.heightLimit - rectangle.ActualHeight;

        double minTop = 0;

        if (top >= maxTop)

        {

            return maxTop;

        }

        if (top < minTop)

        {

            return minTop;

        }

        return top;

    }

  

    private double CalculateRectangleLeft(Rectangle rectangle, Point position)

    {

        double left = position.X - (rectangle.ActualWidth / 2);

        double maxLeft = this.widthLimit - rectangle.ActualWidth;

        double minLeft = 0;

        if (left >= maxLeft)

        {

            return maxLeft;

        }

        if (left < minLeft)

        {

            return minLeft;

        }

        return left;

    }

}

This class can look a bit intimidating, but it doesn’t really do anything interesting. It has one public method that takes a rectangle and a position. It moves the rectangle to that position. Feel free to explore the class on your own, but we’ll leave it at that for our purposes here.

Now we just need to instantiate an instance of RectangleMover when we instantiate our DragAndDropClass, so DragAndDrop gets a new constructor a new instance field.

       1: private Canvas draggingCanvas;

       2: private RectangleMover mover;

       3:  

       4: private bool dragging = false;

       5: private Panel originalParent;

       6:  

       7: public DragAndDrop(Canvas draggingCanvas)

       8: {

       9:     this.draggingCanvas = draggingCanvas;

      10:     mover = new RectangleMover(

      11:         draggingCanvas.Height,

      12:         draggingCanvas.Width);

      13: }

Running the game

If we run the game now, we can now drag the top rectangle around the canvas. But we can’t drop it yet. That’s for next time!

Download the source code so far

Share this post: Email it! | bookmark it! | digg it! | reddit!

Paint.NET: The friendliest update in town

2010-01-11T20:40:59Z

As far as update processes go, Paint.NET has the best in town. Just check out this dialog that you see when launching the program and note how friendly it is. It’s saying "Hi! I’m sure you have some image editing to do. When you’re done, I’d be happy to update myself. Just let me know.” Thanks, Paint.NET!

Let’s see how some other software on my machine stacks up. Here’s Adobe. It doesn’t even wait until I use the software, but just pops up at random times throughout the day. Actually, this screenshot isn’t even from my machine since I get so annoyed at Adobe Updater I don’t allow it to run.

FileZilla and Firefox are a little better, in that they only pop up when I’m using the software. But not quite as friendly as Paint.NET since they expect me to either install the update before I use the software or not install the update. This isn’t bad, but not near as slick as Paint.NET. When I launch software, I want to USE it, not UPDATE it.

So my hat’s off to the guys at Paint.NET for letting me update my software while staying out of my way!

Share this post: Email it! | bookmark it! | digg it! | reddit!

Fixing Outlook Pet Peeves with Quick Steps

2009-12-18T20:15:35Z

One of the new features in Outlook 2010 is Quick Steps. Quick Steps let you chain multiple Outlook actions together into an easy-to-access action that shows up in the “Home” tab of the ribbon. Kinda like macros, I suppose, but friendlier.

Outlook 2010 comes with a few handy Quick Steps by default, including one to forward an email to your manager, send an email to your team, or send an email to a folder.

It’s also super easy to create a new Quick Step. I used one to solve one of my biggest pet-peeves about Outook: deleted items are not automatically marked as read. By default, when you delete an email from your inbox without reading it, Outlook moves the message to your “Deleted Items” folder but is still marked as unread.

This is crazy frustrating, because now I have a blue “1” in parentheses, meaning I have unread email. Technically, this is true – I didn’t read it – but in practice, this drives me nuts, because the reason I deleted it is that I didn’t want to read it.

Quick Steps to the rescue …

Here I’ve defined a Quick Step that will mark a message and read and then delete it. Even better, I can add a keyboard shortcut. Nice! No more unread email in my trash can.

Share this post: Email it! | bookmark it! | digg it! | reddit!

Building a Silverlight Game : Part 7 : Getting Started with Dragging Rectangles

2009-10-09T15:32:33Z

This is the seventh post in a series on building a Silverlight game. In the last post, we wrote code to set up a rectangle for dragging. In this post, we’ll look at what it will take to drag the rectangle around the playing area.

Recap

So we don’t lose sight of the big picture, remember that our overall goal is to build a Towers of Hanoi clone that looks like this:

And so far, we’ve built a Towers of Hanoi clone that looks like this:

The current part of the game that we’re working on is the code to drag rectangles around the playing area since that’s pretty much the only thing there is to the game. Last week, we wrote the code that sets up a rectangle for dragging. Remember that this involved three things

Setting a flag that tells us a rectangle is being dragged
Adjusting the opacity of the rectangle to provide a nice visual effect
Capturing the mouse so the rectangle will be sure to respond to mouse events

Dragging

This week, we’ll think about the code that we need to write to drag the rectangle around the canvas. There are five things that need to happen to move the rectangle around

1) We have to check the flag that was set previously. If a dragging operation is not current, we certainly don’t want rectangles moving around the screen. So we’re only going to drag things around the screen if the flag is set to true.

2) We need to get the rectangle out of the stack panel (remember that our rectangles are sitting in a stack panel). Items in a stack panel have to be in a stack. Think of the stack of papers on your desk. You can’t drag them around while they’re in the stack; you have to get them out first.

   1: <StackPanel x:Name="LeftPanel" Orientation="Vertical"

   2:     Canvas.ZIndex="1" VerticalAlignment="Bottom">

   3:     <Rectangle Height="50" Width="100" Fill="Orange"

   4:                MouseEnter="Rectangle_MouseEnter"

   5:                MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" />

   6:     <Rectangle Height="50" Width="110" Fill="Blue" />

   7:     <Rectangle Height="50" Width="120" Fill="Green" />

   8:     <Rectangle Height="5" Width="120" Fill="Black" />

   9: </StackPanel>

3) We need to place the rectangle somewhere that it can be dragged. The root canvas is perfect for this. Remember that our three stack panels are contained in a canvas. A canvas container keeps track of its children by exact position, which is perfect for dragging. Imagine that we’re taking a piece of paper from the stack on your desk and placing it on the desk to drag it around.

       1: <Canvas x:Name="LayoutRoot" Width="800" Height="430">

       2:     <Border Height="380" Width="257" Canvas.Left="15">

       3:         <StackPanel x:Name="LeftPanel" Orientation="Vertical" 

       4:             Canvas.ZIndex="1" VerticalAlignment="Bottom">

       5:             <Rectangle Height="50" Width="100" Fill="Orange" 

       6:                        MouseEnter="Rectangle_MouseEnter" 

       7:                        MouseLeftButtonDown="Rectangle_MouseLeftButtonDown" />

       8:             <Rectangle Height="50" Width="110" Fill="Blue" />

       9:             <Rectangle Height="50" Width="120" Fill="Green" />

      10:             <Rectangle Height="5" Width="120" Fill="Black" />

      11:         </StackPanel>

      12:     </Border>

4) We need to bring the rectangle forward, closer to the player. We don’t want the rectangle to accidentally get dragged behind another graphic or another rectangle, so we’ll set the ZIndex to make sure that any rectangle that is currently being dragged is the front-most object.

5) And finally, the most important thing of all, we need to move the rectangle to the current position of the mouse so that as the player moves the mouse the rectangle moves with it. That’s the essence of dragging after all.

Conclusion

So that’s it. If we can write code to do those five things, we can drag a rectangle around the playing area. Next post, we’ll write the code to do those things. We didn’t write any code this week, so the code from last week will still be the most recent.

Share this post: Email it! | bookmark it! | digg it! | reddit!

Speaking at Iowa Code Camp

2009-10-08T15:24:41Z

I’ll be speaking at the Iowa Code Camp in Des Moines, IA on November 7th. Should be great Iowa weather! The topic will be Ruby on Rails for .NET/Java Developers.

The Iowa Code Camp is a completely free, one-day event and registration is still open. Should be a lot of fun.

Ruby On Rails (RoR) For .Net Developers

View more presentations from parkbot.

Share this post: Email it! | bookmark it! | digg it! | reddit!

Building a Silverlight Game : Part 6 : Setting up a rectangle for dragging

2009-09-30T18:25:00Z

This is the sixth post in a series on building a Silverlight game. In the last post, we wrote code to change the cursor into a hand when the player mouses over the orange rectangle.

Introduction

In this post, we’ll write some code to set up a rectangle for dragging and dropping. If we think about the idea of dragging a rectangle around the screen, there are a few things we need to take are of before a rectangle is ready to be dragged around.

We need to set a flag that we’re dragging. When we drag, we’re going to tie that to the rectangle MouseMove event and we don’t want to drag all the time, just when we’re supposed to. So we’ll set a flag to tell us that dragging is currently active. That will prevent rectangles from being dragged around the screen every time the player mouses over them.
We need to adjust the opacity of the rectangle to provide a nice visual effect. This will distinguish the dragged rectangle from the rest of the rectangles.
We need to capture the mouse. It is possible in Silverlight to move the cursor so fast that the cursor will come out of the item being dragged. When we capture the mouse we tell Silverlight to keep responding to events as if the mouse was still inside the item being dragged.

Adding the MouseLeftButtonDown event handler

Our first task is to wire up the MouseLeftButtonDown event for the orange rectangle. This is easiest in Blend. Just select the orange rectangle, open the Properties tab, and then hit the event button in the upper right. This will display all the events that we can wire up for the rectangle. Double-click inside the MouseLeftButtonDown textbox to have Blend automatically create an event handler.

If you would rather use Visual Studio, you can just manually add the event handler code to the rectangle’s XAML and then add the Rectangle_MouseLeftButtonDown method to the XAML’s code-behind.

   1: <Rectangle Height="50" Width="100" Fill="Orange"

   2:            MouseEnter="Rectangle_MouseEnter"

   3:            MouseMove="Rectangle_MouseLeftButtonDown " />

   1: private void Rectangle_MouseLeftButtonDown (object sender, MouseEventArgs e)

   2: {

   3:     // TODO: Add event handler implementation here.

   4: }

Inside the Rectangle_MouseLeftButtonDown event handler, we’ll make a call to do the three things that are required to set up a rectangle for dragging and dropping: setting the flag, changing the opacity, and capturing the mouse. We don’t want to put all of this code in our code-behind though, so let’s write a new class called “DragAndDrop” that can contain all of drag-and-drop logic.

But first, let’s write the code that will call our new class. As you can see below, we’re going to call an instance of our DragAndDrop class’s StartDrag method and send it the rectangle that we want to start dragging.

   1: private void Rectangle_MouseLeftButtonDown(object sender,

   2:      MouseButtonEventArgs e)

   3: {

   4:     dragAndDrop.StartDrag(sender as Rectangle);

   5: }

The DragAndDrop class

The DragAndDrop class is nice and simple. It has a boolean that knows if something is being dragged or not and it has one method that can start the dragging process for a given rectangle.

   1: public class DragAndDrop   2: {   3:     private bool dragging = false;   4:     5:     public void StartDrag(Rectangle rectangle)   6:     {   7:         if (rectangle.Cursor.Equals(Cursors.Hand))   8:         {   9:             dragging = true;  10:             rectangle.CaptureMouse();  11:             rectangle.Opacity = 0.6;  12:         }  13:     }  14: }

The StartDrag method first checks to see if the rectangle’s cursor is a hand. If it is, then we know that this rectangle must be on top and so is eligible for dragging. This will prevent players from dragging rectangles that are not on top.

If the rectangle is on top, we just do the three things required to start dragging

Set the boolean to true
Capture the mouse so events on the rectangle will continue to fire even if the mouse leaves the rectangle’s area
Set the opacity of the rectangle to 0.6. This means that the rectangle being dragged will be 40% see through.

In our next post, we’ll write some code to actually drag the rectangle around the canvas.

Download source code so far

Share this post: Email it! | bookmark it! | digg it! | reddit!

Screencast: Silverlight 3 and ADO.NET Data Services

2009-09-24T20:11:54Z

Here’s a short screencast that explores using ADO.NET Data Services (Astoria) to provide data for a Silverlight 3 navigation application. The screencast is just a bit over thirty minutes and is about 1/3 slides and 2/3 demo.

The screen cast covers

A brief overview and history of Silverlight
Overview of data access options in Silverlight
Comparison / contrast between ADO.NET Data Services and RIA Services
Demo showing how to

use Visual Studio to create an ADO.NET Data Service that exposes and ADO.NET Entity Data Model
use Expression Blend to wire up a Silverlight Navigation Application to Expression Blend Sample Data
use Visual Studio to wire up a Silverlight Navigation Application to communicate with an ADO.NET Data Service

Download (WMV, 45MB)

Share this post: Email it! | bookmark it! | digg it! | reddit!

Using Converters Instead of Custom Client Properties with Silverlight and ADO.NET Data Services

2009-09-23T16:37:02Z

One challenge with ADO.NET Data Services is that it has trouble understanding what’s going on if you add custom properties to your entities on the client side. This post will explain using converters to overcome that challenge when using Silverlight. Or WPF, I suppose.

Background

When you add a reference to an ADO.NET Data Service, Visual Studio generates a set of client classes that represent the entities on the server. These classes are tantalizing marked as partial, which could lead you to believe that you are welcome to add additional client-only properties to these classes.

   1: [global::System.Data.Services.Common.DataServiceKeyAttribute("Id")]

   2: public partial class Employee

   3: {

   4: }

However, if you extend the partial class to add a property, ADO.NET Data Services will be grumpy when you try to save your object since it won’t know what to do with the extra property.

Let’s say that we want to add an extra property to our Employee class called “HasCornerOffice” that returns “true” if the employee has “VP” in their title. Something like this.

   1: public partial class Employee

   2: {

   3:     public bool HasCornerOffice

   4:     {

   5:         get { return this.Title.StartsWith("VP");  }

   6:     }

   7: }

When you try to save an instance of an employee back to the database, you’ll get an error along the lines of “Error processing request stream. The property name ‘HasCornerOffice’ specified for type ‘Employee’ is not valid.” ADO.NET Data Services has no idea what the property is all about and is letting us know.

Some Solutions

There are a few ways around this.

You could use a brand-new client-only class that can be mapped to and from Employee. Adding this layer of abstraction could make a lot of sense and add some insulation between your client and server that could come in handy later. Not a bad way to go for the trade-off of writing and maintaining the mapping code to back and forth between the client and server objects.

You could also customize the way that objects are serialized by digging into the bowels of the data context and intercepting the ATOM request before it is send to the server. Not sure what this would do if you were using JSON, but this blog post has the details for wiring it up with an ATOM request.

Using Convertors

An alternate quick and easy solution is to leave the client-side entities as-is and use a converter to transform our Employee data into the data that we want to display. This has the advantage of being straightforward and low-impact, but is maybe not as flexible or extensible long-term as the two solutions above.

Using the same Employee example as above, our Converter would look like this.

   1: public class CornerOfficeConverter : IValueConverter

   2:  {

   3:      public object Convert(

   4:          object value,

   5:          Type targetType,

   6:          object parameter,

   7:          CultureInfo culture)

   8:      {

   9:          if (string.IsNullOrEmpty(value as string))

  10:          {

  11:             return false;

  12:          }

13:

  14:          return value.ToString().StartsWith("VP");

  15:      }

  16: }

And we could bind to it like this.

   1: <TextBlock

   2:     Text="{Binding Title,

   3:            Converter={StaticResource TitleConverter}}" />

Conclusion

Hopefully, this shortcoming in ADO.NET Data Services will be resolved in the framework itself in the next version or so, but in the meantime, those are some ideas of how to work around the problem.

Share this post: Email it! | bookmark it! | digg it! | reddit!

Building a Silverlight Game : Part 5 : Changing the cursor

2009-09-17T16:59:44Z

This is the fifth post in a series on building a Silverlight game. In the last post, we finished our basic layout: three stack panels for the game rectangles, some rectangles to play with, and a bottom border for the rectangles to sit on.

With all of that set, we can start writing some code. The first thing to do is let the user know which rectangle they are allowed to drag. The rules of the game state that you can only drag the top rectangle around. In our case, this is the orange rectangle.

The standard way to let someone know that they can interact with an object is to change the cursor from the default arrow to a hand, so that’s what we’ll do. We need to set things up so that when the player mouses over the orange rectangle, the cursor changes into a hand.

Blend makes event handling an n easy task through the events pane. Select the orange rectangle, and then look for the lightning bolt icon over on the Properties tab. This gives us access to all of the events available for the orange rectangle.

The one we want is the MouseEnter event. Double-click inside of the textbox next to MouseEnter and Blend will create an event handler for us.

   1: public partial class MainPage : UserControl

   2: {

   3:     public MainPage()

   4:     {

   5:         InitializeComponent();

   6:     }

7:

   8:     private void Rectangle_MouseEnter(object sender, MouseEventArgs e)

   9:     {

  10:         // TODO: Add event handler implementation here.

  11:     }

  12: }

Blend 3 will let us write C#, but the experience is a better in Visual Studio. If you don’t have Blend, you can accomplish the same event handle wire-up task by adjusting the XAML for your orange rectangle to look like the snippet below and then manually adding the Rectangle_MouseEnter code to your code-behind.

   1: <StackPanel x:Name="LeftPanel" Orientation="Vertical"

   2:     Canvas.ZIndex="1" VerticalAlignment="Bottom">

   3:     <Rectangle Height="50" Width="100" Fill="Orange"

   4:                MouseEnter="Rectangle_MouseEnter" />

   5:     <Rectangle Height="50" Width="110" Fill="Blue" />

   6:     <Rectangle Height="50" Width="120" Fill="Green" />

   7:     <Rectangle Height="5" Width="120" Fill="Black" />

   8: </StackPanel>

Inside of Rectangle_MouseEnter, we can write our code to change the cursor into a hand. The easiest thing to do is this:

       1: private void Rectangle_MouseEnter(object sender, MouseEventArgs e)

       2: {

       3:     Rectangle rectangle = sender as Rectangle;

       4:     rectangle.Cursor = Cursors.Hand;

       5: }

We cast the sender of the event to a rectangle (because it is a rectangle) and then set the Cursor to Cursors.Hand. This does the job, but isn’t very flexible. We eventually want this code to apply to all of our rectangles, not just the orange one, so let’s add some checks to make sure that the rectangle is on top of its stack. We only want to change the cursor to a hand if the rectangle being moused over is on top.

So we adjust our Rectangle_MouseEnter to look like this:

       1: private void Rectangle_MouseEnter(object sender, MouseEventArgs e)

       2:  {

       3:      Rectangle rectangle = sender as Rectangle;

       4:      Panel panel = rectangle.Parent as Panel;

       5:      rectangle.Cursor = (RectangleIsOnTop(rectangle, panel))

       6:          ? Cursors.Hand

       7:          : Cursors.Arrow;

       8:  }

All we’re lacking now is the RectangleOnTop() method referenced by our new conditional logic. Since the children (rectangles) of the stack panel are ordered by their index, with 0 being on top, such a method might look like this.

       1: private static bool RectangleIsOnTop(Rectangle rectangle, Panel panel)

       2: {

       3:     return panel.Children.IndexOf(rectangle).Equals(0);

       4: }

Now when we mouse over the orange rectangle, our cursor will change into a hand to indicate that we can drag the rectangle around. In the next post, we’ll write some code to start dragging the rectangle around.

Share this post: Email it! | bookmark it! | digg it! | reddit!

Building a Silverlight Game : Part 4 : Finishing the basic layout

2009-09-10T17:46:10Z

This is the fourth post in a series on building a Silverlight game. In the last post, we polished off our three stack panels and added some rectangles to the first stack panel.

The challenge we left off with is how to get the rectangles down to the bottom where they belong. Stack panels like to put their items at the top and then add subsequent items underneath, just like in HTML.

We can get around this by making our stack panel just tall enough to hold only the rectangles that are in it, and then forcing the entire stack panel down to the bottom. This is accomplished by wrapping our stack panel in a border and taking away its height.

A border is an interesting Silverlight control that can have only one child. It is best used for making borders of course, but it can also make a handy container. There are some nice benefits of having a container control that you know will only ever have one child.

To surround the panels with borders in Expression Blend, just right-click the panel and select “Group Into > Border”. Blend is even kind enough to move our height from the stack panel to the border. Repeat this for all of the panels. If you’re using Visual Studio, you can just skip ahead to the finished XAML below.

After surrounding the panels with borders, your object tree should look like this.

The next step is to get the panels to sit at the bottom of their panels. This is done by selecting all three panels at once in the object explorer and changing their vertical alignment property to “Bottom”

Now all of the panels are sitting snugly at the bottom of their borders. Remember that the empty space at the bottom is intentional. We’ll fill that up shortly.

Your finished XAML should look something a lot like this. We have three stack panels, each wrapped in a border. The first stack panel has three playable rectangles and a rectangle platform.

        1: <Canvas x:Name="LayoutRoot" Width="800" Height="430">

       2:     <Border Height="380" Width="257" Canvas.Left="15">

       3:         <StackPanel x:Name="LeftPanel" Orientation="Vertical" 

       4:             Canvas.ZIndex="1" VerticalAlignment="Bottom">

       5:             <Rectangle Height="50" Width="100" Fill="Orange" />

       6:             <Rectangle Height="50" Width="110" Fill="Blue" />

       7:             <Rectangle Height="50" Width="120" Fill="Green" />

       8:             <Rectangle Height="5" Width="120" Fill="Black" />

       9:         </StackPanel>

      10:     </Border>

      11:     <Border Height="380" Width="257" Canvas.Left="272">

      12:         <StackPanel x:Name="MiddlePanel" Orientation="Vertical" 

      13:             Canvas.ZIndex="1" VerticalAlignment="Bottom"/>

      14:     </Border>

      15:     <Border Height="380" Width="257" Canvas.Left="529">

      16:         <StackPanel x:Name="RightPanel" Orientation="Vertical"  

      17:             Canvas.ZIndex="1" VerticalAlignment="Bottom"/>

      18:     </Border>

      19: </Canvas>

The last thing we need to do to finish our basic layout is to fill up the bottom area. For now, we’ll just use a boring gray rectangle. Later, we’ll use brushes to spice it up a bit.

   1: <Rectangle x:Name="BottomRectangle" Height="50" Width="800"

   2:            Canvas.Top="380" Fill="Gray"  />

After adding the bottom rectangle, our playing area looks like this.

And that’s it for basic layout. In the next post, we’ll start writing some C# to enable dragging and dropping the rectangles.

Share this post: Email it! | bookmark it! | digg it! | reddit!