VS XAML Viewer Updated

The last week was a special week for me because we were releasing a new Deklarit upgrade first and second there were our company “Olympic Games” from Thursday to Saturday, our team was playing tennis, basket, soccer, volley, etc after work. So after the Olympic Games (on Sunday) I could not move my body anywhere J so I was watching TV and dedicated to finish a second version of the XAML Viewer.

I added some features and fixes:

 

 

  • Edit XAML in the viewer with the same syntax coloring, tips, outlining that in the default editor of VS. How you can add an existing editor in a toolwindow?  Dr Ex has the answer here.

 

  • Explicit “Text Mode” for the viewer. I mean the viewer can be bound to the buffer of a file or just to text. If you are editing text this is what I called "Text Mode"
  • Setup is complete now (you don't need extra commands after install)

 

  • In the first version, when you call to the XAML Viewer for a file, the viewer was bounded to the file, now it is bounded to the buffer of the opened document, so you don’t need to save the file in order to try how the changes affect the output. The text view of viewer is bounded to the same buffer of the document so if you change something in the viewer it is changed in the document.

 

 

  • In general Refresh is not needed anymore; I’m parsing when the XAML tab page is activated.
  • Rob told me that the viewer could not parse some valid files (for example when the XAML file had codebehind). He helped me with a solution for that so that this is working now. Thanks Rob
  • Chris Sells suggested add the Visual Tree to the viewer and he pointed to  this post that shows how to do the work. I accepted the suggestion and I had implemented this feature in this way:

 

    • I changed the base code in this way:  

      public static class VisualUtility

      {

 

            public static void GetVisualTreeInfo(Visual element, XmlWriter writer)

            {

                  if (element == null)

                  {

                        throw new ArgumentNullException("element");

                  }

                 

                  writer.WriteStartElement("VisualElement");

                        writer.WriteElementString("Type", element.GetType().ToString());

 

                        VisualCollection vc = VisualOperations.GetChildren(element);

                        if (vc != null && vc.Count > 0)

                        {

                              foreach (Visual v in vc)

                              {

                                    GetVisualTreeInfo(v, writer);

                              }

 

                        }

                  writer.WriteEndElement();

 

            }

           

 

}

 

    • The difference is that this code write the visual tree in XML.
    • I was thinking in read this XML and show it a tree view (winform), but I’m learning XAML now!! So I decided to use a XSL in order to generate XAML.

When the visual tree tab is selected the XML is generated and after that the visualtree.xsl is applied in order to get a XAML (in a MemoryStream) and then load this XAML in the tab page. (the tab page has a ElementHost in order to show XAML inside a windows form)

I’m not a graphic designer so I hope that somebody modify my initial visualtree.xsl (it is in the installation folder) to get a better XAML for the Visual Tree. Now it is just a XAML Table.          

 

 

 

Download msi  

 

4 Comments

  • I'm able to get the XAML Viewer to appear, but when I resize it to a reasonable size, the viewer portion never gets any bigger. Also, it never shows anything but the (tiny) Avalon shield, and not the XAML I've actually got open.

  • Chris,

    I didn't update correctly the msi yesterday (sorry ;) , now yes it was updated. I did some changes in the layout in order to try fix this problem (that I could not reproduce but I known is happening in several machines)





    Regards,

    Gaston

  • Whenever I hit the Xaml button, or hit Preview Xaml, a new window opens to display it (with the devenv icon on the taskbar).



    I don't really mind this, but the screenshots show the display within the frame - any ideas? (I removed and reinstalled a couple of times).

  • And then, he noticed that the top level element name was "Window", and wondered if that might have something to do with it.



    And guess what? :)

Comments have been disabled for this content.