For the past few weeks I have been working on a project primarily using WPF/E and ASP.NET AJAX. Now as WPF/E is supposed to be cross-browser and cross platform, we were hoping our WPF/E site (which works fine in IE 7) would work in Firefox without needing any tricks or changes to the code, well that was not entirely true but the good news is there were only a few things that required changes and here are things that I would be careful of if I want my WPF/E site cross browser:
1. x:Name Issue
If you try to access Name property of XAML elements for which no x:Name has been specified firefox will throw an exception indicating no name property exists for the object instead of returning empty string as in IE7. So if you have code block which is something like:
vay myCanvas = _wpfeControl.findName("myCanvas");
//Iterating through children of myCanvas
for(var i=0;i<myCanvas.children.count;i++)
{
var child = myCanvas.children.getItem(i);
alert(child.Name);
//Above line will throw an exception in firefox if no x:Name has been specified for the XAML Element
}One obvious thing that I was tempted to use was hasOwnProperty method of Javascript object, which did not work either
if(child.hasOwnProperty("Name"))
alert(child.Name);The solution that we came up with was to create a helper function to read the name property and return empty string if an exception is caught
function GetXamlElementName(xamlElm)
{
var name = "";
try
{
name = xamlElm.Name;
}catch(e)
{}
return name;
}You can also create a more generic function which can be used to read any property and not just the name
function GetXamlAttributeValue(xamlElm, propertyName)
{
var attrValue = "";
try
{
attrValue = xamlElm[propertyName];
}catch(e)
{}
return attrValue;
}
I am no way arguing that this is the best approach but it worked well for our purpose.
2. setValue(….) Issue
Firefox is not going to like if in your javascript you are setting property values on XAML element using setValue, instead use the short hand syntax for example:
vay myCanvas = _wpfeControl.findName("myCanvas");
myCanvas.setValue(“Canvas.Top”)=50; //NO NO for firefox
//instead use:
myCanvas[“Canvas.Top”]=50;
Surprisingly, this is not true for getValue(…..) , getValue(“Canvas.Top”) works in firefox. 3. Programmatically assigning null values to XAML element properties.
If your Javascript code is assigning null values to a XAML element property, then firefox will growl at you.
For example if you are trying to assign a variable value to Text property of a TextBlock:
var searchText = myCanvas.findName(“searchText”)
var textBoxValue = GetTextBoxValue();
// GetTextBoxValue() is some function which returns a value that
//needs to be populated into the textblock, the return
//value of the function could be null.
searchText.Text = textBoxValue //NO NO for firefox if textBoxValue is null
Instead check for the null value before assigning it to property
if(textBoxValue != null)
searchText.Text = textBoxValue
4. Special character showing up before the £ sign
This only happens when using WPF/E’s createFromXaml() method
For example if you have XAML within a .xaml file
<TextBlock> £ </TextBlock>
it shows up correctly on Firefox but if you pass the same string to createFromXaml(..) method the TextBlock which is created shows a special character in front of £ sign. I tried all kinds of encoding/decoding, escaping etc but nothing seems to work which lead us to believe it could be a bug in WPF/E run time itself.
_wpfeControl.createFromXaml(“<TextBlock> £ </TextBlock>”)
Other than £ sign most of the special characters seem to work fine. So far I haven't found a solution to it 
To summarize in one sentence; most of the issues were around Javascript’s interaction with WPF/E's object model. I think that was pretty much it to make the site work in Firefox and yes it did work on MAC
If I forgot to mention this was in WPF/E February CTP release.
Technorati Profile