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!