使用ShowMeTheXAML来展示XAML代码

起因

使用MaterialDesignThemes时，发现有个功能不错，就是显示控件的代码，

一开始我以为这个功能是程序里写死的，人工把该控件的代码添加到一个富文本框中，然后点击控件显示出来。后来看了看MD的源码，发现并不是，它用到一个叫ShowMeTheXAML的插件。于是找到ShowMeTheXAML插件，学习使用一下。

---

ShowMeTheXAML

• Github源码：ShowMeTheXAML

安装

1. 安装MSBuild包，

PM> Install-Package ShowMeTheXAML.MSBuild

当然也可以图形化操作在NuGet中直接搜索ShowMeTheXAML，找到MSBuild安装即可，

这两操作都会给你装上ShowMeTheXAML 基础包。

2. 在App.xaml.cs中添加以下代码，

protected override void OnStartup(StartupEventArgs e)
{
    XamlDisplay.Init();
    base.OnStartup(e);
}

3. 这步是可选的，由于默认的代码显示样式朴素，如果你想让它变得好看，那就要调它的样式。要安装阿瓦隆包（Avalon），

PM> Install-Package ShowMeTheXAML.AvalonEdit

装了阿瓦隆包后，在App.xaml中添加一下资源词典，

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="pack://application:,,,/ShowMeTheXAML.AvalonEdit;component/Themes/xamldisplayer.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

之后就可以使用了。

使用

原始的使用方法非常简单，我先用XAML写一个简单的界面，XAML代码如下：

    <StackPanel>
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="年龄:"/>
            <TextBlock Text="20"/>
        </StackPanel>
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="性别:"/>
            <RadioButton GroupName="gender" Content="男"/>
            <RadioButton GroupName="gender" Content="女"/>
        </StackPanel>
    </StackPanel>

运行效果：

然后添加ShowMeTheXAML的命名空间引用后，用XamlDisplay标签将控件包起来：

   <smtx:XamlDisplay UniqueKey="SomeUniqueString">
        <StackPanel>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="年龄:"/>
                <TextBlock Text="20"/>
            </StackPanel>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="性别:"/>
                <RadioButton GroupName="gender" Content="男"/>
                <RadioButton GroupName="gender" Content="女"/>
            </StackPanel>
        </StackPanel>
    </smtx:XamlDisplay>

运行效果：

非常简单的调用，只需要外部包一层标签，就能显示标签内的代码了。

修改样式

如果文章到这里就结束了，那就是把作者ReadMe里的内容翻译了一下。
当然这也没问题，但是我想达到的是文章开头图中的效果，而且在我看了MD中的实现后略麻烦，我也不想花大功夫去折腾这个东西，所以切回到MaterialDesignThemes的源码。
源码Git链接
它做的就是在App.xaml中设置了统一样式，作用于全程序的smtx:XamlDisplay，（它装了阿瓦隆包）简单放个App.xaml中的代码图：

当然它的样式代码非常长，有上百行，并且有部分代码是依赖工程中的其他文件的，直接复制下来还跑不了。于是我做了一定删减（其实就是裁剪代码，使得它能以较少的代码达到上面的效果）。
这个操作就像，我觉得山上有一颗树挺好看，想把它带回家，但是这棵树是长在土里的，所以我就应该把整座山给搬回家？当然不是，我要做的是在保证这棵树活着的前提下，尽量少挖土，少伤及根茎，把它给挖出来。

这个操作尤其是在使用一些开源的大工程中，经常会用到。因为大工程就像这一座山，里面有一个模块你觉得不错，这个模块就像这棵树。但是这个模块的依赖关系很多，就需要你慢慢地去裁剪。

裁剪后的Demo链接：ShowMeTheXAMLDemo

运行效果：

裁剪过程中，主要的步骤：

• 将App.xaml中的Style部分代码复制到自己工程中，这时会报一些错，部分标签无法识别，就需要你添加依赖空间的引用
• 有些标签用到了其他工程文件的方法，你将对应文件拷过来即可，拷的同时记得修改命名空间和你引用的一致
• 以上步骤做完之后，基本上可以运行了，但是Copy按钮是不可用状态。这是因为Copy命令是WPF自带定义的，但是业务逻辑执行需要用户实现（这边默认是原生的路由命令，需要在Binding的Executed中添加业务逻辑代码）。而MaterialDesignThemes是在主窗体的XAML中添加了一个CommandBinding来监控该命令，并在Executed中添加了OnCopy来实现复制）。在MainWindow的XAML中添加绑定，后台添加OnCopy的实现即可。

---

小结

到这里，ShowMeTheXAML的基本使用和移植算是完成了。你可以在XAML中调参来修改样式。