Category Archives: silverlight code tips

SilverLight Timers, what to use?


subheading 2

1. HtmlTimer is deprecated and not very reliable (incase you want to use it here is the basic code to get it working

Silverlight Timer - using the HtmlTimer 
2. System.Threading.Timer. Not really an option because there’s no way to marshal it’s callbacks back onto the UI thread

3. Storyboard in XAML and wired a handler to its Completed events. I used the inline event on the xAML instead of wiring up the event in code because it wasn’t behaving properly.

SilverLight Timer using a storyboard

How to rename the TestPage.html in vs2008


 Sub Heading 4

The name of the default page in a VS2008 for SilverLight application is TestPage.html, this is really annoying so I changed it. BUT changing the name of this page wasn’t easy, you can change TestPage.html’s name in Solution Explorer, but you can’t rename TestPage.html.js. (And if you do it manually, the link between the two files in Solution Explorer is lost.)

This is how I did it:

1. go out to the file system and rename the files.

2. open the SLN file in Notepad and change this:

<ItemGroup>
  <None Include=”TestPage.html” />
  <None Include=”TestPage.html.js”>
    <DependentUpon>TestPage.html</DependentUpon>
  </None>
</ItemGroup>

to this:

<ItemGroup>
  <None Include=”Default.html” />
  <None Include=”Default.html.js”>
    <DependentUpon>Default.html</DependentUpon>
  </None>
</ItemGroup>

Once you open it in vs2008 it will be properly linked!

Handling Keyboard Input in SilverLight


 silverlight code tips

Came across a great article that explains how to handle Keyboard input in SilverLight. I just know i will be needing this functionality in some future project ;)

John Galloway’s blog talks about wiring up the main canvas’s “keyup” event and listening to the keys. He’s created an Enum of all possible key’s that we can code against.

Check out his posting here: “Some keyboard input tricks for SilverLight 1.1 Alpha

Mind you ignore the title of the posting because it should be compatible with all the currently released versions of SilverLight.

Silverlight Tip : Balder 3D engine in SilverLight


sub heading 7

In my investigations for creating the “album swisher” control for my iTunes silverlight project i found a wealth of sources regarding 3D rendering in silverlight. One such resource was the project code named “Balder“.

Whilst it doesn’t meet my requirements for the album swisher yet it has alot of cool features that i will hopefully use very soon. If anything please check it out for the c# coding, it was very insightful on how a 3D engine is made!

Einar Ingebrigtsen is the author of the product and if the codeing is anything to go buy he’s pretty smart!

want to clip a canvas as a mouse is dragged on the edge of it


silverlight code tips 

So this is common request in apps these days.

Here’s the code that someone at silverlight.net forums posted. I’ve copied it here cause it’s a good simple snippet of code

XAML


<Canvas Canvas.Left="0" Canvas.Top="200">
  <Rectangle Width="300" Height="400" Fill="Black" Cursor="Hand" MouseLeftButtonUp="ChangeClip"/>
  <Canvas.Clip >
  <RectangleGeometry x:Name="ClipRect" Rect='0, 0, 300, 400' />
  </Canvas.Clip>
  </Canvas>

Javascript


 function ChangeClip(sender, args)
{
  var clip = sender.findName("ClipRect");
  clip["Rect"]="0, 0, 300, 100";
}

silverlight tip: how to resize all objects in a canvas when the canvas resizes


subheading 3

Using a ScaleTransform on the canvas will scale all of it’s children by the same proportion!

Calling Javascript from C#


SubHeading 6 

A question that keeps coming up is how to call Javascript from C# in a Silverlight 1.1 Alpha application. This requires only a little bit of wiring, and the use of the most excellent Scriptable attribute.Start with a new Silverlight project (you can get everything you need to get started at silverlight.net.) In your Page class, you will need to reference the System.Windows.Browser namespace (make sure you have System.Silverlight as a reference). Add a public event, then add the Scriptable attribute to the class and the event. Register your object in the constructor, and you are good to go, from the C# side of things, anyway.

Here’s what that looks like:


using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Browser;
namespace agScriptable {[Scriptable]
public partial class Page : Canvas{

public Page(){
WebApplication.Current.RegisterScriptableObject("example", this);
MouseLeftButtonDown += Page_MouseLeftButtonDown;
}

void Page_MouseLeftButtonDown(object sender, MouseEventArgs e) {
if (CallbackToBrowser != null){
CallbackToBrowser(this, new EventArgs());
}
}

public void Page_Loaded(object o, EventArgs e){
// Required to initialize variables
InitializeComponent();
}

[Scriptable]
public event EventHandler CallbackToBrowser;
}
}  

You can't fire the CallbackToBrowser event in your Loaded event handler, because that's too early. All of the required setup will not have occurred by then.

In your Javascript, you will need to add a global event handler for the onLoad event. You also need to add an event handler function, which you will register in the onLoad handler. Here’s what that looks like:


// JScript source code
//contains calls to silverlight.js, example below loads Page.xaml
function createSilverlight() {
Sys.Silverlight.createObjectEx({
source: "Page.xaml",
parentElement: document.getElementById("SilverlightControlHost"),
id: "SilverlightControl",
properties: { width: "100%", height: "100%", version: "0.95", enableHtmlAccess: true },
events: { onLoad: OnLoaded }
});
}
function OnLoaded(sender, args) {
sender.Content.example.CallbackToBrowser = onManagedCallback;
}

function onManagedCallback(sender, args) {alert("JS!"); }

You can't register the event handler in the createSilverlight() function, because the Silverlight control has not been fully initialized yet.

When this is all put together, clicking on the Canvas will call the Javascript onManagedCallback function.

(Thanks to Stefan Schackow.)