April 2009 - Posts

Silverlight Tour Paris

The Silverlight Tour is coming back to Paris, France and for the first time with Silverlight 3 content!!

  • When: June 02-04
  • Where: Paris, France
  • Registration (Fr): http://www.octo.com/com/com_formation-silverlight.html

    If you are looking for 3 days of intensive Silverlight training in French this is your chance to learn it from soup to nuts!

  • Posted by pluginbaby | 1 comment(s)
    Filed under:

    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/

    Posted by pluginbaby | 3 comment(s)
    Filed under: , ,

    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.

    This chapter is now available on ebook and you can download it for free:

    Silverlight 3 new features ebook

     

    Technorati Tags:
    Posted by pluginbaby | 2 comment(s)
    Filed under:

    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();

    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:

    The source code of the demo showed by Scott Guthrie during the Keynote at MIX09 is available thanks to Henry Hahn. This impressive demo shows several Silverlight 3 new graphics features : Pixel Shader effects, Perspective 3d and the new Easing Functions.

    BouncingPlane Silverlight 3 demo

    BouncingPlane Silverlight 3 demo

    Download the code (Silverlight 3 beta needed)

     

    Technorati Tags:

    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:

    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).

    Posted by pluginbaby | 4 comment(s)
    Filed under:

    Code Camp Montreal
    The next Code Camp Montreal will take place on Saturday, May 30th 2009.

    Local speakers interested in presenting (French or English)? submit your sessions!
    http://www.codecampmontreal.com/Appel%20aux%20conf%c3%a9renciers.ashx

    I’ll be there to talk about Silverlight 3, if you too come and say hello!

    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/

    Posted by pluginbaby | 3 comment(s)
    Filed under: ,
    More Posts Next page »