OnLoad event

I'm trying to create the a WPF/E control and hook up a some events after it has loaded it's XAML. I've trying a zillions of ways to hook up the onload/onloaded/loaded event (or what ever it is called - the doc is not too clear on that), but no luck. I'm also confused on whether I should hook the event to the host or to the WPF/E Control

Basically here's what I'm trying to do:

this._host = new agHost(
this.get_element().id, // hostElementID (HTML element to put WPF/E control into)
this.get_element().id+"_wpfeControl", // ID of the WPF/E ActiveX control we create
this._width, // Width
this._height, // Height
this._backColor, // Background color
null, // SourceElement (name of script tag containing xaml)
this._template, // Source file
"false", // IsWindowless
"30", // MaxFrameRate
null // OnError handler
);
this._wpfeControl = document.getElementById(this.get_element().id+"_wpfeControl");

// Hook up load event (which doesn't work)
this._host.OnLoaded = function() { alert('XAML loaded'); }

What I've always used is just used the Loaded event on the root canvas element:

<Canvas Loaded=loaded" />

There is an OnLoaded event for the control and a Loaded event for UIElement items like the Canvas, TextBlock, etc. However, I think you're running into problems because your trying to attach to the OnLoaded event of the agHost object which is just a helper class to load the WPF/E control and isn't the actual control. I think your example might work if you called:

this._wpfeControl.OnLoaded = function () ...

However, it is hard to say without seeing the rest of your code...

Thanks for your reply. I know I can put the events in the XAML, but that has two downsides:

1. You should never mix code and design.
2. I cannot call functions inside the context of an object/class.

For those two reasons I need to call a initialization script in my wpfe control class, which also instantiates the agHost object. this._wpfeControl.OnLoaded does not fire either.

If you want to do this then you will probably have to use the window.onload event to start your script. The following code works:

window.onload = function()
{
new engine();
}

function engine()
{
new agHost('wpfe','wpfeControl1','400','300','black',null,"load.xaml",'false','30',null);
this._host = document.getElementById('wpfeControl1');
this.setCallback(this._host, "onLoad", delegate(this, this.loaded));
}

engine.prototype.loaded = function(sender, args)
{
alert("XAML loaded.");
}

engine.prototype.setCallback = function(target, eventName, callback) {
if (!window.methodIndex)
window.methodIndex = 0;

var callbackName = "uniqueCallback" + (window.methodIndex++);
var controller = this;
var func = function() {
callback.apply(controller, arguments);
}

eval(callbackName + " = func;");
target[eventName] = " + callbackName;
}

function delegate(target, callback) {
var func = function() {
callback.apply(target, arguments);
}
return func;
}

Don't worry about the window.onload event. I have MS AJAX's ScriptManager to make sure the control isn't loaded until it is ready.

There was a typo in your sample, so I had to change the last line in setCallback to (I had already tried something similar):

            target[eventName] = 'javascript:' + callbackName;

The event still doesn't fire though.

It was probably filtered by the forum software. I've posted example here:

http://blogs.sqlxml.org/wpfe/load/

Xaml: http://blogs.sqlxml.org/wpfe/load/load.xaml

JS: http://blogs.sqlxml.org/wpfe/load/load.js

It does work, so perhaps there is something with your code that is breaking it. If you post your code it would make it a lot easier to figure out.

From Morten's Original Post:

=====================================

I'm trying to create the a WPF/E control and hook up a some events after it has loaded it's XAML. I've trying a zillions of ways to hook up the onload/onloaded/loaded event (or what ever it is called - the doc is not too >> clear on that), but no luck. I'm also confused on whether I should hook the event to the host or to the WPF/E Control

Basically here's what I'm trying to do:

this._host = new agHost(
this.get_element().id, // hostElementID (HTML element to put WPF/E control into)
this.get_element().id+"_wpfeControl", // ID of the WPF/E ActiveX control we create
this._width, // Width
this._height, // Height
this._backColor, // Background color
null, // SourceElement (name of script tag containing xaml)
this._template, // Source file
"false", // IsWindowless
"30", // MaxFrameRate
null // OnError handler
);
this._wpfeControl = document.getElementById(this.get_element().id+"_wpfeControl");

// Hook up load event (which doesn't work)
this._host.OnLoaded = function() { alert('XAML loaded'); }

===========================================================

As you've already found out putting an onload on the host object doesn't do anything. It has to be on the control object.

I've found if I do the following extra piece of code, that the OnLoad will be executed correctly.

this._wpfeControl.OnLoad = "javascript:MyLoad";

function MyLoad(sender)
{
alert("hello from OnLoad");
}

NB: I don't know if "sender" is required or useful as an argument. The docs are still a bit sketchy on this.

I fought with this for a long time. I figured that a line like this._wpfeControl.OnLoad = "MyLoad"; should work, but for some reason it doesn't.

I've also seen that Bryant's approach works, but I don't understand the JS well enough to figure out why.