Question

我有一个应用程序，我使用XAML来表示我自己的自定义对象图。它与WPF / Silverlight对象模型完全不同（并且不用于UI设计），但可以以有意义的方式可视化对象图。我想要做的是为Visual Studio添加一个设计器扩展来可视化我的特定对象，但我一直无法找到有关此主题的信息。有人能指出我正确的方向吗？

我的主要目标是对当前的XAML进行一些简单的视觉反馈;我还没有需要设计师支持视觉编辑。如果有人好奇，那就是模拟工业机械的工具;我使用XAML来定义机器的组件及其连接，但我目前必须运行完整的模拟以查看机器的外观。

Answer 1

您需要创建一个Visual Studio扩展（vsix）来解析文件并可视化内容。您有两个选项，Visual Studio 加载项或Visual Studio包（请参阅问题1139294中的差异的详细信息）。第一个稍微容易开始，但后者会给你更多的控制，所以我建议如果你将来有编辑记录的话。

首先下载用于创建Visual Studio扩展的SDK，即Visual Studio 2010 SP1 SDK。对于较旧的非SP1版本，请单击here。

您需要熟悉创建Visual Studio包。有关Microsoft教程，请参阅Walkthrough: Creating a VSPackage。如果你按照教程，你应该拥有所需的一切从菜单命令触发自定义组件。所以现在你真的需要是一个例如一个普通的WPF组件，可以解析/可视化您的自定义XAML。您可能还需要将自定义文件类型与组件相关联。为此，您需要ProvideEditorExtensionAttribute。

没有类似示例，请参阅The IDE Sample Editor中的samples library。这会创建一个小文件编辑器自定义文件类型，这与您要求的接近。用编辑器替换文件编辑器组件和相关的文件类型，你差不多完成了！

Answer 2

另请参阅以下内容http://code.msdn.microsoft.com/windowsdesktop/Designer-View-Over-XML-20a81f17，了解您想要的一个好例子。

Answer 3

ProvideXmlEditorChooserDesignerViewAttribute是您正在寻找的东西，尽管您必须做些奇怪的事情才能使其以这种方式工作。 https://msdn.microsoft.com/en-us/library/microsoft.visualstudio.modeling.shell.providexmleditorchooserdesignerviewattribute_properties.aspx

我只是在自己的扩展程序中使用了它，这非常容易（一旦您有了魔术公式）。通过VS可扩展性示例“带有工具箱的编辑器”（https://github.com/Microsoft/VSSDK-Extensibility-Samples/tree/master/Editor_With_Toolbox），请按照以下步骤操作：

将自定义文件扩展名从.tbx更改为.xaml。这不太困难，主要是用.xaml查找+替换.tbx并将tbx.tbx文件更改为xaml.xaml并在解决方案的每个文件中查找+替换。这会将您的EditorFactory标记为为.xaml文件提供编辑器。

打开EditorPackage.cs并删除ProvideEditorExtension和ProvideEditorLogicalView属性。将它们替换为这些属性（显然，将存根字符串替换为您的实际字符串）。

[ProvideXmlEditorChooserDesignerView("UnimportantDesignerViewName", "xaml",
    LogicalViewID.Designer, 10000,
    DesignerLogicalViewEditor = typeof(EditorFactory),
    Namespace = "YourNamespace",
    MatchExtensionAndNamespace = true)]
[ProvideXmlEditorChooserDesignerView("UnimportantDesignerViewName_Enforced", "xaml",
    LogicalViewID.Designer, 10001,
    DesignerLogicalViewEditor = typeof(EditorFactory))]
[ProvideEditorLogicalView(typeof(EditorFactory), LogicalViewID.TextView)]
[ProvideEditorLogicalView(typeof(EditorFactory), LogicalViewID.Code)]
[ProvideEditorLogicalView(typeof(EditorFactory), LogicalViewID.Designer)]
[ProvideEditorLogicalView(typeof(EditorFactory), LogicalViewID.Debugging)]

打开EditorFactory.cs并编辑CreateEditorInstance方法。在这里，您将打开pszMkDocument filepath参数指定的.xaml文件，并验证该文件是否属于您的文件（例如，它使用您的架构或其他内容）。如果是这样，则输出您的EditorFactory Guids并返回S_OK。如果不是（例如，如果它是WPF .xaml文件），则输出Guid.Empty并返回VS_E_UNSUPPORTEDFORMAT。

string extension = System.IO.Path.GetExtension(pszMkDocument);
if (extension.Equals(".xaml", StringComparison.OrdinalIgnoreCase))
{
    using (System.Xml.XmlReader reader = System.Xml.XmlReader.Create(pszMkDocument))
    {
        reader.MoveToContent();
        if (reader.NodeType == System.Xml.XmlNodeType.Element)
        {
            if (reader.NamespaceURI.Equals("YourNamespace", StringComparison.OrdinalIgnoreCase))
            {
                EditorPane newEditor = new EditorPane();
                ppunkDocView = Marshal.GetIUnknownForObject(newEditor);
                ppunkDocData = Marshal.GetIUnknownForObject(newEditor);
                pbstrEditorCaption = "";
                return VSConstants.S_OK;
            }
        }
    }
}
return VSConstants.VS_E_UNSUPPORTEDFORMAT;

我通过Avalonia GitHub代码存储库（https://github.com/AvaloniaUI/AvaloniaVS/blob/master/src/AvaloniaVS/Infrastructure/AvaloniaPackage.cs）碰到了这个神奇的属性公式，所以非常感谢那些家伙弄清楚了这一点。我刚刚在VS 2017社区中实现了这一点，对我来说，它就像是一种魅力。对于那些偶然发现要完成同样神秘任务的人，祝您好运。 =）

Visual Studio自定义XAML设计器

3 个答案: