Archives

Archives / 2009 / April
  • MVP Silverlight!

    MVP Silverlight

    Back in march while at the MVP Summit I was thrilled when Scott Guthrie announced the addition of a Silverlight expertise in the Microsoft MVP program.

    Earlier this week I received an email saying that I am joining this new small group (6 MVPs for now), so I move from ASP.NET MVP to Silverlight MVP!!

    This is awesome because Silverlight has become my main focus since MVP Summit 2007 (the technology was called WPF/E then...) I made so many Silverlight presentations here in Montreal and I can feel the buzz growing, also because ASP.NET (my current expertise) is a large group and I think I can bring more impact and work closely with product team in the Silverlight field.

    To learn more on the Microsoft MVP Program:
    http://mvp.support.microsoft.com/

  • Silverlight – Get Color from Hex

    What if you want to get a Color from its hexa value (#FFBBCC88) ?

    Unfortunately Silverlight do not have the ColorTranslator class which allows you to do ColorTranslator.FromHtml("#FF1133") in ASP.NET.

    What we have is the Color.FromArgb() method which takes 4 parameters (alpha, red, blue and green channels as bytes).
    So here is a small method you could write:

    public static SolidColorBrush GetColorFromHexa(string hexaColor)
    {
        return new SolidColorBrush(
            Color.FromArgb(
                Convert.ToByte(hexaColor.Substring(1, 2), 16),
                Convert.ToByte(hexaColor.Substring(3, 2), 16),
                Convert.ToByte(hexaColor.Substring(5, 2), 16),
                Convert.ToByte(hexaColor.Substring(7, 2), 16)
            )
        );
    }

    Let’s say I want to set the main Canvas Background (LayoutRoot) from a TextBox (txtColorHexa):

    LayoutRoot.Background = GetColorFromHexa(txtColorHexa.Text);


    Now add the following Extension method:

    public static SolidColorBrush ToSolidColorBrush(this string hexaColor)
    {
        return GetColorFromHexa(hexaColor);
    }

    And you get this nice syntax:

    LayoutRoot.Background = txtColorHexa.Text.ToSolidColorBrush();
  • 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:
  • Prevent a Silverlight animation from running twice

    By default in Silverlight a user can launch the same animation several times, even if the animation is not finished. Side effects: the animation starts again and your code (if any) runs twice. Sometimes this can be annoying.

    Let’s say you have a button that starts a storyboard with animations and runs some code, nothing prevent the user from clicking several times on the button.

    Unfortunately there is no “isRunning” property on the Storyboard element, but you can implement a very easy workaround with the help of the Completed event and a boolean variable :

    public partial class Page : UserControl
    {
        bool isPlaying = false;
    
        public Page()
        {
            // Required to initialize variables
            InitializeComponent();
    
            Storyboard1.Completed += new EventHandler(Storyboard1_Completed);
        }
    
        void Storyboard1_Completed(object sender, EventArgs e)
        {
            isPlaying = false;
        }        
    
        private void btn_Click(object sender, RoutedEventArgs e)
        {
           if (!isPlaying)
           {
               isPlaying = true;
               Storyboard1.Begin();
    // more code here; } } }

    Note: for a simple example like this you could also disable the button while the animation is running.

    Before:

    After:

     

    Technorati Tags:
  • Empty iframe purpose in Silverlight html test page?

    As you may have noticed while creating a Silverlight project, the default html test page generated by Visual Studio 2008 contains the object tag + an empty invisible iframe with no id.

    <div id="silverlightControlHost">
        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" style="height:100%;width:100%;">
            <param name="source" value="ClientBin/App1.xap"/>
            <param name="onerror" value="onSilverlightError" />
            <param name="background" value="white" />
            <param name="minRuntimeVersion" value="2.0.31005.0" />
            <param name="autoUpgrade" value="true" />
            <a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;">
                 <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>
            </a>
        </object>
        <iframe style='visibility:hidden;height:0;width:0;border:0px'></iframe>
    </div>

    I have always wondered what is the purpose of this iframe ? 
    Got my answer today so I share it:

    “The iframe element is for cross-browser compatibility. The presence of the iframe prevents the Safari browser from caching the page. Safari caching prevents the Silverlight plug-in from reloading when the user navigates back to a previously-visited Silverlight page. For more information, see the Safari Developer FAQ.”

    Good to know (and stop removing that empty iframe anymore).

  • My blog in French, or Spanish, or Chinese, or…?

    Use the Microsoft Translator Widget to translate your web site!

    Translator widget

    Microsoft Translator team has announced a translator widget for web pages at MIX09 (Surprisingly this is not a Windows Live Something…). The Microsoft Translator web page widget allows you to bring real-time, in-place translations to your web site. It uses the Microsoft Translator AJAX API, which was also announced at MIX09, and is a small, customizable widget that you can place on your web page and it helps you instantly makes the page available in multiple languages. Users can hover over the translation to see the original content!

    I have put the widget on this blog and it seems to be working pretty well! The only drawback is the translation quality… far from perfect, but on this side there will always be something to improve!

    The widget is currently in private Technology Preview and will be available at:
    http://www.microsofttranslator.com/Widget/

  • 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!

  • 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