Skip to main content

Getting started with Silverlight

In my work with the Cornball as my first Silverlight project I have had to solve a huge amount of problems which turned out to be quite a high threshold before I could get started with the development for real. Not the least in the difference between a WinForms application and a Silverlight application. In this post I will mention a couple of the things i encountered.

Splash Screen/Preloader
The builtin preloader in Silverlight does not look too bad, but it is definately more fun to create a custom preloader to fit with the rest of the application. I choose to create a very simple but functional preloader. First I had to include all the images as resources in the application for the preloader to actually have a purpose. By adding the images to the project and select Resource as Build Action the images will be included in the XAP-file. To show the images in the application, something of the following will do.

XAML
<Image Name="Card" Source="/SilverlightApplication1;component/Images/Image.png">

Code
Card.Source = new BitmapImage(new Uri("/SilverlightApplication1;component/Images/Image.png", UriKind.Relative));

When the Silverlight application takes more than 500 milliseconds to load the preloader is shown. To create your own preloader three things are required. A XAML-file, some JavaScript and a couple of parameters in the object tag on the html page that displays the Silverlight application. Since the preloader should load fast and run before the application these files should not be place inside the Silverlight application. It is also not possible to execute C# code since the preloader is executed in the client browser.

SplashScreen.xaml
<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid.Background>
        <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
            <GradientStop Color="#FF00AA00" Offset="0.0" />
            <GradientStop Color="#FF006000" Offset="1.0" />
        </RadialGradientBrush>
    </Grid.Background>
    <Border BorderBrush="#AA003000" BorderThickness="1" Height="10" Width="200">
        <Rectangle Fill="#AA003000">
            <Rectangle.RenderTransform>
                <TransformGroup>
                    <ScaleTransform x:Name="ProgressBar" ScaleX="0" ScaleY="1"/>
                </TransformGroup>
            </Rectangle.RenderTransform>
        </Rectangle>
    </Border>
</Grid>

SplashScreen.js
function onSourceDownloadProgressChanged(sender, args)
{
    sender.findName("ProgressBar").ScaleX = args.progress + 0.01;
}

index.html
<object type="application/x-silverlight-2" data="data:application/x-silverlight-2,">
    <param name="source" value="Cornball.xap" />
    <param name="onError" value="onSilverlightError" />
    <param name="minRuntimeVersion" value="3.0.40624.0" />
    <param name="splashScreenSource" value="SplashScreen.xaml"/>
    <param name="onSourceDownloadProgressChanged" value="onSourceDownloadProgressChanged" />
    <param name="autoUpgrade" value="true" />
    <a href="http://go.microsoft.com/fwlink/?LinkID=149156">
        <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" />
    </a>
</object>

BeginAnimation
The animation possibilities is something of the most appealing with Silverlight compared to the previous platforms the Cornball have been created for. It can get a bit tricky before you get a hang of it, but it gets a lot easier with an extension method for the FrameworkElement to start an animation. Thanks to Nick Kramer for this solution.

static class SilverlightHelpers
{
    public static void BeginAnimation(this FrameworkElement obj, DependencyProperty property, DoubleAnimation animation)
    {
        var storyboard = new Storyboard();
        storyboard.Children.Add(animation);
        Storyboard.SetTarget(storyboard, obj);
        Storyboard.SetTargetProperty(storyboard, new PropertyPath(property));
        storyboard.Begin();
    }
}

Usage is incredibly easy since every FrameworkElement now have a BeginAnimation method.

var a = new DoubleAnimation();
a.To = 200;
button.BeginAnimation(Canvas.LeftProperty, a);

Comments

Popular posts from this blog

LEAP Sweden - Identity & Access Management

Today was the third day of the Swedish Lead Enterprise Architect Program at Microsoft in Kista. It has been a day filled with sessions on security and identity with a kind of unavoidable focus on federated identities in the cloud. Overall it has been an awesome day with seminars from Henrik Nilsson , Barry O'Reilly and Sergio Molero among others. A lot of Microsoft technologies was mentioned, Forefront Identity Manager , Active Directory Federation Services 2.0 , Forefront Unified Access Gateway , Direct Access ,  Windows Identity Framework and of course  Azure Access Control Service . Microsoft really has a great suite of applications regarding Identity & Access Management. I just wish there was a project or two where I could utilize all of these amazing technologies. I have had a plan to add a login feature to the Cornball using federated identities, so that might happen in the near future. Besides, Björn Eriksen provided a tip for all of us thursty for e...

The Cornball goes to Brunch with Chaplin

Lately I've been working pretty hard on different projects but not really stumbling upon anything blogworthy. The most recent project is quite interesting though, a single page, touch friendly, web application using the latest and greatest technologies. We've ended up with using Brunch with Chaplin , which is a very neat way of setting up a Backbone based single page web project with Brunch and Chaplin . Aside from this, I have my own little project that has lived on for almost 15 years already, The Cornball . From being a plain Windows application written i C an Win32 API, it has been ported to .NET using WPF, and is currently a Silverlight application hosted on Windows Azure. I could not find a better time to reanimate this project and create a new web based version, touch friendly, super optimized, awesome in any way. So I did... So please follow my journey at Github . It's going to take a while, I assure you, but I already have some ground work done. Meanwhile,...

Using ASP.NET MVC with MEF

I wrote this post almost a year ago, but never published it for some reason. Anyway, here is a little MVC/MEF magic. By default a controller in MVC must have a parameterless constructor. When using MEF a good practice is to inject the services via constructor parameters. These two in combination obviously creates an issue where the following scenario will not work out of the box, since there is no parameterless constructor for  MVC  to use. Note that the PartCreationPolicy is set to NonShared since a new controller have to be initialized for each request. [Export] [PartCreationPolicy(CreationPolicy.NonShared)] public class HomeController : Controller {     private readonly IServiceClient _service;     [ImportingConstructor]     public HomeController(IServiceClient service)     {         _service = service;     }     public ActionResult Index()     {         ...