Ian Blackburn

Silverlight Drag and Drop and HitTest on any layout (not just Canvas)

2008-12-17T19:03:30Z

[Cross Posted from http://silverlightforbusiness.net ]

A common requirement for a rich UI in a business application is to support dragging and dropping of UI elements. For this to be successful you will need to be able to detect what elements you are dragging over, and you will need to support dragging over any type of layout (such as a complex grid layout), which is a contrast to many examples out there that only show dragging and dropping in relation to absolute layout with a Canvas.

In addition many blogs appear to mention that the UIElement.HitTest method, available in beta’s of Silverlight 2, has since disappeared. However we have the VisualTreeHelper.FindElementsInHostCoordinates method instead that can perform a point hittest for us (that is it will return the elements a point is inside).

So to that end I have created a simple DragManager class that makes it easy to make any element draggable, and raises events when the dragged element collides with one or more elements.

To use the DragManager simply add the class to your project, create an instance of it, wire up the collision event and call EnableDragableElement on the elements you want to drag. Note that since this uses the MouseLeftButtonDown, Move and Up events, any control that handles these events internally will not work (e.g. the Button).

DragManager dm = new DragManager(LayoutRoot);
dm.Collision+= dm_Collision;
dm.EnableDragableElement(Ellipse1);
dm.EnableDragableElement(TextBlockStatus);
dm.EnableDragableElement(Image1);

void dm_Collision(object sender, CollisionEventArgs e)
{
    TextBlockStatus.Text = ((FrameworkElement)e.Element).Name + " " + e.Position.X + "," + e.Position.Y + ": ";
    foreach (UIElement element in e.CollidedElements)
    {
        TextBlockStatus.Text += ((FrameworkElement)element).Name + " ";
    }
}

Of the interesting methods in the DragManager, the following performs the move for the element, and uses a TranslateTransform to move the element. This is in contrast to many examples which use the Canvas.Top and Canvas.Left properties, and has the benefit of working with any layout.

void elementToDrag_MouseMove(object sender, MouseEventArgs e)
{
    if (isDragging)
    {
        UIElement element = (UIElement)sender;
        TranslateTransform transform = GetTranslateTransform(element);
        Point currentMousePosition = e.GetPosition(layoutRoot);
        double mouseX = currentMousePosition.X - lastMousePosition.X;
        double mouseY = currentMousePosition.Y - lastMousePosition.Y;
        transform.X += mouseX;
        transform.Y += mouseY;
        if (Collision != null)
        {
            List<UIElement> collidedElements = 
                VisualTreeHelper.FindElementsInHostCoordinates(
                    currentMousePosition, layoutRoot) as List<UIElement>;
            collidedElements.Remove(element);
            collidedElements.Remove(layoutRoot);

            if (collidedElements.Count() > 0)
            {
                CollisionEventArgs args = new CollisionEventArgs() 
                    {   Element = element, 
                        Position = currentMousePosition, 
                        CollidedElements = collidedElements };
                Collision(this, args);
            }
        }
        lastMousePosition = currentMousePosition;

    }
}

This method calls GetTranslateTransform which looks for an existing TranslateTransform on the element or adds one if not present.

It also calls the VisualTreeHelper.FindElementsInHostCoordinates method to determine if a collision has taken place. We need to remove the layout root and the element we are dragging since they will always be returned.

Full source is available here

Cheers

Ian

Technorati Tags: Silverlight,HitTest,Drag and Drop

Skydrive – now no Windows ID required to collect files

2008-12-12T10:09:22Z

This little checkbox is a welcome addition for me:

It means that I can share files on a Skydrive and not require recipients to have a Windows Live ID, which was occasionally a problem before,

25GB is available for free now too which is nice

Technorati Tags: Skydrive,Windows Live

Ian

Working with Data in Silverlight 2 (Entity Framework, Ado.Net Data Services, and DataGrid)

2008-12-07T18:48:51Z

[Cross posted from: SilverlightForBusiness.net ]

Since the announcement from Tim Mallalieu (Program Manager, LINQ to SQL and Entity Framework) that “as of NET 4.0 the Entity Framework will be our recommended data access solution for LINQ to relational scenarios” your first decision on how to get data into and out of your databases has been made easier: EF is the way to go when looking at solutions from Microsoft (of course you may still decide that you would prefer to use something else from a third party, perhaps LLBLGEN, or maybe a hand crafted solution?).

But after that decision you still have another before we get the data anywhere Silverlight – how to “surface” or expose it. Here you could use a WCF service with a basicHttpBinding a-la the “Silverlight enabled wcf service” template offered to us by Visual Studio 2008 with the Silverlight tools installed.

However a more interesting approach and one that appears to be a better fit with the way Alexandria (i.e. Silverlight 3) will work is to use an Ado.Net Data Service.

So what is an Ado.Net Data Service? The documentation provides an nice summary:

The goal of the ADO.NET Data Services framework is to facilitate the creation of flexible data services that are naturally integrated with the web. As such, ADO.NET Data Services use URIs to point to pieces of data and simple, well-known formats to represent that data, such as JSON and ATOM (XML-based feed format). This results in the data service being surfaced as a REST-style resource collection that is addressable with URIs and that agents can interact with using standard HTTP verbs such as GET, POST, PUT or DELETE.

So that means that we can surface our data very simply via a REST interface. Bottom line – you don’t have to write a whole load of methods in your service such as GetProducts, GetProductsById, GetOrder(int Id), UpdateOrder etc etc. Instead you simple expose your data model through the service.

At this point I usually hear a gasp of belief – “what all our data is available read/write over the web?” – erm yes, but only if you choose not to lock it down. Ado.Net Data Services combined with the EF give you plenty of scope to control access to data based on a users authentication and to inject business and validation logic. But that is a blog post for another time.

What I think is particularly interesting from Silverlight when you use this combination of EF and ADO.Net Data Services is that the code you write feels as if you are writing it on the same tier as the database and application logic – in fact, it is not much different, and that is quite compelling. It makes the classic find data, edit it with business logic applied, and sent back to the database quite easy (with a few gotcha’s which I will list below)

When I show this to delegates on a course who are used to using the Asp.Net Datagrid it gets another gasp, but this time in a positive way (well maybe not a gasp - but certainly a look of bewilderment that belies the effort that have had to put into doing the same thing in Asp.net previously).

Ok so lets see a little code – I am going to demonstrate editing data from the Products table in the Northwind sample database.

I created a Silverlight Project then added a Ado.Net Entity Data Model to the web site and used the Wizard to add all the tables in the Northwind database to it. At this point you will most likely want to at least add some validation logic, or for more complex systems, extend the model. I will cover this is later posts, but for now you can get more info on using EF from zeeshanhirani's free entity framework learning guide.pdf including a walkthrough on this very item. The msdn documentation is getting better too.

Next we add an Ado.Net Data Service to the web site and configure it to use our Entities type (in this case NorthwindEntities). Also in the example below I have allowed full read/write access to all the data in the model (gasp!). For more info on controlling access to the entities see the msdn documentation and I will be blogging about this in more details later.

public class NorthwindDataService : DataService< NorthwindEntities >
{
    // This method is called only once to initialize service-wide policies.
    public static void InitializeService(IDataServiceConfiguration config)
    {
        // TODO: set rules to indicate which entity sets and service operations are visible, updatable, etc.
        // Examples:
         config.SetEntitySetAccessRule("*", EntitySetRights.All);
         config.SetServiceOperationAccessRule("*", ServiceOperationRights.All);
    }
}

Ok we have our data available. At this point you can browse the svc file and see your data exposed as ATOM.

You can try navigating through the data by using the Url. For example try the following (changing the port to your own web site of course :-)

Although this looks like read-only data, the service supports updates too through other HTTP verbs (e.g PUT). So lets put that to the test by adding a service reference to Silverlight and creating an editable grid for the Products table (we will just edit one column for reasons that will become clear).

In the Silverlight project select Add Service Reference, click Discover and give it appropriate name (e.g. NorthwindDataService). This will build a proxy class for us that supports the Ado.Net Data Service in Silverlight.

We are going to use the DataGrid to display and edit the data. What we want to do is bind the data from our service to the DataGrid, use the grid to edit it, then send the changes back in a batch update. Currently the DataGrid has a few issues, not least we do not have an event that lets us know when row data has been edited (this was available in beta’s of the grid but was removed in the final release – a strange decision, one that I would expect to be resolved sometime in the future). To stack up another blog post with the others I have declared in this post, I will take a look at the free AgDataGrid from DevExpress in a later post which does not suffer from this. We will work around this problem by using a DataTemplate and attaching to the LostFocus event of the TextBox that we will use to edit the data.

Here is the Xaml for our UI (if you can call it that – just a couple of buttons and a one column grid)

<Grid x:Name="LayoutRoot" Background="White">
    <Grid.RowDefinitions>
        <RowDefinition Height="30"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <StackPanel Orientation="Horizontal">
        <Button Content="Get data " Click="Button_Click" Margin="5"  ></Button>
        <Button Content="Save data " Click="Button_Click_1" Margin="5"></Button>
    </StackPanel>

    <data:DataGrid x:Name="DataGrid1"  AutoGenerateColumns="False" Grid.Row="1">
        <data:DataGrid.Columns >

            <data:DataGridTemplateColumn Header="Product">
                <data:DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding ProductName, Mode=TwoWay}"></TextBlock>
                    </DataTemplate>
                </data:DataGridTemplateColumn.CellTemplate>
                <data:DataGridTemplateColumn.CellEditingTemplate>
                    <DataTemplate>
                        <TextBox LostFocus="TextBox_LostFocus" Tag="{Binding ProductID}" 
                                 Text="{Binding ProductName, Mode=TwoWay}" ></TextBox>
                    </DataTemplate>
                </data:DataGridTemplateColumn.CellEditingTemplate>
            </data:DataGridTemplateColumn>
        </data:DataGrid.Columns>

    </data:DataGrid>

</Grid>

In the code behind we will need to instantiate our service as a class scoped variable. Notice that the constructor takes a Uri pointing to the svc file we want to use.

NorthwindDataService.NorthwindEntities entities = 
                  new NorthwindDataService.NorthwindEntities(new Uri("NorthwindDataService.svc",UriKind.Relative));

We can then use the DataServicesQuery type to create and execute a query when the Get Data button is clicked. Ideally we would just bind the results to the DataGrid, but this does not currently work, so instead I am also storing the results of the query in a List<Products> and binding that – this is really a hack to get around the DataGrid problem.

private List<Products> loadedProducts;

private void Button_Click(object sender, RoutedEventArgs e)
 {
     DataServiceQuery<Products> query = (DataServiceQuery<Products>)
         from c in entities.Products
         where c.Discontinued ==false
                 select c;
     DataGrid1.ItemsSource = null;
     query.BeginExecute(new AsyncCallback(c =>
     {
         IEnumerable<Products> results= query.EndExecute(c);
         loadedProducts = results.ToList();
         DataGrid1.ItemsSource = loadedProducts;
         
     }),query);

     
 }

Ok so when this button is clicked the DataGrid will show the result of the query using it’s DataTemplate:

Selecting a cell, then clicking again in it will switch the DataGrid it to edit mode (or you could double-click, but that’s not very web ui ;-). After the data is edited we want to update our entity data with the changes. Ideally the DataGrid would do this for us automatically, but unfortunately it does not at the moment, so instead we have hooked the LostFocus event on the textbox:

private void TextBox_LostFocus(object sender, RoutedEventArgs e)
{
    
        int changedItemId = (int)((TextBox)sender).Tag;
        Products changedItem = (from c in loadedProducts
                                where c.ProductID == changedItemId
                                select c).Single();
        entities.UpdateObject(changedItem);
        

}

You will notice that in the DataTemplate for the grid, I embedded the ID for the item in a tag property for the TextBox – I am using this to find the actual product data in the List<Products> we populated when we got the data. We then call UpdateObject on our entities object and pass the updated item to it. This has not made any call to the database at this point, just updated our –in-memory entities collection.

Our Save Data event handler looks like the following, most of which is examining the OperationalResponses fro the Ado.Net Data service for exceptions. The nice bit is that we only need to call BeginSaveChanges on our entities object to update all the changes in the database.

entities.BeginSaveChanges(SaveChangesOptions.ContinueOnError, new AsyncCallback(c =>
           {
               try
               {
                   DataServiceResponse response = entities.EndSaveChanges(c);
                   var operationalResponses = response.GetEnumerator();
                   while (operationalResponses.MoveNext() == true)
                   {
                       MessageBox.Show(operationalResponses.Current.StatusCode + " " + operationalResponses.Current.Error);
                   }
                   MessageBox.Show("Saved");
               }
               catch (DataMisalignedException ex)
               {
                   MessageBox.Show("Misaligned " + ex.Message);
               }
               catch (DataServiceClientException ex)
               {
                   MessageBox.Show("Client " + ex.Message);
               }
               catch (DataServiceRequestException ex)
               {
                   MessageBox.Show("Request " + ex.Message);
                   var operationalResponses = ex.Response.GetEnumerator();
                   while (operationalResponses.MoveNext() == true)
                   {
                       string message = string.Empty;
                       if (operationalResponses.Current.Error != null)
                       {
                           message = operationalResponses.Current.Error.Message;
                       }
                       message += " Status code: " + operationalResponses.Current.StatusCode;
                       MessageBox.Show(message);
                   }
               }
               catch (DataServiceQueryException ex)
               {
                   MessageBox.Show("Query " + ex.Message);
               }
           }), entities);

I hope that has given you an insight to using data with Silverlight 2 – I will be adding more posts to drill deeper into these topics, but you may want to look at the Msdn docs for this for further info

I have uploaded this sample project to my skydrive here: http://cid-fb8b852ef1ab0b35.skydrive.live.com/self.aspx/SampleCode/SilverlightSimpleEditData.zip

Serializing Objects to Isolated Storage in Silverlight 2

2008-11-27T11:26:04Z

[Cross posted from: SilverlightForBusiness.net ]

Silverlight 2 does not have a BinaryFormatter like the full framework does so you have to take a different approach to serializing data to Isolated Storage.

However there is a simple solution by using the DataContractSerializer. You will need to add a reference to System.Runtime.Serialization. This will serialize the object to an Xml format and is what Silverlight uses when you add a service reference.

So if we have an object called Person, we can use the DataContract and DataMember attributes to mark it up as follows:

[DataContract]
public class Person
{
    [DataMember]
    public int PersonId { get; set; }
    [DataMember]
    public string Name { get; set; }
    
}

You can then use the DataContractSerializer as follows to save Person data to Iso storage:

Person p = new Person() { PersonId = 1, Name = "Fred" };
using (IsolatedStorageFile store = IsolatedStorageFile.GetUserStoreForSite())
{
    IsolatedStorageFileStream stream = store.CreateFile("Person.dat");
    DataContractSerializer serializer = new DataContractSerializer(typeof(Person));
    serializer.WriteObject(stream, p);
    stream.Close();
}
MessageBox.Show("Data Saved");

And the following to read it:

Person p;
using (IsolatedStorageFile store = IsolatedStorageFile.GetUserStoreForSite())
{
    IsolatedStorageFileStream stream = store.OpenFile("Person.dat", FileMode.Open);
    DataContractSerializer serializer = new DataContractSerializer(typeof(Person));
    p = (Person)serializer.ReadObject(stream);
    stream.Close();
}
MessageBox.Show("Data Loaded");
TextBlock1.Text = p.Name + " " + p.PersonId;

If you want to make this more generic you could create a generic method as follows:

private void SaveData<T>(T dataToSave,string fileName)
{
    using (IsolatedStorageFile store = IsolatedStorageFile.GetUserStoreForSite())
    {
        IsolatedStorageFileStream stream = store.CreateFile(fileName);
        DataContractSerializer serializer = new DataContractSerializer(typeof(T));
        serializer.WriteObject(stream, dataToSave);
        stream.Close();
    }
}

Then you can call it as follows:

SaveData<ObservableCollection<Person>>(people, "People.dat");
SaveData<Person>(person, "Person.dat");

Technorati Tags: Silverlight,Serialization,Isolated Storage

Cheers

Ian

Announcing: Silverlight "Power Seminar"

2008-11-12T15:15:41Z

Kings Hill Conference & Training Centre (location)
Friday November 28th, 2008 (10am-1pm)

I am presenting this seminar in Kings Hill on November 28th – should be a good overview and I will be drilling into some depth with the demo’s later on. Hope you can make it.

Marketing info and content below ;-)

Don't miss this opportunity for your company to get a great insight into this exciting technology and how it can affect your business

Special Offer

Silverlight Power Seminar only £98+vat

Muffins and Danish pastries included!

Book by Friday 14th November and bring a colleague for half price: £49+vat

Free CD packed with resources for every delegate PACKED with resources for every delegate

9:30 Registration, Danish Pastries, Muffins, Coffee and Tea

10:00 - 11:00 Executive Overview.

What is Silverlight?

Key drivers and barriers

Market placement and competing technologies (e.g. Flash, Ajax)

What it takes to build Silverlight applications

How will it affect my business?

Silverlight strategic futures (the Microsoft Client: Desktop, Web and Mobile), Alexandria.

11:00 - 11:10 Break (tea and coffee)

11:10 - 12:00 Silverlight for Designers

What can you do with Silverlight?

What can't you do with Silverlight?

What is Xaml?

Silverlight design tools (Expression suite, export from other tools such as Illustrator)

How you can work more closely with Developers

12:00 - 12:10 Break (tea and coffee)

12:10 - 13:00 Silverlight for Developers

Silverlight managed code development in Visual Studio

Understanding how Silverlight fits into a n-tier development

Working with Data

Understanding the HtmlBridge

Other Silverlight features (threading, isolated storage...)

Book Now!

Technorati Tags: Silverlight

Silverlight 2 vs. Asp.Net Ajax

2008-11-05T19:15:03Z

Shameless plug for my new blog: silverlightforbusiness.net

And the latest article: Silverlight 2 vs. Asp.Net Ajax

Cheers

Ian

Technorati Tags: Silverlight,asp.Net Ajax

VS2010 – two screenshots to warm the hearts of TDD fans

2008-11-04T15:31:45Z

When you are doing TDD you want more more than the Generate Method Stub functionality in VS2008 – you want to be able to generate stubs for anything!

Well VS 2010 comes to the rescue (as it should since it states they are targeting TDD as mainstream for this release)

And if you click Generate Other:

Nice one!

Technorati Tags: VS2010,TDD

Cheers

Ian

New SilverlightForBusiness.net Blog

2008-11-03T14:20:08Z

Most developers and managers are impressed with Silverlight when they first see it, and most are keen see what it can do. Most see the immediate benefits for rich web based UI, and often there is a comparison drawn with Flash (“Is Silverlight a Flash Killer?”). However the business case is not always clear to them.

I believe Silverlight offers a tremendous platform for Business Applications

It’s not just the richness of the UI and the wide reach and lower maintenance of the web deployment, but the fact that it is built in managed .net code, with a rich framework that makes many powerful capabilities much easier (threading, isolated storage, wcf services, data binding, linq to name a few)

So I have started a new blog over on silverlightforbusiness.net - this blog will be an exploration of using Silverlight for Enterprise/Business applications.

Some of the topics I will be exploring (in no particular order)

User productivity - can a well design UI improve productivity for the user?
Silverlight competitors/alternatives – Ajax, Flash Java FX etc..
n-tier architecture with Silverlight UI
Working with data (moving, shaping, binding, validating, paging)
Services
Html Interaction
Where to put your business logic
Security
Future directions

To kick things of, take a look at this video from Jamie Cool from the recent PDC – it introduces many of the topics above and also a sneak peak of the next version of Silverlight (code name Alexandria) which provides a richer Business Logic Framework:

http://channel9.msdn.com/pdc2008/PC11/

Cheers

Ian

Technorati Tags: Silverlight,Business,Alexandria,n-tier

Creating Reusable Animations in Silverlight 2

2008-11-01T09:36:08Z

I answered a post on the Silverlight forums recently about creating reusable animations for an Image, and thought that it was worth a blog entry to expand on it a little.

I am looking here at two common approaches to creating reusable animations within a single project:

Create the animation in xaml (using Blend) on one element and then change the target in code. This is easier to do but means you can only play one animation at a time (because only one animation actually exists)
Create the animation purely in code. This means you can create as many as you want and have them all playing at the same time, and writing the code gives you more control over changing the animation conditionally at run time.

Of course you can also have a combination of the two (so you could create the animation in blend, then create a copy of it in code and manipulate it)

Using the Xaml Approach

Here's an example of the first approach. This is the Xaml created by recording an animation in Blend against "Image1". Notice that I have given the two DoubleAnimationUsingKeyFrames elements names (GrowImageScaleXAnimation and GrowImageScaleYAnimation) so that it is easy to change their properties in code later on:

<Storyboard x:Name="GrowImage" AutoReverse="True">
            <DoubleAnimationUsingKeyFrames 
                x:Name="GrowImageScaleXAnimation" 
                BeginTime="00:00:00" 
                Storyboard.TargetName="Image1" 
                Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
                <SplineDoubleKeyFrame 
                    KeyTime="00:00:00.5000000" 
                    Value="1.1" 
                    KeySpline="0.24,0.75,0.9,1"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames 
                x:Name="GrowImageScaleYAnimation" 
                BeginTime="00:00:00" 
                Storyboard.TargetName="Image1" 
                Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
                <SplineDoubleKeyFrame 
                    KeyTime="00:00:00.5000000" 
                    Value="1.1" 
                    KeySpline="0.24,0.75,0.9,1"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>

So if you have two images like this:

<Image x:Name="Image1" Width="100" Height="100" Source="Images/beta.jpg" 
           MouseLeftButtonUp="Image_MouseLeftButtonUp" RenderTransformOrigin="0.5,0.5">
            <Image.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </Image.RenderTransform>
        </Image>
        <Image x:Name="Image2" Width="100" Height="100" Source="Images/beta.jpg" 
           MouseLeftButtonUp="Image_MouseLeftButtonUp"  RenderTransformOrigin="0.5,0.5">
            <Image.RenderTransform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </Image.RenderTransform>
        </Image>

You can write the following code to play the animation on either one:

private void PlayXamlImageAnimation(string ImageName)
{
    GrowImage.Stop();
    Storyboard.SetTargetName(GrowImageScaleXAnimation, ImageName);
    Storyboard.SetTargetName(GrowImageScaleYAnimation, ImageName);
    GrowImage.Begin();
}

Using the Pure Code Approach

For the pure code approach you create the animation in code and attach it to the image. Here is my code to create the animation:

private Storyboard CreateAnimation(DependencyObject image)
{
    Storyboard board = new Storyboard();
    board.AutoReverse = true;

    DoubleAnimationUsingKeyFrames scaleXAnim = 
           GetAnimation(image, "(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)");
    DoubleAnimationUsingKeyFrames scaleYAnim = 
           GetAnimation(image, "(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)");
    
    board.Children.Add(scaleXAnim);
    board.Children.Add(scaleYAnim);

    return board;
}

private DoubleAnimationUsingKeyFrames GetAnimation(DependencyObject image,string propertyPath)
{
    DoubleAnimationUsingKeyFrames animation = new DoubleAnimationUsingKeyFrames();
    animation.BeginTime = TimeSpan.FromSeconds(0);
    Storyboard.SetTarget(animation, image);
    Storyboard.SetTargetProperty(animation, new PropertyPath(propertyPath, new object[0]));


    SplineDoubleKeyFrame spline = new SplineDoubleKeyFrame();
    spline.KeyTime = TimeSpan.FromSeconds(0.5);
    spline.Value = 1.1;
    KeySpline keySpline = new KeySpline();
    keySpline.ControlPoint1 = new Point(0.24, 0.75);
    keySpline.ControlPoint2 = new Point(0.9, 1);
    spline.KeySpline = keySpline;
    animation.KeyFrames.Add(spline);
    return animation;
}

This produces exactly the same animation that was shown in the Xaml above, but is quite a bit more work (in truth I still find it easier to record this in Blend, then manually convert it to code from the Xaml) The benefit is that we have more control and we can get as many animation instances we want so that we can have them all playing at the same time on different images. So in this example I create two Storyboards and then instantiate them against my images in the constructor for the page:

Storyboard image1Animation;
Storyboard image2Animation;

public Page()
{
    InitializeComponent();
    image1Animation = CreateAnimation(Image1);
    image2Animation =  CreateAnimation(Image2);

}

Then it is simple a matter of playing the animations when needed.

You can download the source from my sky drive:

Cheers

Ian

Technorati Tags: Silverlight,Xaml,Animations

VB.Net and C# to draw closer together for v4

2008-10-30T16:38:03Z

There are some interesting improvements for C# 4 as detailed here, but I was struck by the following comment in that document.

A secondary theme is co-evolution with Visual Basic. Going forward we will aim to maintain the individual character of each language, but at the same time important new features should be introduced in both languages at the same time. They should be differentiated more by style and feel than by feature set.

I think this will be a surprise for many vb programmers who have seen a gradual move away from their language to c# for many demos and resources, and a growing frustration that they are being left behind.

Of course the IDE needs to have the same theme of co-evolution for this to work well – refactoring for example is painfully missing in VB.Net for VS 2008.

So this is good news for mixed language development teams and for general resource management within the industry but the proof will be in the pudding for VS 2010 – I look forward to seeing it.

Cheers

Ian

Technorati Tags: C# 4,VB.Net