Alex Golesh's Blog About Silverlight Development

Silverlight 3 Quick Tip #5: Assembly Caching

Always wanted to have smaller XAP files and take control of external assemblies, that are not part of core runtime? Using Silverlight toolkit and want to cache this assemblies on client machines to keep the resulting XAP smaller? Well, if so new feature in Silverlight 3 Beta will help you.

To enable assembly caching, in Silverlight project properties check “Reduce XAP size” checkbox:

The effect are following: In standard non-checked compilation the XAP file has all the external assemblies being referenced from the application:

The AppManifest.xaml looks like follows:

<Deployment xmlns=http://schemas.microsoft.com/client/2007/deployment 
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            entrypointassembly="GpuAccelerationDemo" 
            entrypointtype="GpuAccelerationDemo.App" 
            runtimeversion="3.0.40307.0"> 
    <Deployment.Parts> 
        <AssemblyPart x:Name="GpuAccelerationDemo" 
            Source="GpuAccelerationDemo.dll" /> 
        <AssemblyPart x:Name="System.ComponentModel.DataAnnotations"
            Source="System.ComponentModel.DataAnnotations.dll" /> 
        <AssemblyPart x:Name="System.ComponentModel"
            Source="System.ComponentModel.dll" /> 
        <AssemblyPart x:Name="System.Windows.Ria"
            Source="System.Windows.Ria.dll" /> 
    </Deployment.Parts> 
</Deployment>

The XAP contents is like follows:

And the file size is like follows:

To compare, when this option is selected, the AppManifest.xaml will have external references to assemblies, which will be downloaded for the the first time and cached:

<Deployment xmlns="http://schemas.microsoft.com/client/2007/deployment" 
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
            EntryPointAssembly="GpuAccelerationDemo" 
            EntryPointType="GpuAccelerationDemo.App" 
            RuntimeVersion="3.0.40307.0">
  <Deployment.Parts>
    <AssemblyPart x:Name="GpuAccelerationDemo" Source="GpuAccelerationDemo.dll" />
    <AssemblyPart x:Name="System.Windows.Ria" Source="System.Windows.Ria.dll" />
  </Deployment.Parts>
  <Deployment.ExternalParts>
    <ExtensionPart Source="http://go.microsoft.com/fwlink/?LinkID=142565" />
    <ExtensionPart Source="http://go.microsoft.com/fwlink/?LinkID=141727" />
  </Deployment.ExternalParts>
</Deployment>

The XAP contents will have less included assemblies:

And as a result, the XAP size will be smaller:

Enjoy,

Alex

Silverlight 3 Quick Tip #4: Hardware Acceleration

Silverlight 3 Beta 1 bring us new and highly expected future – hardware acceleration. This short article will answer simple questions is how it could be enabled/used, where it is supported and when should be used.

Well, the first answer is relatively simple. To enable hardware acceleration one need to do following:

In plugin settings enable GPU Acceleration:

<param name="EnableGPUAcceleration" value="true" />

Next, set the “CacheMode” property of desired element to to “BitmapCache”:

<Canvas.CacheMode>
    <BitmapCache/>
</Canvas.CacheMode>

or

<StackPanel CacheMode="BitmapCache"/>

Now desired elements will be cached and will use hardware acceleration.

Now the support issue. The hardware acceleration is supported as following:

• Windows: Browser & Fullscreen (on machines with DirectX 9.0c)
• Mac: Fullscreen only

The last question left is when this feature should be used? The most impulsive answer I heard here is “everywhere”. But in real word the picture is slightly different.

Only 3 properties could be hardware accelerated (at least in current Beta stage): Transforms, Rectangular Clipping and Blending. This means, that if your application doesn’t use those properties you will not benefit from this feature. If so, why not set the CacheMode on topmost element? The answer is simple – this will introduce more overhead to the rendering system which will try to calculate what should be cached and what not. Also, rendering mechanism uses unmanaged intermediate surfaces while rendering hardware accelerated elements and they could be pretty expensive especially if not really used. The best practice from here is to set it only on the specific “leaf-most” element which will be hardware accelerated. Another point here – use it only if there is real user-detectable impact.

Source for simple application which uses this feature is here.

Enjoy,

Alex

Silverlight 3 Quick Tip #3: Creating custom easing for Silverlight animations

This time I’ll show how to use new easing functions for animations. In Silverlight 3 we could apply one of existing easing functions to our animation (storyboard) or create our own.

First, let’s apply existing easing function.

On my sample page I have a bunch of buttons to control UI, a stack panel with some path that looks like a spring and a ball attached to it. Also I created a storyboard to animate the Width property:

<StackPanel x:Name="LayoutRoot" Background="LightGray">

    <StackPanel.Resources>

        <BeginStoryboard x:Name="sb1">

            <Storyboard >

                <DoubleAnimation x:Name="springAnim" RepeatBehavior="Forever" AutoReverse="True" Duration="0:0:3" 

                             From="50" To="300" Storyboard.TargetName="spring" Storyboard.TargetProperty="Width"/>

            </Storyboard>

        </BeginStoryboard>

    </StackPanel.Resources>

    <StackPanel Orientation="Horizontal">

        <Button x:Name="btnAnimate" Content="No Ease" Click="btnAnimate_Click_1"  Width="100" Height="25" Margin="10"/>

        <Button x:Name="btnAnimate1" Content="Predefined Ease" Click="btnAnimate_Click" Width="100" Height="25" Margin="10"/>

        <Button x:Name="btnAnimate2" Content="Custom Ease" Click="btnAnimate2_Click"  Width="100" Height="25" Margin="10"/>

    </StackPanel>

    <StackPanel Orientation="Horizontal">

        <Path x:Name="spring" Width="100" Fill="Transparent" Stretch="Fill" Stroke="Black" StrokeThickness="2" Data="M49,306 L75,266 L91.5,303.5 L116.70348,265.5 L132.89345,300.56708 L151.9158,268.95731 L165.57288,297.60367 L175.32793,282.78659 L183.58783,281.79877" RenderTransformOrigin="0.5,0" VerticalAlignment="Center" HorizontalAlignment="Left" >

            <Path.RenderTransform>

                <TransformGroup>

                    <ScaleTransform/>

                </TransformGroup>

            </Path.RenderTransform>

        </Path>

        <Ellipse x:Name="ball" Width="30" Height="30" Fill="Red" HorizontalAlignment="Left" VerticalAlignment="Center"/>

    </StackPanel>

</StackPanel>

Now let’s see the the code behind those buttons…

No ease is simple – just assign NULL to easing function property of the storyboard:

private void btnAnimate_Click_1(object sender, RoutedEventArgs e)

{

    springAnim.EasingFunction = null;

}

Using existing easing is also very simple task – just select one on existing ease function in System.Windows.Media.Animiation namespace, tweak the function parameters (optional) and assign it as EasingFunction of the storyboard:

private void btnAnimate_Click(object sender, RoutedEventArgs e)

{

  ElasticEase ease = new ElasticEase();

  ease.EasingMode = EasingMode.EaseOut;

  ease.Springiness = 5;

  ease.Oscillations = 10;

  springAnim.EasingFunction = ease;

}

Now the interesting one – I’ll create my simple easing function. To do it, I have to create a new class, which derives from EasingFunctionBase class (the base class in from System.Windows.Media.Animiation namespace):

public class CustomSquareRootEase : EasingFunctionBase

{

  public CustomSquareRootEase()

    : base()

  {

  }

  protected override double EaseInCore(double normalizedTime)

  {

    return Math.Sqrt(normalizedTime);

  }

}

My math was very simple, but still not standard easing. Now the usage of this one is exactly like any other existing easing function:

private void btnAnimate2_Click(object sender, RoutedEventArgs e)

{

 springAnim.EasingFunction = new CustomSquareRootEase();

}

Sample code is here.

Stay tuned to more tips and enjoy,

Alex

Silverlight 3 Quick Tip #2: How to prepare your Silverlight 3 application offline

Today I’ll show probably one of most expected features – taking Silverlight application offline.

To do it all you need to do is to add new section to AppManifest.xml. The section should be like following example:

<Deployment.ApplicationIdentity>

   <ApplicationIdentity ShortName="Silverlight Offline Demo" Title="Silverlight Offline Application Demo">

     <ApplicationIdentity.Blurb>This is sample application to show Silverlight 3 offline support. Created by Alex Golesh, 28 Feb 2009</ApplicationIdentity.Blurb>

     <ApplicationIdentity.Icons>

       <Icon Size="16x16">Icons/016x016.png</Icon>

       <Icon Size="32x32">Icons/032x032.png</Icon>

       <Icon Size="48x48">Icons/048x048.png</Icon>

       <Icon Size="128x128">Icons/128x128.png</Icon>

     </ApplicationIdentity.Icons>

   </ApplicationIdentity>

 </Deployment.ApplicationIdentity>

The icons section is optional – the runtime has standard icons in case you will not provide them; but if you decided to provide them, make sure your icons will be compiled as “Content” files.

No sources this time :)

Stay tuned to more tips and enjoy,

Alex

Silverlight 3 Quick Tip #1: How to use WritableBitmap

eWith this post I’m starting the series of Quick Tips post, this time for Silverlight 3.

Today I’ll show how to use WritableBitmap class to paint with content of any Visual element. Let’s start – I created very simple UI with UserControl inside a stack panels and bunch of buttons to control my sample logic

By pressing “Paint control” button I’d like to fill the image in  the cell with “Control Image” caption with the picture of the control from the content control in the cell with “Control Instance”. The code is actually very simple:

WriteableBitmap bitmap = new WriteableBitmap(350, 150, PixelFormats.Pbgra32);

bitmap.Render(contentPlaceholder.Content as UIElement, (contentPlaceholder.Content as UIElement).RenderTransform);

BitmapSource source = bitmap;

imgControlDrawing.Source = source;

Sources as usual – attached here.

Stay tuned to more tips and enjoy,

Alex

What’s new in Silverlight 3 Beta 1?

As just announced at MIX09 keynotes, new version of Silverlight will hit our machines – this time it will be Silverlight 3 Beta 1.

Here is the short list of what’s new in there:

Go offline with your application: Silverlight 3 provides all the features you need to store your application on your users machine, and then work against their data in the your isolated cache or under their MyDocuments. Your application can ask the user if they want to add a link to your application on their desktop or start menu. In addition, you can check network status to find out when to update.

Empower creative professionals: Silverlight 3 has new features to make the next generation web visuals including pixel shader effects such as blur and dropshadow; Perspective 3D graphics; Bitmap API for drawing to pixels; and customizable easing for animation

Richest controls frameworks: Silverlight 3 has built in support for validation and error UI. We’ve added support for multiple selection in listbox controls; and for a file save dialog to make it easier to write files. We’ve also added a set of features for data validation so you can automatically catch incorrect input and warn the user with built in validation controls.

Theme your application: Silverlight 3 now allows you to completely theme your application by applying styles and changing them at runtime; you can also cascade your styles by basing them on each other.

Enhanced Control skinning: with the addition of external resource dictionaries its now much easier to take your styles and control skins and share them between different applications. For instance you can build a common set of controls and keep them all external from your application, making skinning much easier.

Create responsibly: Silverlight 3 are the first browser plug-in to provide access to all system colors – this allow partially sighted people to make changes such as high contrast color schemes for readability using familiar operating system controls.

Quicker application download: Silverlight 3 now caches commonly used parts of the Silverlight framework such as chart controls the first time they are used. Silverlight 3 also allows you to ZIP up your font files; and make use of the local fonts on the users machine to avoid a download.

Improved performance: Silverlight 3 allows you to cache parts of your scene to a bitmap to improve rendering performance; Silverlight 3 also enhanced deepzoom to work with 1000s of elements; added support to use the GPU to draw to the screen; and Silverlight 3 allows you to set how text renders so that it can animate much more rapidly. Silverlight 3 also now supports binary XML which allows compression of data from the server to vastly enhance data transfer.

Richest Media: H.264 and RAW support allows the best codecs on any platform. You can now build your own video or audio code eg. create a sound generator or custom alpha video.

Please note that the beta will be a developer only release with no Go-Live license.

Download links are in this post.

Stay tuned to more hot Silverlight 3 news.

Enjoy,

Alex

Silverlight 3 Beta 1 available

Mix09 keynotes just around the corner (3 more hours), but MS Downloads center already has a links to Silverlight 3 Beta build and Ria Services (former Alexandria).

• Microsoft .NET RIA Services March '09 Preview (4.1 MB):  The .NET RIA Services is an framework that provides a pattern to write application logic that runs on the mid-tier and controls access to data for queries, changes and custom operations.
• Microsoft Silverlight 3 SDK Beta 1 (9.6 MB):  The Microsoft® Silverlight™ 3 Software Development Kit provides libraries and tools for developing Silverlight applications.
• Microsoft Silverlight 3 Tools Beta 1 for Visual Studio 2008 SP1 (31.3 MB): Add-on for Visual Studio 2008 SP1 for developing Silverlight 3 applications

Enjoy,

Alex

MIX09 – Day 0

Today I attended to MIX09 workshops day. Unfortunately I could make to the morning session and get for 2nd workshop only but I believe I choose the best one. I was at Jaime’s Rodriguez & Co. “Hiking Mt Avalon”. Nice session: many cool demos, best practices, tips and tricks!!! For me – MIX09 started the best way it could!

Waiting for tomorrow – the official first day of the conference and the Keynotes!!!

More updates to come!

Alex

Teaser

Something BIG is coming… I’m flying this weekend to attend MIX09 in Las Vegas, NV, USA and promise to post updates and news from there.

Cool samples, “how-to’s” and “Quick Tips” will be posted here at the moment I’ll be able to post them :)

Come back next week to get the full details.

Stay tuned,

Alex