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="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://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:
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:
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="https://schemas.microsoft.com/client/2007/deployment"
xmlns:x="https://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:
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:
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
Anonymous
July 11, 2009
Thanks for the info about silverlight 3 and short tutorial. I am very impressed by the example of Perspective 3D. George Namaste!Anonymous
July 11, 2009
I found the out - of browser experience very useful. Thanks a lotAnonymous
July 11, 2009
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.Anonymous
July 12, 2009
Thanks folks for all the kind words. -somasegarAnonymous
July 15, 2009
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.Anonymous
July 15, 2009
Good One and equally useful...I appreciate the entire portray and contents about SL3...Anonymous
July 15, 2009
The comment has been removedAnonymous
July 16, 2009
The comment has been removedAnonymous
July 16, 2009
The comment has been removedAnonymous
July 17, 2009
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!Anonymous
July 19, 2009
@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.Anonymous
July 21, 2009
In accord with Tom and Ed. THE LIGHT IS SHINING. An opportunity to rectify past mis-steps is here for some.Anonymous
July 22, 2009
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.Anonymous
July 23, 2009
The comment has been removedAnonymous
July 24, 2009
@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.Anonymous
July 31, 2009
The comment has been removedAnonymous
July 31, 2009
The comment has been removedAnonymous
August 19, 2009
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>Anonymous
September 06, 2009
When I run this example, I get this Error: Message: Unknown attribute ShortName on element Deployment.OutOfBrowserSettingsAnonymous
September 08, 2009
Hidan, you're right. The post is now updated with the correct settings. Polita Paulus Developer Division MicrosoftAnonymous
September 08, 2009
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, MarcelAnonymous
September 08, 2009
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 MicrosoftAnonymous
September 10, 2009
Hi Polita
- 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
- I have been waiting a long time for a tool like Silverlight The first version of Silverlight was released on 2007-09-05. Thanks,
Anonymous
September 14, 2009
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 CorporationAnonymous
September 16, 2009
Hi Jon, Will try that, thanks for the tip! MarcelAnonymous
November 20, 2009
Very good article. I loved the information on the Silverlight 3.Anonymous
January 06, 2010
The comment has been removedAnonymous
January 07, 2010
The comment has been removed