[Map 3D开发实战系列] Map Resource Explorer 之五界面设计

目录

[Map 3D开发实战系列] Map Resource Explorer 背景介绍--Kick off

[Map 3D开发实战系列] Map Resource Explorer 之二-- 运行和调试

[Map 3D开发实战系列] Map Resource Explorer 之三-- 添加AutoCAD风格的Palette界面

[Map 3D开发实战系列] Map Resource Explorer 之四-- Map3D开发中的WPF

好了，前面说了那么多，终归是准备工作，现在开始做实际工作，来切实创建一个基于WPF的界面。我们需要创建一个AutoCAD风格的Palett，放置一个TreeView控件用来显示我们的所有资源。然后需要一个ToolBar，加一个刷新按钮。

在Map 3D中支持的资源类型为FeatureSource，LayerDefiniation和SymbolDefinition。同一个文档中可能会有多个FeatureSource，多个图层LayerDefiniation和SymbolDefinition，所有我们可以考虑按照资源类型类组织资源在TreeView中的显示。自然还需要一个Toolbar来放置常用操作按钮，比如刷新显示。

下面来实现上面的界面设计，我们需要添加一个palette并加入一个WPF的用户控件。为了更好的组织项目，我把界面相关的类放置在UI目录里。首先创建一个WPF User Control，拖一个WPF TreeView控件和Toolbar和Context Menu进去。还需要添加一些图片来作为Toolbar按钮上用的图片，并把这些图片编译为资源：

下面是XAML代码：

<UserControl x:Class="MapResourceExplorer.UI.ExplorerForm"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Height="300" Width="300">
    <Grid>
        <TreeView Margin="12,44,12,20" Name="treeView1" PreviewMouseRightButtonDown="treeView1_PreviewMouseRightButtonDown">
            <TreeView.ItemContainerStyle>
                <Style TargetType="{x:Type TreeViewItem}">
                    <EventSetter Event="TreeViewItem.PreviewMouseRightButtonDown" Handler="TreeViewItem_PreviewMouseRightButtonDown"/>
                </Style>
            </TreeView.ItemContainerStyle>
            <TreeView.CommandBindings>


            </TreeView.CommandBindings>
            <TreeView.ContextMenu>
                <ContextMenu Name="ResOpMenu" ContextMenuOpening="ContextMenu_Opening">
                    <MenuItem Header="Show Resource Content" Click="ShowResourceContent_Clicked"/>
                    <MenuItem Header="..."/>
                </ContextMenu>
            </TreeView.ContextMenu>

            <TreeViewItem Header="FeatureSource" >
                <TreeViewItem Header="Library://1....." ToolTip="" ></TreeViewItem>
            </TreeViewItem>
            <TreeViewItem Header="Layer Definition">
                <TreeViewItem Header="Library://1....."></TreeViewItem>
            </TreeViewItem>

        </TreeView>

        <ToolBar Height="26" Margin="12,12,12,0" Name="toolBar1" VerticalAlignment="Top" >
            <Button Name="Refresh"  Click="RefreshButton_Clicked">
                <Image Source="Images\refresh.gif" Height="16" Width="16"></Image>
            </Button>
            <Button Name="EditXml">
                <Image Source="Images\edit-xml.png" Height="16" Width="16"></Image>
            </Button>
            <Button Name="About">
                <Image Source="Images\about.png" Height="16" Width="16"></Image>
            </Button>
            <Button Name="Help">
                <Image Source="Images\help.png" Height="16" Width="16"></Image>
            </Button>
        </ToolBar>

    </Grid>
</UserControl>

为了把WPF用户控件加入到Palette中，可以用前面文章中说的AddVisual方法。这里我用了Add方法，不过这个Add方法只接受System.Windows.Forms.Control类型的控件，所以需要弄一个windows用户控件做为外套。新建一个Windows 用户控件，界面上不用放什么控件，其中用到了System.Windows.Forms.Integration.ElementHost类，需要添加引用PresentationFramework.dll.后台代码如下：

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Drawing;
using System.Data;
using System.Linq;
using System.Text;
using System.Windows.Forms;
using System.Windows.Forms.Integration;

namespace MapResourceExplorer.UI
{
    public partial class Panel : UserControl
    {
        private ExplorerForm _form;

        public Panel()
        {
            InitializeComponent();

            // Create the ElementHost control for hosting the
            // WPF UserControl.
            ElementHost host = new ElementHost();
            host.Dock = DockStyle.Fill;

            // Create the WPF UserControl.
            _form = new ExplorerForm();

            // Assign the WPF UserControl to the ElementHost control's
            // Child property.
            host.Child = _form;

            // Add the ElementHost control to the form's
            // collection of child controls.
            this.Controls.Add(host);
        }

        internal ExplorerForm Child
        {
            get
            {
                return _form;
            }
        }
    }
}

然后来创建autoCAD风格的Palette，这里创建了一个ResourceExplorerPalette类，并用Singleton模式来保证只有一个实例。对应Palette的风格样式可以由枚举类型PaletteSetStyles指定：

            //Set the properties of paletteSet
            _paletteSet.Style = PaletteSetStyles.NameEditable |
                PaletteSetStyles.ShowPropertiesMenu |
                PaletteSetStyles.ShowAutoHideButton |
                PaletteSetStyles.UsePaletteNameAsTitleForSingle |
                PaletteSetStyles.Snappable |
                PaletteSetStyles.ShowCloseButton;

在这个类中定义了Show方法，来显示这个自定义的palette。完整的代码如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using Autodesk.AutoCAD.Windows;

namespace MapResourceExplorer.UI
{
    internal class ResourceExplorerPalette
    {
        private static string PaletteName = @"Resource Explorer";

        private PaletteSet _paletteSet;
        private Panel _panel;

        /// <summary>
        /// Using Singleton pattern to make sure there'll be only one instance of this class.
        /// </summary>

        private static ResourceExplorerPalette _instance;
        public static ResourceExplorerPalette Instance
        {
            get
            {
                if (_instance == null)
                {
                    _instance = new ResourceExplorerPalette();

                } return _instance;
            }
        }

        private ResourceExplorerPalette()
        {
            _paletteSet = new PaletteSet(PaletteName);

            //Set the properties of paletteSet
            _paletteSet.Style = PaletteSetStyles.NameEditable |
                PaletteSetStyles.ShowPropertiesMenu |
                PaletteSetStyles.ShowAutoHideButton |
                PaletteSetStyles.UsePaletteNameAsTitleForSingle |
                PaletteSetStyles.Snappable |
                PaletteSetStyles.ShowCloseButton;

            _panel = new Panel();
            _paletteSet.Add(PaletteName, _panel);
        }


        public PaletteSet PaletteSet
        {
            get
            {
                return _paletteSet;
            }

        }


        public ExplorerForm ExplorerForm
        {
            get
            {
                return _panel.Child;
            }

        }

        /// <summary>
        /// Show or hide the UI.
        /// </summary>
        public void Show()
        {
            _paletteSet.Visible = true;
            _paletteSet.KeepFocus = true;

            ExplorerForm.ForceRefresh();

        }


    }
}

好了，基本的架子搭起来了，可以来定义一个命令来显示这个palette界面了，在前文中提到的Commands类里添加一个方法来定义一个自定义的AutoCAD命令，这样通过netload命令加载这个程序集后，就可以通过输入自定义命令来显示这个自定义的palette了：

        [CommandMethod("ShowResourceExplorer")]
        public void ResourceExplorerCommand()
        {
            ResourceExplorerPalette.Instance.Show();
        }

今天先写到这儿，下来再做具体的关于资源操作的实现。

完整代码在google code，你可以在线浏览或者通过SVN下载自己测试一下。http://code.google.com/p/map-resource-explorer/

Cheers,

峻祁连