Archives

Archives / 2009 / April
  • Silverlight 3 ebook preview

    While at MIX09 we were given a free print preview of the next book of Laurence Moroney (First Look: Microsoft Silverlight 3 – MS Press) with a chapter on some of the new Silverlight 3 features.

    Read more...

  • Silverlight 3 - Create a nice Navigation Flip

    Here is a sample we made at RunAtServer using Silverlight 3 Perspective 3D feature and the new Navigation API to create a nice navigation flip!

    Video

    How does it work ?


    Short story
    The app use the new navigation api to navigate while animating a 3d flip transformation.

    Long story
    The main xaml has a Frame element in a StackPanel with an associated PlaneProjection:

    <StackPanel x:Name="mainContentPageContainer" Grid.Row="2">
        <StackPanel.Projection>
            <PlaneProjection x:Name="mainPanelProjection" />
        </StackPanel.Projection>            
        <navigation:Frame x:Name="mainContentPage" Source="HomePage"></navigation:Frame>
    </StackPanel>

    There are 2 Storyboards (FlipStart and FlipEnd) with one animation each:

    • The first Storyboard animate the RotationY property of the PlaneProjection (mainPanelProjection) from 0 to 90 (half 180°) during 1s.
      The navigation will happen when it complete.
    • The second animate the RotationY property of the PlaneProjection from 270 to 360 (half 180°) and NOT from 90 to 180, we’ll see that later.
      Note the Easing function to add a bounce effect at the end of the page flip.
    <Storyboard x:Name="FlipStart">
        <DoubleAnimation From="0" To="90" Duration="00:00:1" Completed="Flip1Half_Completed"
               Storyboard.TargetName="mainPanelProjection"
               Storyboard.TargetProperty="RotationY">               
        </DoubleAnimation>
    </Storyboard>
    <Storyboard x:Name="FlipEnd">            
        <DoubleAnimation From="270" To="360" Duration="00:00:1" 
                Storyboard.TargetName="mainPanelProjection" 
                Storyboard.TargetProperty="RotationY">
            <DoubleAnimation.EasingFunction>
                <BounceEase Bounces="2" EasingMode="EaseOut" />
            </DoubleAnimation.EasingFunction>
        </DoubleAnimation>
    </Storyboard>

    To learn more on PlaneProjection and Perspective 3D read my previous post:
    http://weblogs.asp.net/lduveau/archive/2009/03/31/silverlight-3-playing-with-perspective-3d.aspx

    The menu is composed of HyperlinkButton elements whose Click events check if the requested page is not the current page and begin the first Storyboard (FlipStart).

    private void Menu_Click(object sender, RoutedEventArgs e)
    {
        menuClicked = sender as HyperlinkButton;
    
        if (mainContentPage.Source.ToString() != menuClicked.Tag.ToString())
            FlipStart.Begin();
    }

    This is where the magic happens:
    Remember the first StoryBoard (FlipStart) apply a 3d transform on the StackPanel from 0 to 90°. When it complete it just navigate to the requested page, then the next Storyboard (FlipEnd) begins! But if we do just that the new page would be inversed, that’s why after the first 90°, the page do a full 180°, and then finish animating a new 90°… makes sense?

    void Flip1Half_Completed(object sender, EventArgs e)
    {
        if(menuClicked != null)
            mainContentPage.Navigate(new Uri(menuClicked.Tag.ToString(), UriKind.Relative));
        FlipEnd.Begin();
    }

    That’s it!

    The code attached is a bit more complex as I added the direction change after each menu click, as well as selected menu backcolor management.

    Download the code (Silverlight 3 beta needed)

    Technorati Tags:

    Read more...

  • My Silverlight talk at Montreal .NET User Group

    This week I gave a Silverlight presentation at the Montreal .NET Community (www.dotnetmontreal.com).

    Very few slides and lots of code, I built live from scratch a Silverlight business oriented application with Visual Studio 2008 and Expression Blend, here is what I demoed:

    • Entity Framework over a SQL Server db (beers!)
    • LINQ
    • WCF service + asynchronous call on the Silverlight 2 client + best practice  
    • Design and Animation with Blend + a few tips (tab key to collapse windows, properties search)
    • Tips to prevent an animation from running twice
    • DataGrid templating (custom columns, custom selected row view)
    • DataBinding
    • Isolated Storage cache [Learn more]
    • Custom alternative “no Silverlight installed” version as well a as a way to simulate a user without Silverlight in IE. I finally build a nice working version of the page with data for the user without forcing him to install Silverlight. [Learn more]
    • Quickly talked about some of the new features coming with Silverlight 3 (currently beta)
    Silverlight experience: Alternative ASP.NET version:

    Lot’s of content! I wanted to show a bit of Silverlight 3 but that was too much.

    You can download my code (*) here:

    As well as the slides (french):

    (*) The download include the asynchronous Database update as users edit the DataGrid.

    For those of you who are interested to hear about Silverlight 3 don’t worry you still have plenty of events coming!

    Read more...

  • The very first Silverlight 3 training in Montreal!

    Silverlight Montreal

    Be ready for the next version of Silverlight!

    I am so happy to announce that I will give a french Silverlight 3 training at the end of this month in Montreal, Qc.

    The Silverlight Tour has already been modified to include Silverlight 3 content. If you want to be ready for the next version of Silverlight, this is the place to be. This three-day workshop is going to teach the latest features of Silverlight as well as the complete Silverlight 2 stack.

  • When: April 27-29
  • Where: Montreal, Qc
  • Registration (Fr): http://www.runatserver.com/SilverlightTraining.aspx

  • The new features covered include:

    • Out of Browser Support
    • Pixel Shaders
    • Animation easing
    • Hardware Graphic Acceleration
    • Behaviours
    • Navigation Framework
    • Blend 3
    • Binding Improvements
    • Secure Web Services
    • Binary XML Transport
    • RIA Services Client Controls
    • Preview of RIA Services
    Silverlight Tour

     

    Read more...