Custom Splash screen for Silverlight applications
Monday, August 24, 2009


Is the in-stock splash screen in Silverlight application boring you? Here is an easy way to create custom splash screens for your Silverlight application. Essentially the splash screen itself is an XAML file with the desired graphical content and the download progress of the XAP can be tracked using a little javascript code. As the C# managed enironment has not been loaded we can't use C# code to track the progress. Also the XAML file should not be the part of the XAP file as it has to be displayed while the XAP is been loaded.


To craete a custom splashscreen lets first start a Silverlight project with ASP.NET test website.Then, add a new XAML file to your ASP.NET website (not the Silverlight project). To do so, select the ASP.NET website in the Solution Explorer and choose Website > Add New Item. Choose the Silverlight JScript page template, enter a name(CustomSplashScreen.xaml here), and click Add. This XAML file will hold the markup for your splash screen. In our application we are creating XAML like this to build a custom splashscreen like the image below.


<Grid xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
<Grid >
<Rectangle x:Name="progressBarBackground" Fill="White" Stroke="Black"
StrokeThickness="1" Height="30" Width="200" Grid.Row="1"></Rectangle>
<Rectangle x:Name="progressBar" Fill="Yellow" Height="28" Width="0"
Grid.Row="1" HorizontalAlignment="Left">
</Rectangle>
</Grid>
<TextBlock x:Name="progressText" HorizontalAlignment="Center"
Text="0% downloaded ..."></TextBlock>
</StackPanel>
</Grid>

Next we need to add a little javascript code to track the progress of the XAP file. the event looks like this


<script type="text/javascript">
function onSourceDownloadProgressChanged(sender, eventArgs)
{
sender.findName("progressText").Text = Math.round((eventArgs.progress * 100)) + "% downloaded ...";
sender.findName("progressBar").Width = eventArgs.progress * sender.findName("progressBarBackground").Width;
}
</script>



Also add the following parameters to the <object> tag


<param name = "splashscreensource" value = "CustomSplashScreen.xaml" />
<param name = "onsourcedownloadprogresschanged" value = "onSourceDownloadProgressChanged" />

The parameter 'splashscreensource' is used to identify the splash screen and 'onsourcedownloadprogresschanged' is used to hook up the javascript event.

If instead of <object> tag Silverlight web control is used , it also has two similiar properties named 'SplashScreenSource' and 'OnSourceDownloadProgressChanged'.

Example


<asp:Silverlight ID="silverlightControl" runat="server"
Source="~/ClientBin/MyApp.xap" Version="2.0" Width="800" Height="500"
SplashScreenSource="~/CustomSplashScreen.xaml"
OnSourceDownloadProgressChanged= "onSourceDownloadProgressChanged" />

To test the application add some large mp3 files and set the build action of each one to Resource so it’s added to the XAP file and will be downloaded slowly in the local system.

Labels: , , , , , ,

 
posted by Abhijeet at 4:31 AM | Permalink | 0 comments
Submit Silverlight games and earn money from Adsense Revenue Sharing
Sunday, July 26, 2009
Happy news for all Silverlight game developers. If your are a Silverlight developer, submit your Games and other interesting Silverlight applications in SilverlightClub.Com . You can earn 90% of the Google AdSense revenue from your Game hosting pages, for 1 to 3 years depending on the quality and popularity of your game.

You may submit games and other interesting applications developed using Microsoft Silverlight technology. You must upload the .xap file and a screenshot of your application.

The following application types are allowed:

1. Games
2. Puzzles
3. Entertainment for Kids - Painting, Magic, Tricks
4. Learning activities
5. Other Fun/entertainment applications

SilverlightClub.Com follows a revenue sharing model based on Google AdSense API revenue sharing system.

In order to participate in this program, you must have a Google AdSense account. If you do not have one, you may create a Google AdSense account through SilverlightClub.com.

If your application is approved and published there, you will get 90% of the revenue from Google AdSense directly to your AdSense account. Remaining 10% of the revenue will be credited to SilverlightClub.Com's AdSense account. It is managed, tracked and paid by Google.


You must have/get an approved AdSense account to participate in revenue sharing.

By default, you will get 90% revenue share from your hosted application pages for a period of 1 year. In case of applications hosted exclusively in this site or applications that have no reference to your own website, they can extend this period to 2 or more years.

I submitted my first game, BubbleBreaker in their site. Click here to submit your Silverlight Applications and earn revenue/prizes.

Labels: , , , ,

 
posted by Abhijeet at 1:17 AM | Permalink | 0 comments
TextBox Watermark using javascript
Thursday, January 15, 2009
TextBox Watermark using javascript

This is how you can add a watermark to a textbox in asp page using javascript. Suppose we have a textbox like this

<asp:TextBox ID="Text2" runat="server"></asp:TextBox>
To add attributes to a textbox paste the following code in the page load event of the page.
Text2.Attributes.Add("onfocus", "chTextin();");
Text2.Attributes.Add("onblur", "chTextout();");
Also paste this code on body's onLoad event
<body onload="initialize();">
add this functions inside the <script> to </script> tags.

function chTextin()
{
var txt=document.getElementById('Text2').value;
if(txt=='Enter a Value')
{
document.getElementById('Text2').value='';
document.getElementById('Text2').style.color='';
}
}

function chTextout()
{
var txt=document.getElementById('Text2').value;
if(txt=='')
{
document.getElementById('Text2').value='Enter a Value';
document.getElementById('Text2').style.color='DarkGray';
}
}

function initialize()
{
document.getElementById('Text2').value='Enter a Value';
document.getElementById('Text2').style.color='DarkGray';
}


Labels: , , , ,

 
posted by Abhijeet at 2:45 AM | Permalink | 0 comments