Silverlight made simple

This is a quick and simple example of how to create a draggable object in Silverlight 2.

1. Create a Rectangle and set the RenderTransform to a TranslateTransform.

<Rectangle x:Name="rect" Width="50" Height="50" Fill="Blue" HorizontalAlignment="Left" VerticalAlignment="Top">
<Rectangle.RenderTransform>
<TranslateTransform x:Name=”rectTranslateTransform” X=”0″ Y=”0″ />
</Rectangle.RenderTransform>
</Rectangle>

2. Register the MouseLeftButtonDown, MouseLeftButtonUp, and the MoseMove events for the rectangle.

this.rect.MouseLeftButtonDown += new MouseButtonEventHandler(rect_MouseLeftButtonDown);
this.rect.MouseLeftButtonUp += new MouseButtonEventHandler(rect_MouseLeftButtonUp);
this.rect.MouseMove += new MouseEventHandler(rect_MouseMove);

3. In the MouseLeftButtonDown and MouseLeftButtonUp event you will capture and release the capture of the mouse, respectively.  Also, you will need to store if the mouse is captured.




// Stores if the mouse is captured
private Boolean isRectMouseCapture = false;

void rect_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
    this.rect.ReleaseMouseCapture();
    isRectMouseCapture = false;
}

void rect_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    this.rect.CaptureMouse();
    isRectMouseCapture = true;
}

4. Finally, update the position if the mouse is captured and the mouse is moving.




void rect_MouseMove(object sender, MouseEventArgs e)
{
    if (isRectMouseCapture)
    {
        this.rectTranslateTransform.X = e.GetPosition(this).X;
        this.rectTranslateTransform.Y = e.GetPosition(this).Y;
    }
}

Final product:

Maintain mouse position on object while dragging

The above example snaps the pointer to the top left of the object.  Face it, it’s annoying, what you really want is the mouse to maintain the position on the element while dragging. To solve this problem is simple.

1. Add a variable to save the position when the user clicks the object.

private Point clickPosition;

2. Save the position of where the mouse is located on the MouseLeftButtonDown event.  The updated MouseLeftButtonDown event looks like:

void rect_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    clickPosition = e.GetPosition(sender as UIElement);
    this.rect.CaptureMouse();
    isRectMouseCapture = true;
}

3. Finally, in MouseMove event subtract the clickPosition from the mouse position.

this.rectTranslateTransform.X = e.GetPosition(this).X - clickPosition.X;
this.rectTranslateTransform.Y = e.GetPosition(this).Y - clickPosition.Y;

Update

Drag and drop with physics (friction)

After playing around, I have updated this example to incorporate physics.  Take a look:

http://www.coreyschuman.com/Silverlight/Prototypes/DragDropPhysics/Proto1TestPage.aspx

After months and months the Olympics are almost here.  This will be a big day/week(s) for internet broadcasting and for Silverlight.  I can’t wait!!!

It looks like Microsoft has a page promoting the site http://www.microsoft.com/silverlight/NBCOlympicsonMSN/getsilverlight.html

Today when I was looking Silverlight.net I noticed the headlining application was the NBA Website.  I HAD to click it.  All in all it was disappointing.  Granted, this is probably a preview application of things to come for the upcoming season, still, I was expecting more. 

A few thoughts:

1.) Why fullscreen?  It is a mistake to have features the user can only use in fullscreen.  This is a big problem.  The high-res images are great, but make the browser window resize instead of the SL piece.

2.) Use of the Hand cursor.  Clickable objects on the screen should have a visual indicating clickablity.  Just having an object on the screen is not enough to let the user know action can be performed on it.

3.) The animations don’t feel thought out.  Specifically the bottom right animation. Why is the bottom menu animating opacity and the transform?  It is nice to see some easing on the menus…they need to be tighter.

4.) Video.  Where is the video?  I know I know, this is probably a prototype to generate interest, but how cool would that be to have Video in this app.

As I continue working on Silverlight projects, a concern keeps creeping up…What happens after the first wave of really cool Silverlight applications?  A number of applications being released are done with large teams and are rooted in usability and have design teams working in Blend.  My biggest fear is after the RTM release we are going to see a year or two of really ugly Silverlight 2 applications designed by developers. 

Microsoft has always had an army of .NET developer.  With this new offering (Silverlight 2) developers are going to be chopping at the bit to get season in those skills. 

So here it is…to all developers interested in Silverlight: Think of usability first.  Design your application with the user in mind.  Take time to talk to a user. 

That’s all I have today.

Here are a few indispensable keyboard shortcuts I use on a daily basis:

• Ctrl+K,Ctrl+C - Comment selected block of code
• Ctrl+K,Ctrl+U - UnComment selected block of code
• Ctrl+K,Ctrl+F - Format selected block of code
• Ctrl+Shift+B -Build solution

After doing some searching for a full list of keyboard shortcuts in VS2008, I found the below PDF.
http://www.microsoft.com/downloads/details.aspx?familyid=e5f902a8-5bb5-4cc6-907e-472809749973&displaylang=en

Enjoy.

Have you tried overlaying a <div> on top of a Silverlight object? The only way to achieve this is by setting the Windowless property on the Silverlight object to true. Otherwise you will get get a result like figure 2.

Figure 1 – Windowless set to true.

Figure 2 - Windowless not set or set to false.

Over the weekend two big events happened in the world of Silverlight:

1. Silverlight 2 Beta 2 released,
2. NBCOlympics.com Silverlight 2 video player released.

We, Schematic, along with NBC, Microsoft, and DeltaTre have been working hard to get this to production for a live event. Currently on the site you can watch short clips of sports and interviews. When the Olympics trials and the Olympics arrive, you will be able to watch live sports with this video player.

Taking a step back, it’s amazing to think the majority of live Olympics sports will be broadcast in the US. Every other Olympics, that I remember, have only broadcast the sports that sell well (Beach volleyball, basketball, swimming). Sports like table tennis, shooting, weight lifting, or judo fan always take a back seat. This is a real opportunity for those sports to shine.

Links:
http://www.nbcolympics.com/video/
My boy Rafael’s post about the player
His second post

Popup Player

Enhanced player

Olympic sports module

Lately I have been very busy with work and haven’t had much time to blog. However, the project is winding and it’s time to hop back on the blogging train. On an semi-related note, I have been using twhirl, an Adobe Air app for Twitter, so I decided to search for “Adobe Air WordPress”. Airpress came up, unfortunately their site is down, making it difficult to test. Then the bright idea came up try “WordPress Microsoft Word” and sure enough it’s built in. This site explains how to publish with Word 2007.

Screen shot of AirPress. This is mainly to test uploading images through the publish utility in Word.