Question

I’m working with a XAML file in a Silverlight Web application. I’m using JavaScript to manipulate the xaml file and respond to events. I have a list of Ellipse elements on a graph and when I click on one of them the Ellipse’s Fill is set to another color, overwriting the Fill set in the Style.

So after click on an Ellipse I effectively end up with something like this:

<Ellipse x:Name="g46" Style="{StaticResource GainValue}" Canvas.Top="136" Canvas.Left="766" MouseLeftButtonUp="onDotClicked" Fill="Red" />

Now when I click on a second Ellipse, I would like to reset the color of the first Ellipse clicked. Unfortunately, I have no idea on how to remove an attribute belonging to an Ellipse (or any other) element using Javascript. Setting the attribute to null assigns an empty string to the Ellipse, and I’ve gone through half a dozen variations on dot.removeAttribute('Fill') and dot['Fill'].remove without success.

I’m basically in the dark on the syntax I should use to manipulate xaml objects in JavaScript. I’ve found a few reference pages that describe DOM syntax and the like, but nothing that corresponds to the syntax that I can actually use here.

Answer 1

Your best bet is probably to use jQuery to load the XAML as XML.

You can do

var xamlDocument = getYourXaml(); // Implement this or replace with however you're getting the XAML
var xml = $(xamlDocument);
xml.removeAttr('Fill');

//If you need to save your XAML do it here, if it's part of the page it should just work.

More info: http://api.jquery.com/jQuery.parseXML/