Visual Studio Custom XAML Designer

Question

I have an application where I'm using XAML to represent my own custom object graph. It's quite different from the WPF/Silverlight object model (and not used for UI design), but it is possible to visualize the object graph in a meaningful way. What I'd like to do is add a designer extension to Visual Studio to visualize my specific objects, but I've been having trouble finding information on this topic. Could anybody point me in the right direction?

My main goal is to have some simple visual feedback of the current XAML; I'm not yet at a point where I need the designer to support visual editing. If anybody is curious, it's a tool for simulating industrial machinery; I use XAML to define the machine's components and their connections, but I currently have to run the full simulation to see what the machine looks like.

Answer 1

You need to create a Visual Studio extension (vsix) that parses the file and visualizes the content. You have two options, a Visual Studio Add-In or a Visual Studio Package (see details of differences in question 1139294). The first one is slightly easier to start with, but the latter will give you more control so I recommend it if you have editing in mind in the future.

Start by downloading SDK for creating Visual Studio extensions, aka Visual Studio 2010 SP1 SDK. For the older non SP1 version click here.

You need to familiarize yourself with creating Visual Studio packages. For a Microsoft tutorial see Walkthrough: Creating a VSPackage. If you follow the tutorial you should have everything needed to trigger a custom component from a menu command. So now all you really need is a e.g. a normal WPF component that can parse/visualize your custom XAML. You also probably need to associate your custom filetype with your component. For this you need a ProvideEditorExtensionAttribute.

There's nothing like a sample, so see The IDE Sample Editor from the samples library. This creates a small file editor custom file types, which is close to what you are asking. Replace the file editor component and the associated file type with your editor and you're almost done!