Visual Studio 自定义 XAML 设计器

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 版本，请单击此处 。

您需要熟悉如何创建 Visual Studio 包。
有关 Microsoft 教程，请参阅演练：创建 VSPackage。
如果您按照教程进行操作，您应该拥有所需的一切
从菜单命令触发自定义组件。所以现在你们真的
需要的是一个可以解析/可视化您的自定义 XAML 的普通 WPF 组件。
您可能还需要将自定义文件类型与组件相关联。为此，您需要 提供编辑器扩展属性。

没有什么比示例更好的了，因此请参阅 IDE 示例
示例库中的编辑器。这将创建一个小型文件编辑器自定义文件类型，这与您所要求的很接近。将文件编辑器组件和关联的文件类型替换为您的编辑器，您就快完成了！

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），请按照以下步骤操作：

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

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

   [ProvideXmlEditorChooserDesignerView("UnimportantDesignerViewName", "xaml",
       LogicalViewID.Designer，10000，
       DesignerLogicalViewEditor = typeof(EditorFactory),
       命名空间 = "你的命名空间",
       MatchExtensionAndNamespace = true）]
   [ProvideXmlEditorChooserDesignerView("UnimportantDesignerViewName_Enforced", "xaml",
       逻辑视图ID.设计器，10001，
       DesignerLogicalViewEditor = typeof(EditorFactory))]
   [ProvideEditorLogicalView(typeof(EditorFactory), LogicalViewID.TextView)]
   [ProvideEditorLogicalView(typeof(EditorFactory), LogicalViewID.Code)]
   [ProvideEditorLogicalView(typeof(EditorFactory), LogicalViewID.Designer)]
   [ProvideEditorLogicalView(typeof(EditorFactory), LogicalViewID.Debugging)]
   

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

   字符串扩展 = System.IO.Path.GetExtension(pszMkDocument);
   if (extension.Equals(".xaml", StringComparison.OrdinalIgnoreCase))
   {
       使用 (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 = "";
                   返回 VSConstants.S_OK；
               }
           }
       }
   }
   返回 VSConstants.VS_E_UNSUPPORTEDFORMAT；
   

我通过 Avalonia GitHub 代码存储库偶然发现了这个神奇的属性公式（https://github.com/AvaloniaUI/AvaloniaVS/blob/master/src/AvaloniaVS/Infrastruct/AvaloniaPackage.cs），非常感谢那些人解决了这个问题。我刚刚在 VS 2017 Community 中实现了这个，它对我来说就像一个魅力。祝任何偶然发现这个尝试完成同样神秘任务的人好运。 =)