Silverlight 3


Yesterday, I announced the availability of Silverlight 3 and the Release Candidate of Expression Blend. 


 


Some of Silverlight 3’s new features and improvements include support for running Silverlight applications out of the browser, H.264/AAC/MP4 media playback, GPU support, pixel APIs including pixel shaders, perspective 3D, local messaging between Silverlight applications, an improved business object framework, SEO support, and better text quality.  Combined with continued innovation in Visual Studio and Expression Blend, Silverlight 3 empowers .NET developers to create cutting-edge Rich Internet Applications and media experiences. 


 


Today, I’d like to walk through a few of these features in a little more depth.


 


Perspective 3D


Perspective 3D support in Silverlight allows developers to use 2D elements to create a 3D experience.  Perspective 3D is also a great way to better utilize screen real estate.  Let’s look at a simple image viewing application to demonstrate how you can use perspective 3D for both improved visual appearance and better utilization of the screen.  Rather than show just one image at a time, we’ll show one primary image in full resolution and a couple more on either side in a perspective view.


 


To give the image a 3D projection, set the Projection property on the Image to a PlaneProjection.  The PlaneProjection exposes a set of properties that allow the element to be treated as if it’s in 3D space.  Set the RotationY property to 70 to rotate the object 70 degrees along the Y-Axis, or the vertical axis.  This has the effect of making the element appear as if it’s rotated nearly perpendicular to the screen.  Next, we want to move this element back and to the right to make room for other images.  To do this, we set the GlobalOffsetX and GlobalOffsetZ properties. Input and events work as expected on the perspective 3D element, so a perspective 3D DataGrid or TextBox is fully functionally when there is a perspective 3D transform applied.   To finish up the application, we’ll go ahead and add the other 4 images and apply slightly different perspective transforms.  The images to the left and right have a different GlobalOffsetX to move them to the left or right.


 


<UserControl x:Class=”P3DSample.MainPage”


  xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation


  xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml“>


  <Grid x:Name=”LayoutRoot” Background=”Black”>


 


    <Image Source=”Image01.jpg” Stretch=”None”>


      <Image.Projection>


        <PlaneProjection RotationY=”-70″ GlobalOffsetX=”-300″ GlobalOffsetZ=”-100″/>


      </Image.Projection>


    </Image>


    <Image Source=”Image02.jpg” Stretch=”None”>


      <Image.Projection>


        <PlaneProjection RotationY=”-70″ GlobalOffsetX=”-225″ GlobalOffsetZ=”-100″/>


      </Image.Projection>


    </Image>


    <Image Source=”Image03.jpg” Stretch=”None”>


      <Image.Projection>


        <PlaneProjection RotationY=”70″ GlobalOffsetX=”300″ GlobalOffsetZ=”-100″/>


      </Image.Projection>


    </Image>


    <Image Source=”Image04.jpg” Stretch=”None”>


      <Image.Projection>


        <PlaneProjection RotationY=”70″ GlobalOffsetX=”225″ GlobalOffsetZ=”-100″/>


      </Image.Projection>


    </Image>


 


    <Image Source=”Image00.jpg” Stretch=”None” />


 


  </Grid>


</UserControl>


 


Here is the final result:


 



Our image app 


 


Databinding Improvements


ElementName binding allows developers to bind one UIElement to another in XAML instead of having to write event handlers.  In Silverlight 3, there’s a new property called ElementName on the Binding class.  When ElementName is set, the binding engine uses the specified element as the source for this binding.  The Path property refers to a property on the source UIElement to bind to.  If ElementName points to a DependencyProperty the binding engine listens to the DependencyProperty changes and updates the binding accordingly. Here’s a XAML segment that shows a Slider controlling the opacity of our center image using ElementName binding:


 


<Grid x:Name=”LayoutRoot” Background=”Black”>


    <Grid.RowDefinitions>


        <RowDefinition/>


        <RowDefinition Height=”50″/>


    </Grid.RowDefinitions>


    <Image Source=”Image01.jpg” Stretch=”None” >


        <Image.Projection>


            <PlaneProjection RotationY=”-70″ GlobalOffsetX=”-300″ GlobalOffsetZ=”-100″/>


        </Image.Projection>


    </Image>


    <Image Source=”Image02.jpg” Stretch=”None”>


        <Image.Projection>


            <PlaneProjection RotationY=”-70″ GlobalOffsetX=”-225″ GlobalOffsetZ=”-100″/>


        </Image.Projection>


    </Image>


    <Image Source=”Image03.jpg” Stretch=”None”>


        <Image.Projection>


            <PlaneProjection RotationY=”70″ GlobalOffsetX=”300″ GlobalOffsetZ=”-100″/>


        </Image.Projection>


    </Image>


    <Image Source=”Image04.jpg” Stretch=”None”>


        <Image.Projection>


            <PlaneProjection RotationY=”70″ GlobalOffsetX=”225″ GlobalOffsetZ=”-100″/>


        </Image.Projection>


    </Image>


 


    <Image Source=”Image00.jpg” Stretch=”None” Opacity=”{Binding ElementName=slider, Path=Value}” />


 


    <Slider x:Name=”slider” Grid.Row=”1″ Width=”200″ Maximum=”1″ Minimum=”0″ />


</Grid>


 


The above XAML shows the following UI.  Moving the slider changes the opacity of the Blue Dragon image from transparent to completely opaque:


 


 



Element Databinding 


 



Out of Browser Support


The Out of Browser support in Silverlight 3 enables developers to create Silverlight applications which can run both inside and outside of the browser.  To enable our application to run out of the browser, edit the application’s AppManifest.xml file. In Visual Studio, this file is located under the Properties node in the Solution explorer.  In AppManifest.xml, add the following:


 


<Deployment xmlns=”http://schemas.microsoft.com/client/2007/deployment”


        xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml” > 


  <Deployment.Parts>


  </Deployment.Parts>


 


  <Deployment.OutOfBrowserSettings>


    <OutOfBrowserSettings ShortName=”My Silverlight Application” EnableGPUAcceleration=”False”>


      <OutOfBrowserSettings.WindowSettings>


        <WindowSettings Title=”My Silverlight Application” />


      </OutOfBrowserSettings.WindowSettings>


      <OutOfBrowserSettings.Blurb>Description of my app</OutOfBrowserSettings.Blurb>


      <OutOfBrowserSettings.Icons />


    </OutOfBrowserSettings>


  </Deployment.OutOfBrowserSettings>


</Deployment>


 


When you run the application, you’ll notice an addition to the right-click context menu that reads “Install My Silverlight Application onto this computer…”  In the image below, you can see the context menu in the lower left corner:


 



Install as Desktop App 


 


When you click this menu item, you’ll get an option to install this application to your machine.  The out of browser application will look like this:


 



 Out of Browser app


 


You can now close the in browser version of the application and use the out of browser version.  If you open your start menu, you’ll find a shortcut to launch the application in Start->Programs.  You can launch the application even when you are not connected to a network.


 


These are just some of the new features in Silverlight 3.  You can find even more information here.  


 


Namaste!

Comments (28)

  1. Thanks for the info about silverlight 3 and short tutorial. I am very impressed by the example of Perspective 3D.

    George

    Namaste!

  2. Phani Kiran Challa says:

    I found the out – of browser  experience very useful. Thanks a lot

  3. Deepak says:

    It is great to see Silverlight maturing by every release. Silverlight 3 definitely makes it more real-world ready and the feature set is most welcome. Congratulations to Silverlight 3 team for getting this out so soon.

  4. S. Somasegar says:

    Thanks folks for all the kind words.

    -somasegar

  5. Very simple and smart tutorial on perspective 3D ! ..and yes,yet another great product from MS 🙂 , People in community are so excited, already started discussions on wishlist of SL4.

  6. Paresh says:

    Good One and equally useful…I appreciate the entire portray and contents about SL3…

  7. Silverlight3 says:

    Silverlight3 benefits:

    Read how Silverlight’s Rich Media Platform Delivers Powerful Results for Fans of New Cricket League (IPL) http://tinyurl.com/mwl6db

    See how TDK-Lambda uses Silverlight’s cross-browser plug-in to enable LOB. http://tinyurl.com/nh7b5a

    See how Silverlight’s Cross-Platform Plug-In Powers Rich Internet Applications for Scientists at National Instruments   http://tinyurl.com/n5etr7

    Read how Continental Airlines modernizes call center application with Silverlight Technology  http://tinyurl.com/ng9b3b

  8. davidlgordon@hotmail.com says:

    Too bad Silverlight 3 doesn’t support datasets that are returned from the business layers. All this eye candy is worthless and takes too much time to develop to recoup the cost for the business it will draw.  

    Microsoft told us for years to invest development dollars in Web Services and now it doesn’t support a basic unit of datasets and requires us to spend more money on rewriting the business layer.

    THE LIGHT IS GOING OUT.

    If this Flash wannabe doesn’t support our business dollars investment, then it is basically useless to business. The HCI people should just stay with FLASH until Microsoft figures out it place in business.

  9. BradA says:

    David – you have great point.. I totally agree that Silverlight can’t be all eye candy… the vast majority of business applications require much more.  I’d invite you to check out .NET RIA Services… It is targeted at exactly the sort of apps you are talking about.   I am doing a blog post series on it right now and I expect to cover using DataSets with RIA Services very soon.

    http://blogs.msdn.com/brada

    and feel free to drop me a line at brada@microsoft.com

  10. Tom says:

    Datasets are bad for performance and scalability anyways. It is best to avoid Datasets. Using custom business objects is a far better way to build real business applications giving better flexibility, scalability and performance.

    The main thing behind Silverlight is to keep the runtime small. Adding Datasets directly to Silverlight bloats it up. It’s best that its not included – good decision by Microsoft!

  11. Ed says:

    @davidlgordon

    I’m one of the few that think it’s a good think Silverlight does not support datasets. It’s just too clunky if you have to pass datasets to and from the server. Remember Silverlight is a client-side app for web.

    However, I’m glad Silverlight 3.0 introduces binary serialization. About time.

  12. Sam says:

    In accord with Tom and Ed. THE LIGHT IS SHINING. An opportunity to rectify past mis-steps is here for some.

  13. MCP.NET says:

    Maybe "Microsoft told us for years to invest development dollars in Web Services" but they don’t tell you to use DATASETs in WS. Datasets are good for quick and dirty work at home but not for enterprise level apps. On Microsoft site you can find comparison of datasets and other techonlogies and Microsoft never hided that.

    Sorry that you picked the easiest way to do things: just click and everything done.

    Start doing real WORK not begginers steps.  

  14. Ed says:

    Datasets are not ‘bad’ for performance and scalability.  I have applications, including web services (and enterprise apps) that prove that very wrong.  And they are WAY more flexible than business objects.  They serialize well (they are NOT clunky to pass from the server), and changing the returned columns requires less updating of code.

    We will probably end up using RIA services, but that is not the only way to do things and maybe not the best in the long run.

    Haven’t tried this but ComponentOne.com does have a Silverlight component that allows you to pass DataSets directly.  And there is a project on Codeplex as well.

  15. Simplicity says:

    @Ed

    It depends on the traffic volume on your servers and number of users. If you have a small user base with low-medium volume it doesn’t matter. As the servers get hit with more n more users/requests, your application/servers will suffer in performance and you will face scalability issues as compared to using Business objects that are light weight and easier to customize.

    No serious enterprise web applications use DataSets. First of all try simulations with number of users, traffic, etc on your visual studio team system and see the difference in performance yourself before making statements.

  16. Concerned User says:

    Soma,

    What is Microsoft doing launching video websites using Flash?

    http://www.pcpro.co.uk/blogs/2009/07/30/silverlight-not-so-flash-for-microsoft/

    Aren’t you guys suppose to promote Silverlight! Microsoft has to do MUCH more if it wants to succeed.

  17. @concerned user

    I talked with Erik Jorgensen, Corporate Vice President of MSN, and he told me that MSN is deeply committed to Silverlight. They’ve demonstrated by its bet on Silverlight for many of its high profile sites and applications such as the NBC Summer Olympics, MSN Toolbar, MSN Money Advanced Portfolio Manager, several MSN Entertainment sites, and more. With the exciting differentiation of Silverlight’s Smooth Streaming and true HD-video capabilities, MSN Video worldwide is already on path to move to Microsoft Silverlight in the coming months.

    Additionally, there are over 300 internal Microsoft products and Websites now using Silverlight, including Office 14, Office Online, MSN, Windows Live, SharePoint/MOSS, Visio and Virtual Earth.

    Hope this helps.

    -Brian Goldfarb

    Director, Product Management

    Web and UX Platforms

    Microsoft

  18. billedwards says:

    In accord with Tom and Ed. THE LIGHT IS SHINING. An opportunity to rectify past mis-steps is here for some.

    <ahref="http://www.advancedregistryrepair.com/regcure/regcure_vista_registry_cleaner.html">registry cleaners</a>

  19. Hidan says:

    When I run this example, I get this Error:

    Message: Unknown attribute ShortName on element Deployment.OutOfBrowserSettings

  20. phuff says:

    Hidan, you’re right.  The post is now updated with the correct settings.

    Polita Paulus

    Developer Division

    Microsoft

  21. Marcel says:

    I have reviewed the information included in the Silverlight SDK and my first impression is positive. I am very surprised that Microsoft didn’t released Silverlight before… I would appreciate if you can give me a tip in what tools are you using for producing those slideshows that are displayed with Silverlight.

    Thanks,

    Marcel

  22. phuff says:

    Marcel, this last July we released the third version of Silverlight.

    Can you clarify what you mean by "slideshow"?  The images in this post are all of the Silverlight app running in the browser.  In this case, the browser is IE7. The application was developed using the Beta 1 version of Visual Studio 2010.  Does that answer your question?

    Polita Paulus

    Developer Division

    Microsoft

  23. Marcel says:

    Hi Polita

    1) I would like to know what tools do you use to produce the videos that are displayed in Expression Web Showcase.  

    http://www.microsoft.com/video/en/us/details/ce646dc7-e0bd-45e3-b01b-a8406c1aa61f

    2) I have been waiting a long time for a tool like Silverlight

    The first version of Silverlight was released on

    2007-09-05.

    Thanks,

  24. Jon Harris says:

    Hi Marcel

    The videos on the Expression Web Showcase were produced with Camtasia Studio. (http://www.techsmith.com/camtasia.asp)

    In fact we used Camtasia for all the Expression product videos. As you would expect TechSmith have a 30 day trial if you’d like to try it out.

    I hope this helps.

    Jon Harris

    Senior Product Manager

    Expression Blend, SketchFlow and Design

    Microsoft Corporation

  25. Marcel says:

    Hi Jon,

    Will try that, thanks for the tip!

    Marcel

  26. Very good article. I loved the information on the Silverlight 3.

  27. pkvenu says:

    Hi,

      I just had a small question not related to this post but general in silverlight 3. I know we could play flash file in silverlight by embedding them over a html place holder. What i would like to know is that is there any way we could determine the end of the playing flash file and at the end invoke a c# method. If yes can you show me some samples?

    Regards,

    Pawan Venugopal

  28. jstegman says:

    Hi Pawan,

    The best approach for this would be to have the Flash file (SWF) notify the containing web browser when it is finished and then have the web browser invoke a Silverlight method.   On the Flash side, you can use the ActionScript ExternalInterface APIs to have your Flash file call a JavaScript method on the hosting web page (see http://kb2.adobe.com/cps/156/tn_15683.html for an example).  In that JavaScript method you can then call into a “Scriptable” C# method in your Silverlight application.  You can find a sample for doing this here: http://msdn.microsoft.com/en-us/library/cc645085(VS.95).aspx.

    Joe