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);
Labels:

Comments

Post a Comment

Popular posts from this blog

Binding a HTML-formatted string to a WPF WebBrowser control

Sometimes there is a need to display a HTML formatted string in a WPF application. There are a couple of ways to do this, but the most stright forward is to use a WebBrowser control and the NavigateToString method. This approach has one big flaw, you cannot use binding to a string out of the box, but I found a great solution through Stack Overflow which adds a bindable property to the  WebBrowser  control using  NavigateToString . The following class is all that is needed to add that behavior. A new depencency property named Html is introduced to the  WebBrowser  and the proper change action is performed in the OnHtmlChanged method. public class BrowserBehavior { public static readonly DependencyProperty HtmlProperty = DependencyProperty.RegisterAttached( "Html", typeof(string), typeof(BrowserBehavior), new FrameworkPropertyMetadata(OnHtmlChanged)); [AttachedPropertyBrowsableForType(typeof(WebBrowser))] public static string GetHtml(WebBrowser bro
1 comment
Read more

Binding Enum with DescriptionAttribute in WPF

Binding an enumeration to a ComboBox can be done in several ways. In most cases you don't want to display the value itself, but a more user friendly description. One common approach is to use the DescriptionAttribute on the Enum values to supply a description for each value.  This is all possible in a very MVVM friendly way. First step is to add the  DescriptionAttribute  to the values of the enumeration. public enum MyValues { [Description("First value")] First, [Description("Second value")] Second } To retrieve the description from the enum we use a simple extension method. This method returns the value of the DescriptionAttribute if it exists, otherwise the string representation of the enum value is returned. public static string GetDescription(this Enum value) { var fieldInfo = value.GetType().GetField(value.ToString()); var attribute = fieldInfo.GetCustomAttributes(typeof(DescriptionAttribute), false).FirstOrDefault() as
2 comments
Read more

Bindable RichTextBox with HTML conversion in WPF

In WPF , the RichTextBox  control is not really like other controls. Due to its flexible nature, there is no built in way of binding a property to the content. In this case, I wanted a simple  RichTextBox  control with a binding to an HTML formatted string to be able to use the built-in formatting features of the  RichTextBox  and allow users to create simple HTML formatted content. First, doing the conversion on-the-fly proved to have major performance issues, so I ended up binding the content to a XAML string. The XAML to HTML conversion can be performed at any time. I created a UserControl with a bindable Text-property. The view contains a  RichTextBox  control. <RichTextBox x:Name="richTextBox" TextChanged="OnRichTextBoxChanged"> The source code for the user control contains the Text property and the methods to handle the binding. public static readonly DependencyProperty TextProperty = DependencyProperty.Register( "Text", typeof(st
Post a Comment
Read more