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

Programming AD with C#.NET – part 4

Our transition to the  System.DirectoryServices.Protocols  has in the whole gone very smooth, but there have been some issues with one environment that contains subdomains. Most things are working fine, but writing to a subdomain does not work in the same way as it did before. What is generally bad with the  System.DirectoryServices.Protocols is the documentation, which is practically non-existent. But most things can  be figured out anyway since most classes just are wrappers for the wldap32.dll, which in turn is way better documented. I would like to have as little bindings to a specific server as possible but still be able to access the domain. In the  LdapConnection  it is possible to set the identifier to null and use the executing computer as a starting point to find a domain controller. But sometimes I must know that I am using a Global Catalog, and with more and more RODC in the environment I sometimes must know that I am working against a writeable domain controller.

jQuery file upload with Bootstrap progress bar

Performing an asynchronous file upload from the browser is a common problem with almost as many solutions as there are developers. The following solution is the best fit for my needs, and also works well with most popular browsers. Backwards compatibility is not an issue in this case which is great, because I can use the new technologies as they are supposed to be used. Everything is put together in JSFiddle for a working example . I will continue to explain the parts below... First, the input field needs to be styled as a button. The form tag is only present for us to be able to reset the file input field later on. <form>     <span class="fileUpload btn btn-default">         <span class="glyphicon glyphicon-upload"></span> Upload file         <input type="file" id="uploadFile" />     </span> </form> .fileUpload { position: relative; overflow: hidden; } .fileUpload input { position: a

Google+ finally for everyone!

There have been a lot of whining on Google from their Apps-users since the launch of  Google+  for everyone with a regular Google-account. The Apps-users have not been able to use  Google+ , until now! (actually  october 27 ) As usual I am impressed with most of the things Google accomplishes, but now when all of their services have gotten a visual and functional touchup I am getting really impressed. As someone at an early stage pointed out it is really sweet of Google to play naive and let me fill in my profile information when I create my profile (as if Google did not already know), but after a few clicks I am on the go. My albums from Picasa is automatically integrated and even the pictures I have uploaded to this blog is shown in  Google+ . But what happens next? Practically no one of my friends are on  Google+  so what do I use it for? I guess we will see. Hopefully there will be even more integration between the social networks in the future. I am anyhow very satified with