John Mendez

This post will show how to go about reusing the same storyboard in Silverlight 3. In this case I will be reusing the same Storyboard animation to make 3 ellipses grow and shrink.  Each Ellipse will start at 50 x50 and grow to 75 x 75 then go back to 50 x 50 depending if the mouse has entered or left the element.  As for most of the time with me, this post is a concept and not part of a full solution.  However, I am using this concept in a solution I am currently working on.  Ok, so let’s go about accomplishing this.

First off we need to have our Storyboard created.  For the interest in time I will not step through how to create it in Expression Blend 3.  Although this storyboard is not too complicated and could be made just by writing the XAML itself.

The most important item to recognize here is that I do not specify the Storyboard.TargetName in the DoubleAnimationUsingKeyFrames.This will be specified in the code behind. This is the main component to resuing our StoryBoard.

Next I put 3 Ellipse elements on the UserControl.  The XAML is as follows:

The important item to recognize here is that all of the Ellipse elements share the same MouseEnter and MouseLeave events (MouseEnter="Item_MouseEnter" MouseLeave="Item_MouseLeave").  Also note that each Ellipse has its own x:Name.

Now for the code behind in our UserControl.  I will only show you the events as this is pretty much just an empty user control.

In the code above, you’ll notice you need to cast the sender object as whatever object is sending in the event. In our case this is an Ellipse.  Second, you’ll see we need to use the SetValue() method and give the StoryBoard it’s StoryBoard.TargetName property and set that value to the Name of the Ellipse sending in the event.

Another important note is to make sure you start and stop the storyboards.

And this is it.  With this you get to reuse a storyboard animation in Silverlight for the same object, with minimal amount of code. Good luck with your solution!

Silverlight silverlight

Since the October 2009 version of the toolkit was released, I've been meaning to create a ReorderList in Silverlight.  I wanted to mimic the functionality of the AJAX Toolkit ReorderList for reordering only.  I'll probably expand on this in the future to allow the insert/update/delete aspect as well.

So I did my best as creating that with the new drag and drop functionality in the Silverlight toolkit and a ListBox.

My Environment: 

• Visual Studio 2008 Professional
• ASP.NET 3.5
• Silverlight 3
• October 2009 Silverlight Toolkit
• Web Service (ASMX)
• LINQ to SQL
• SQL 2005

Here is a screenshot from Visual Studio for the solution

  

First I created a sample table in my database to hold the items called Items

  

Note: I have an ItemOrder column of type INT.  This will allow us to keep track of the order of the items.

Next we need to put methods in our Web Service to retrieve the items and to update the items.  Below is the code from the Web Service:

Please note that the TestDBContextDataContext testDB = new TestDBContextDataContext(); is from the LINQ to SQL model I had already setup.  The LINQ to SQL model consisted of me dragging the Items table I made in SQL to the LINQ to SQL Designer

In the UpdateItems method we are

1. Selecting the items from database again
2. Looping through those items and finding the same item in the updatedItems list based off the ItemUniqueID field
3. We assign the new ItemOrder value from the updatedItems list to the original items list in the database.

Now that we have the database and web service setup, we can now concentrate on the Silverlight part of this.

First we need to make the UserControl.  This is not too much work, since this is just an example. Below is the XAML code for the UserControl

Next is the code behind for the XAML

 The logic for the code above is the following:

• Include the using statement "using TestSL3.WebSvc;" to reference our web service
• Define an ObservableCollection to store the items in.
• Call our web service and get the items from the database
• Submit the items (with their new order number) to our Web Service once the reordering is done on the UI side

Screenshots

First Load Before the Reorder

  


Second: During the Reorder Process (repeat as needed)

  


Third (After Reorder Process)

  


Fourth (Database after hitting Submit in the UI)

  

And that is that. You can now have a ReorderList in Silverlight 3 with the help of the Toolkit!  Again, I hope to expand on this to add the ability to insert/update/delete.  If so I'll put it up here as a zip file for everyone to download.  Happy coding, leave any questions or suggestions as usual.

Silverlight silverlight

Well this will be short, but I'm putting this out there because I just spent about an hour trying to figure out (probably wasn't searching correctly, and I'm a bit tired) how to do the equivalent of Response.Redirect in a Silverlight 3 navigation application.  Keep in mind this is my first ever navigation app with Silverlight 3.  I basically had a login page (Home.xaml) and if the login was successful I wanted to navigate to another page (Products.xaml) within the application dynamically.  So after searching google and bing...nothing was showing up how I wanted.  The results either had to do with moving to the next or previous history within the navigation, or some had to do with just swapping the content on the current page with the new page.

So it came down to this simple code to accomplish the same thing as a Response.Redirect in Silverlight:

Silverlight silverlight