ImageNodeView

Jun 15, 2010 at 9:35 PM

Do you have any examples using ImageNodeView?  I am hoping to change the images for the nodes "on the fly" as they are being set.

Thanks,
Chad

Jun 16, 2010 at 2:52 PM

Hello Chad - check out if this tutorial helps. If it doesn't, I'll spend more time on helping you.

Jun 16, 2010 at 4:35 PM

That tutorial is very helpful, I have created new node xaml's and they work so that I have different icons for the nodes.  But what I would like to do is be able to set the picture for the icon on the fly without creating a xaml for each possible icon.  Is this possible?

Thanks again for all your help,

Chad

Apr 30, 2011 at 12:31 AM

I'm banging my head against the desk here, I'm so close! Can you post the code you'd use to add the "picture" element to get ImageNodeView to dynamically display a different image for each node? Is that how it is done? I'm trying to add the following in CreateNodeFromObject:

<!-- p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 9.5px Consolas} p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 9.5px Consolas; min-height: 11.0px} p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 9.5px Consolas; color: #b62522} span.s1 {color: #063ff4} span.s2 {color: #2ea3ba} span.s3 {color: #000000} span.s4 {color: #b62522} -->

  node.drawingInformation = new NodeDrawingInformation();

            List<XmlElement> drawingInformation = new List<XmlElement>();

            XmlDocument xdoc = new XmlDocument();

            xdoc.LoadXml(

            "<picture xmlns=\"InformationConnectionsEngine." +

            "defaultTemplate\">" +

               myObject.picture +

            "</picture>");

 

            drawingInformation.Add(xdoc.DocumentElement);

            node.drawingInformation.Any = drawingInformation.ToArray();

Thanks!

--Aaron

Apr 30, 2011 at 1:48 AM
I had problems updating the template to give it a new image too. I ended up modifying the node code to read an image URL from the node title. Basically I set the node title, to the title|url then in the node code, I split the title and then set the picture.source to the URL passed in.

Chad

Sent from my iPad

On Apr 29, 2011, at 7:31 PM, "aarondcoleman" <notifications@codeplex.com> wrote:

From: aarondcoleman

I'm banging my head against the desk here, I'm so close! Can you post the code you'd use to add the "picture" element to get ImageNodeView to dynamically display a different image for each node? Is that how it is done? I'm trying to add the following in CreateNodeFromObject:

node.drawingInformation = new NodeDrawingInformation();

List<XmlElement> drawingInformation = new List<XmlElement>();

XmlDocument xdoc = new XmlDocument();

xdoc.LoadXml(

"<picture xmlns=\"InformationConnectionsEngine." +

"defaultTemplate\">" +

myObject.picture +

"</picture>");

drawingInformation.Add(xdoc.DocumentElement);

node.drawingInformation.Any = drawingInformation.ToArray();

Thanks!

--Aaron

Apr 30, 2011 at 5:56 PM

Good work-around! Thanks, that worked for me. If anyone knows how to make the <picture> node work correctly, please do post.

May 3, 2011 at 2:41 AM

Another way id to modify the code-behind of the XAML you create for your node:

- I'm assuming you have created your own design for a node, so oyu have a XAML and XAML.cs for this node.

- I pass information (such as image URLs or whatever else my node needs to display) between  my "CreateNode" function (or whatever name you gave this function) and my node's XAML through an XML string that I pass to the "Any" property, like this:

// set drawing information (name of the person in charge, his/her title,URL of the picture, etc.
List<XmlElement> xdoc = getDrawingInformation(personInCharge, personInChargeName, personInChargeTitle, personInChargeExt, personInChargeIDPictureURL, personInChargeRoom, personInChargeAssistant, personInChargeMobile, personInChargeSkype);
node.drawingInformation = new NodeDrawingInformation();
node.drawingInformation.Any = xdoc.ToArray();

Bonus, here is my function getDrawingInformation:

private List<XmlElement> getDrawingInformation(string personInCharge, string personInChargeName, string personInChargeTitle, string personInChargeExt, string personInChargeIDPictureURL, string personInChargeRoom, string personInChargeAssistant, string personInChargeMobile, string personInChargeSkype)
        {
            XNamespace iceNS = "InformationConnectionsEngine.data";
            XElement drawInfo = new XElement(iceNS + "drawingInformation",
                new XElement("longName", personInChargeName),
                new XElement("jobDescription", personInChargeTitle),
                new XElement("picture", personInChargeIDPictureURL),
                new XElement("room", personInChargeRoom),
                new XElement("officePhone", personInChargeExt),
                new XElement("mobilePhone", personInChargeMobile),
                new XElement("assistant", personInChargeAssistant),
                new XElement("skype", personInChargeSkype));
            XmlDocument xdoc = new XmlDocument();
            xdoc.LoadXml(drawInfo.ToString());
            
            List<XmlElement> list = new List<XmlElement>();
            foreach (XmlNode node in xdoc.DocumentElement.ChildNodes)
	        {
                list.Add((XmlElement)node);
	        }

            return

- now this XML (and the data, such as the picture url) is available to my node's XAML 

- On the code behind of my node XAML, you should have a NodeDrawingInformation function. Make sure you call "updateUI()" in this function, this is imporatnt:

 

 

public XElement NodeDrawingInformation
        {
            set
            {
                this.nodeDrawingInformation = value;
                this.updateUI();
            }
        }

- I built this function that extracts specific tag values form the XML I passed:

        /// <summary>
        /// this function retrieves the tag in the drawing information.
        /// </summary>
        /// <param name="tagName"></param>
        /// <returns></returns>
        private XElement getTag(string tagName)
        {
            XElement value = null;
            if (this.nodeDrawingInformation != null)
            {
                XElement tag = this.nodeDrawingInformation.Element(tagName);
                if (tag != null)
                {
                    value = tag;
                }
            }
            if ((value == null) && (this.styleDrawingInformation != null))
            {
                XElement tag = this.styleDrawingInformation.Element(tagName);
                if (tag != null)
                {
                    value = tag;
                }
            }
            return value;
        }

- Finally, the UpdateUI() function that is called everytime the node is refreshed looks like this (I only kept the code for the picture, but that is where you would update any other data in your node:

        /// <summary>
        /// this function updates the UI
        /// </summary>
        private void updateUI()
        {
            XElement pictureElement = this.getTag("picture");
            if(pictureElement != null) {
                this.Picture.Source = new BitmapImage(new Uri(pictureElement.Value));
            }

}

Hope this helps.

Notice that having the control of your data on the XAML side of each node (or even link) is very powerful.