03【ArcGIS Pro SDK for Microsoft .NET】系统界面布局及定制菜单

分手后的思念是犯贱 2022-12-25 12:53 135阅读 0赞

### 写在前面 ###

前面的文章介绍了ArcGIS Pro SDK for Microsoft .NET开发环境的搭建，并且我们为创建的demo增加了自己的登陆界面，但是里面的登录逻辑并没有给大家进行详细的介绍，因为那些东西其实是完完全全属于WPF编程的知识，跟Pro SDK关系不大。这篇文章我们来给大家介绍下如何在ArcGIS Pro SDK for Microsoft .NET开发过程中，为我们新建的项目demo进行系统布局，并添加相应的菜单选项。

### 操作步骤 ###

1、通过第一篇文章中创建demo的方式重新创建一个项目demo，然后我们启动项目后选择一个已有的Pro项目工程文件进入，进入之后就是该项目系统默认的系统布局，如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 1][]

上述的系统布局对于使用过ArcGIS Pro的伙伴们来说简直太熟悉了，这就是Pro软件的布局啊，仅仅是改变了一个左上角的favicon图标而已，将原来Pro的图标换成了一个项目demo创建后自带的绿色圆形的图标。

接下来我们要做的就是改变Pro自带的这种默认布局。主要是去除顶部菜单栏中的所有菜单项，然后加进去我们自定义的菜单，但是我们并不会改变其他的布局，比如左侧的内容面板、中间的地图区域面板、右侧的工具面板等，这些面板的定制我们后续的文章继续给大家介绍。

2、然后在项目根目录下的"ConfigurationManager1.cs"文件中重写OnUpdateDatabase方法，此方法具体的实现代码如下：

#region Override DAML Database
    
            protected override void OnUpdateDatabase(XDocument database)
            {
                var nsp = database.Root.Name.Namespace;
                // select all elements that are tabs
                var tabElements = from seg in database.Root.Descendants(nsp + "tab") select seg;
                // collect all elements that need to be removed
                var elements = new HashSet<XElement>();
                foreach (var tabElement in tabElements)
                {
                    // skip root and backstage elements
                    if (tabElement.Parent == null
                        || tabElement.Parent.Name.LocalName.StartsWith("backstage"))
                        continue;
                    var id = tabElement.Attribute("id");
                    if (id == null) continue;
                    elements.Add(tabElement);
                }
                // remove the elements
                foreach (var element in elements)
                {
                    element.Remove();
                }
            }
    
    #endregion

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 2][]

3、此时启动项目，我们会发现菜单栏已经被清空了，如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 3][]

4、接下来我们添加一个菜单按钮。首先在VS中的项目根目录上鼠标右击，依次选择【添加 | 新建项 | ArcGIS Pro 按钮】，然后输入一个按钮名称，这时候你会发现在你的项目根目录下会创建一份以按钮名称为命名的cs代码文件，如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 5][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 6][]

5、然后在生成的按钮文件的cs代码中，找到按钮点击事件，添加如下代码，代码含义是当用户点击此按钮时会弹出一个包含有"Hello World"的弹窗：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 7][]

6、回到"ConfigurationManager1.cs"文件中，我们将OnUpdateDatabase方法中的下属代码替换为如下代码：

//原来的代码
    protected override void OnUpdateDatabase(XDocument database)
    {
       ...
       foreach (var tabElement in tabElements)
       {
          ...
          if (id == null) continue;
           
           
    //替换后的代码
    protected override void OnUpdateDatabase(XDocument database)
    {
       ...
       foreach (var tabElement in tabElements)
       {
          ...
          if (id == null || id.Value.StartsWith("MyConfiguration")) continue;//Skip our tabs

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 8][]

通过上图可以看到，其实就是替换了148行的那一行代码。

7、打开项目根目录下的"Config.daml"文件，我们来组织菜单的显示方式，最终的代码如下：

<ArcGIS defaultAssembly="ProConfigurationdemo2.dll" defaultNamespace="ProConfigurationdemo2" xmlns="http://schemas.esri.com/DADF/Registry" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://schemas.esri.com/DADF/Registry file:///C:/Program%20Files/ArcGIS/Pro/bin/ArcGIS.Desktop.Framework.xsd">
      <AddInInfo id="{4730c594-cc37-48de-ac91-e94536cbb3a3}" version="1.0" desktopVersion="2.5.22081">
        <Name>ProConfigurationdemo2</Name>
        <Description>ProConfigurationdemo2 description</Description>
        <Image>Images\AddinDesktop32.png</Image>
        <Author>esri</Author>
        <Company>Acme</Company>
        <Date>2020/11/13 14:11:11, 2020</Date>
        <Subject>Framework</Subject>
        
      </AddInInfo>
      <Configuration>
        <ConfigurationManager className="ConfigurationManager1" />
      </Configuration>
      <modules>
        <insertModule id="ProConfigurationdemo2_Module" className="Module1" autoLoad="false" caption="Module1">
          
          <tabs>
            <tab id="ProConfigurationdemo2_Tab1" caption="Test UI Tab" keytip="Z0">
              <group refID="ProConfigurationdemo2_Group1" />
            </tab>
          </tabs>
          <groups>
            <group id="ProConfigurationdemo2_Group1" caption="Group 1" appearsOnAddInTab="false" keytip="Z1">
              <button refID="ProConfigurationdemo2_TestButton1" size="large" />
            </group>
          </groups>
          <controls>
            
            <button id="ProConfigurationdemo2_TestButton1" keytip="Z3" caption="测试按钮" className="TestButton1" loadOnClick="true" smallImage="pack://application:,,,/ArcGIS.Desktop.Resources;component/Images/GenericButtonBlue16.png" largeImage="pack://application:,,,/ArcGIS.Desktop.Resources;component/Images/GenericButtonBlue32.png">
              <tooltip heading="Tooltip Heading">Tooltip text<disabledText /></tooltip>
            </button>
          </controls>
        </insertModule>
      </modules>
    </ArcGIS>

上述代码中对大家有用的就是16行到36行之间的代码。这中间的代码片段的包裹层级其实就是我们Pro SDK开发时的菜单包裹层级，简单理解的话依次是：tab->group->button。除此之外还有更加详细的包裹层级，详情请查看Pro SDK的官网API即可。

8、运行项目，最终项目如下所示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 9][]

### 需要注意的地方： ###

1、上述效果图中大家可以看到只有一个tab、一个group、一个button。如果想有多个的话直接在Config.daml文件中嵌套这些标签即可，比如下面这样子：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 10][]

2、按钮添加后默认的图标其实是Pro SDK包里自带的默认图标，就是一个蓝色的矩形框，如果想更改的话，可以自己下载16X16和32X32像素大小的图标文件，然后在VS中的项目根目录下的Images目录上鼠标右击，依次选择【添加 | 已有项】，然后选择自己下载的图标加载到Images文件目录中，最后单击Images目录中的图标文件，将其"生成操作"改为"AddInContent"，如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 11][]

如果不按照上述操作，你直接将图标下载到Images文件中，然后在VS中是看不到图标文件的，需要上述过程一样，将其进行手动添加。最后我们在Button按钮上，将图标地址属性改为Images目录即可，如下：

<button id="ImageRecognition_Btn_ImageMosaic" caption="影像拼接" keytip="Z2-2" className="ImageMosaic" loadOnClick="true" smallImage="Images/ImageMosaic16.png" largeImage="Images/ImageMosaic32.png">
              <tooltip heading="Tooltip Heading">Tooltip text<disabledText /></tooltip>
    </button>

其中的smallImage和largeImage属性就是控制图标地址的属性，最后的效果类似如下：

![20201201222616857.png][]

3、菜单按钮添加点击事件的时候，务必在VS中的项目根目录上右击，依次选择【添加 | 新建项 | ArcGIS Pro 按钮】来进行操作，然后可以将相应的按钮点击文件拖拽移动至其他的文件目录下。如果一开始直接在其他文件目录下鼠标右击添加按钮文件之后，会出现点击按钮时按钮点击事件不能触发的问题。这里面可能涉及到相关代码文件的命名空间问题，此处没有做过多的研究。

4、如果想实现点击一个菜单按钮，在项目系统的右侧面板直接打开一个Pro中ArcToolBoxes的工具面板的话，直接在按钮点击事件中添加如下代码即可：

protected override void OnClick()
            {
                //MessageBox.Show("样本导出");
    
                string input_points = "";
                string output_polys = "";
                //string buffer_dist = "2000 Meters";
                var param_values = Geoprocessing.MakeValueArray(input_points, output_polys);
    
                Geoprocessing.OpenToolDialog("ia.ExportTrainingDataForDeepLearning", param_values);
            }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 12][]

上述代码中的框选部分其实就是ToolBoxes中的具体工具名称，格式是"\[工具目录缩写\].\[工具具体名称\]"，比如上述代码，就是打开了Image Analyst(影像分析工具)下面的ExportTrainingDataForDeepLearning(样本导出)工具，最终结果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 13][]

工具名称的寻找方式：在Pro中找到具体的工具后，鼠标右击打开工具属性面板即可，如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 14][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 15][]

5、文章上述所有的操作步骤，都可以参考Pro SDK的官网文档，具体地址如下：

1、定制Pro菜单面板：
    https://github.com/esri/arcgis-pro-sdk/wiki/ProGuide-Configurations
    https://github.com/esri/arcgis-pro-sdk/wiki/ProGuide-Ribbon-Tabs-and-Groups
    
    2、代码自动激活ToolBoxes中的工具：
    https://github.com/esri/arcgis-pro-sdk/wiki/ProConcepts-Geoprocessing#open-the-tool-dialog-in-the-geoprocessing-pane

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70]: /images/20221120/96d6b684a7ce40d1aad7f183cdef2a7a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020120122204366.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2020120122213548.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201201222155137.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20201201222218229.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20201201222231148.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20201201222244156.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20201201222258267.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20201201222339847.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20201201222455792.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20201201222519314.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20201201222539938.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0,size_16,color_FFFFFF,t_70
[20201201222616857.png]: https://img-blog.csdnimg.cn/20201201222616857.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/20201201222658910.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 13]: https://img-blog.csdnimg.cn/20201201222714866.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 14]: https://img-blog.csdnimg.cn/20201201222730630.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0_size_16_color_FFFFFF_t_70 15]: https://img-blog.csdnimg.cn/20201201222743336.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1MTE3MDI0,size_16,color_FFFFFF,t_70