asp:Silverlight Override

by Cameron Albert 11. March 2008 23:01

If you are using the <asp:Silverlight/> control to host your Silverlight 2.0 apps from an ASPX page and want to be able to provide a custom splash screen as outlined in Pete Brown's post Xap! App! Pow! Packaging and Application Startup in Silverlight 2 Beta 1 - Part 2 I created the following override that allows you to set the SplashScreenSource and OnSourceDownloadProgressChanged values from within the control itself.

Here is the source for the control:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Lionsguard.Web.UI.SilverlightControls
{
    [ToolboxData(@"<{0}:Silverlight runat=""server""></{0}:Silverlight>")]
    public class Silverlight : System.Web.UI.SilverlightControls.Silverlight
    {
        protected override IDictionary<string, string> GetSilverlightParameters()
        {
            IDictionary<string, string> dictionary = base.GetSilverlightParameters();
            if (!String.IsNullOrEmpty(this.SplashScreenSource))
            {
                dictionary.Add("SplashScreenSource", this.SplashScreenSource);
            }
            if (!String.IsNullOrEmpty(this.OnSourceDownloadProgressChanged))
            {
                dictionary.Add("OnSourceDownloadProgressChanged", this.OnSourceDownloadProgressChanged);
            }
            return dictionary;
        }

        [Category("Behavior"), Browsable(true), DefaultValue(""), Description("")]
        public virtual string SplashScreenSource
        {
            get
            {
                return (((string)this.ViewState["SplashScreenSource"]) ?? string.Empty);
            }
            set
            {
                this.ViewState["SplashScreenSource"] = value;
            }
        }

        [Category("Behavior"), Browsable(true), DefaultValue(""), Description("")]
        public virtual string OnSourceDownloadProgressChanged
        {
            get
            {
                return (((string)this.ViewState["OnSourceDownloadProgressChanged"]) ?? string.Empty);
            }
            set
            {
                this.ViewState["OnSourceDownloadProgressChanged"] = value;
            }
        }
    }
}

And here is the way that I am using it in my code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Perenthia.Web._Default" %>
<%@ Register Assembly="Lionsguard.Web.Silverlight" Namespace="Lionsguard.Web.UI.SilverlightControls" TagPrefix="lg" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Perenthia</title>
    <script language="javascript" type="text/javascript" src="/Common/Scripts/Silverlight.js"></script>
    <script language="javascript" type="text/javascript" src="/Common/Scripts/Splash.js"></script>
</head>
<body>
    <form id="frmMain" runat="server">
        <asp:ScriptManager ID="scriptManager" runat="server"></asp:ScriptManager>
        <div>
            <lg:Silverlight ID="silverlight1" runat="server" Source="~/ClientBin/Perenthia.xap" 
                Version="2.0" Width="800" Height="500" SplashScreenSource="~/Common/Xaml/Splash.xaml" 
                OnSourceDownloadProgressChanged="onSourceDownloadProgressChanged" />
        </div>
    </form>
</body>
</html>

The Splash.js file contains the following JavaScript:

function onSourceDownloadProgressChanged(sender, eventArgs)
{
    sender.findName("uxStatus").Text =  "Loading: " + Math.round((eventArgs.progress * 1000)) / 10 + "%";
    sender.findName("uxProgressBar").ScaleY = eventArgs.progress * 356;
}

Both the Splash.xaml and associated JS are from the Silverlight Beta 1 Quick Start for Displaying a Splash Screen While Loading a Silverlight-Based Application. I will eventually replace the splash with my own Xaml but for now this one works OK for testing. :)

 

**EDIT: The XAP file and the XAML file used to render the splash screen must reside in the same directory, be that the ClientBin or the root.

 ** BETA 2 EDIT: Microsoft has added the SplashScreenSource property and OnPluginSourceDownloadProgressChanged event to their Silverlight control. Kind of makes this one obsolete. I will post more about it soon.

Tags:

ASP.NET Development | Game Development | General | Silverlight Games

Comments

3/18/2008 4:46:39 AM #

Marc Roussel

Hi,

I'm trying to implement it but seems there a few missing pieces!
Can you explain how do I have to implement your Override class above becaise when I try to save it in a .cs and add it to my project,
it goes in the App_Code directory and never find the Assembly that is referenced in your Default.aspx
at the line :

<%@ Register Assembly="Lionsguard.Web.Silverlight" Namespace="Lionsguard.Web.UI.SilverlightControls" TagPrefix="lg" %>

I did change the Lionsguard.Web.UI.SilverlightControls for SilverlightCustom namespace and change the line above to :

<%@ Register Assembly="Silverlight" Namespace="SilverLightCustom" TagPrefix="asp" %>

And I still have the error :

Error  5  Could not load file or assembly 'Silveright' or one of its dependencies. The system cannot find the file specified.  C:\Users\Gear\Documents\Visual Studio Codename Orcas\Projects\GearSite_Web\Default.aspx  3  

I would need help on this.  I would like so much to change the default splash screen Smile


Marc Roussel Canada

3/18/2008 6:57:34 AM #

calbert

Use <%@ Register Assembly="__code" Namespace="SilverLightCustom" TagPrefix="asp" %> for code you place in the App_Code folder. Also, you may want to use a different TagPrefix since Silverlight is already used in the asp xml namespace.

calbert United States

3/18/2008 7:45:38 AM #

Marc Roussel

Hey,

Great now it compiles.  But I still see the default splash screen even if everything is in place.
any idea ?  Here's a screenshot where you can take a brief look at the environment :

http://pages.videotron.com/gear/look.jpg

My Web site you can test : http://gearworld.homedns.org:8082/devpreview between 6:00am and 8:00pm EST.  Today is an exception Smile its 9:00pm

Marc Roussel Canada

3/18/2008 7:55:58 AM #

calbert

I get a 503 error attempting to access your site.

Do you have a JS method called onSourceDownloadProgressChanged in your SplashScreen.js file?

Have you tried to run the Xaml by itself to make sure it loads correctly and all your paths are correct?

Be sure to run the app in Silverlight debug mode so any errors will bubble out.

calbert United States

3/18/2008 8:23:37 AM #

Marc Roussel

I'm playing a lot with it actualy maybe you felt between 2 compile Smile

Well, I did check and no errors anywhere, the xmal is all right, the js effectively containts the onSourceDownloadProgressChanged which is the original from the QUICK START at SilverLight.net
I got the same xaml, the same js and it is in the root of my GearSite_Web as you can see in this screenshot if you look in the solution explorer :

http://pages.videotron.com/gear/state.jpg

Marc Roussel Canada

3/18/2008 8:25:07 AM #

Marc Roussel

To add to it.  Its just a feeling but it seems that the SplashScreen.xaml is never executed for an unknown reason for now...

Marc Roussel Canada

3/18/2008 9:02:45 AM #

calbert

Your solution looks fine, not sure what is going on there. I will play around with it some more and see if I can replicate it. One thing to try would be doing it the old school way using the createSilverlight call and see if it will load the splash. Also, be sure your XAP is at least 5MB, if not it doesn't seem to load up the splash screen at all, just goes right to the application. The documentation says if the app takes more than 500ms then it loads up the splash screen.

calbert United States

3/18/2008 5:53:49 PM #

Marc Roussel

All right thank you sir.....

Marc Roussel Canada

3/19/2008 1:01:53 AM #

calbert

Alright, the problem is the location of the XAP file. When I built this control I just had the XAP in the root web the way the quick start described for doing the splash screen. If you move your XAP out into the root of the web the load screen will be displayed. Put in the ClientBin and it bypasses the loader. This goes deeper than my control overrides in that it exists somewhere in the Silverlight plugin itself.

calbert United States

3/19/2008 2:49:48 AM #

Marc Roussel

Now the question is how to you generate the .xap because even with the full REBUILD SOLUTION it doesn'T even create it !

Marc Roussel Canada

3/19/2008 3:05:00 AM #

Marc Roussel

I did create a totaly new SilverLight application.  Put the SplashScreen.xaml and its js in this application and compiled it.  I manged to get the .xap for the splashscreen then I took it and place it in the root of my Gearsite_Web and still the splashscreen doesn't show up
I think I tried a lot of things here and I don'T really understand why this splashscreen doesn't pop !

Marc Roussel Canada

3/19/2008 3:09:29 AM #

Marc Roussel

In this screenshot you can see in a single LOOK everything.  Tell me what you think about it

http://pages.videotron.com/gear/notworking.jpg

Marc Roussel Canada

3/19/2008 3:39:15 AM #

calbert

You don't need the splash page compiled into a XAP, you have to drag your GearSite.xap from the ClientBin into the root of your web project, then change the "Source" location in the gea:Silverlight control to Source="GearSite.xap" and it should load the splash page.

calbert United States

3/19/2008 4:26:16 AM #

Marc Roussel

Smile

Now not even the splash screen not showing but the main application either.  All I see is my html black background and nothing more

Marc Roussel Canada

3/19/2008 4:29:35 AM #

Marc Roussel

Oh.  Here's something new :

http://pages.videotron.com/gear/weird.jpg

Marc Roussel Canada

3/19/2008 4:34:11 AM #

Marc Roussel

You're talking about "You don't need the splash page compiled into a XAP"

For your information, I do not have a splash page but only a SplashScreen.xaml and a .js under it
which I took out in a standalone app to get the .xap.  But right now all I have is my Gearsite_Web which the SplashScreen.xaml and the SplashScreen.js which drives the events written in the markup code

Marc Roussel Canada

3/19/2008 4:57:57 AM #

Marc Roussel

All right now we're talking.  I tried so many things that it finally paid off.  I did place the SplashScreen.xaml in the ClientBin and I the .js in the root and now everything works fine.

In the marckup code,  I got this :

    <script language="javascript" type="text/javascript" src="SplashScreen.js"></script>

and this :

                    <div style="height:100%; width: 100%;background-color: Transparent;">
                        <gea:Silverlight ID="Silverlight1" runat="server" Source="~/ClientBin/GearSite.xap"
                            Version="2.0" width="800px" Height="600px" BackColor="Transparent"
                            Windowless="True" PluginBackground="Transparent"
                            SplashScreenSource="SplashScreen.xaml"
                            OnSourceDownloadProgressChanged="onSourceDownloadProgressChanged"/>
                    </div>

and the SplashScreen is placed in the ClientBin and the js stay there in the root and everything works fine.


Oufff Smile

here's the result :

http://gearworld.homedns.org:8082/devpreview

by the way, this COMMENT system, doesn't make this URL above entirely an URL.  It stops at .org: Smile

Marc Roussel Canada

3/19/2008 6:20:21 AM #

calbert

Sorry about the confusion, by splash page I meant the splash XAML. Anyway, I tested your theory and you are correct, as long as the splash XAML and the XAP are in the same directory the splash will load.

calbert United States

3/20/2008 3:45:43 PM #

Marc Roussel

Thank you for all the great help on this.

Marc Roussel Canada

3/20/2008 7:14:27 PM #

calbert

Glad I could help Smile

calbert United States

6/12/2008 4:12:04 AM #

parimal

The above approach does not work in SL Beta 2. It used to work very fine in Beta1. Now i get an error which says:
"The splashScreenSource cannot be set because the Silverlight host already has a splashScreenSource."

Need help.
regards,
Parimal

parimal United States

6/12/2008 7:10:25 AM #

calbert

Yeah, they added that property and provided an OnPluginSourceDownloadProgress event to their Silverlight control. You can just start using their control, however, my event handler in JavaScript was throwing and exception, doesn't seem to pass the same arguments.
Anyway, I haven't had a chance to debug through it and figure out what is going on. When I do I will be sure to post it.

calbert United States

6/12/2008 2:44:44 PM #

Marc Roussel

How do we get out of the mailing list here ?
Smile Thank you

Marc Roussel Canada

6/17/2008 10:21:55 PM #

parimal

Hi,

Can u please let us know if you had any success on the the Splash Screen in SL Beta 2 version?

regards,

Parimal

parimal United States

6/17/2008 10:34:22 PM #

calbert

I switched over to using the asp:Silverlight control because they added the SplashScreenSource property.

What I have experienced is that when I first do a debug of the app in Visual Studio I don't get the splash screen, if I reload the page while still debugging the splash screen is displayed. I still haven't dug down into why the javascript side no longer works, might be the Silverlight.js version I am using, just haven't spent time to try and get to work yet.

calbert United States

7/28/2008 11:46:04 PM #

Marc Roussel

Here's what I get now in SL 2 BETA 2 which was working fine in BETA 1 tho...

Marc Roussel Canada

7/28/2008 11:46:24 PM #

Marc Roussel

Ops I for got to write the WHAT I GET

Sys.InvalidOperationException: The splashScreenSource cannot be set because the Silverlight host already has a splashScreenSource

Marc Roussel Canada

7/29/2008 12:49:14 AM #

calbert

They added that as part of the Silverlight control from Microsoft now so you really don't even need my control anymore. Smile

calbert United States

7/29/2008 11:35:44 AM #

Marc Roussel

I see so I can get rid of the REGISTER line with my own prefix and delete the SplashCustom.cs which was overriding stuff and just use the Microsoft property to tell where my splashsource is and the event for it ?

If so, can I rely on C# only instead of a .js ? like I would do a nice splashscreen in Blend 2 and do the OnSplashDownloadProgress... in C# ?

Marc Roussel Canada

7/29/2008 12:54:19 PM #

calbert

The Silverlight control is not built in Silverlight, it is a regular web control, so you wouldn't be able to have a C# method handle the "OnPluginSourceDownloadProgressChanged" event. That is still going to be a JavaScript event.

calbert United States

Powered by BlogEngine.NET 1.5.0.7
Modified Theme by Mads Kristensen

About the Author

CameronAlbert.com I am Senior Software Development Consultant specializing in Silverlight, WPF and the Microsoft .NET Framework. 

I have released an iPhone game called the Adventures of Puppyman that was built using ExEn and am currently working on a WP7 and iPhone version of Perenthia soon to be released.

View Cameron Albert's profile on LinkedIn
See how we're connected

Follow cameronalbert on Twitter

 

Recommended Books

Silverlight 4 Business Application Development - Beginner's Guide:

http://www.packtpub.com/microsoft-silverlight-4-business-application-development-beginners-guide/book

Microsoft Silverlight 4 Business Application Development: Beginner’s Guide