[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,
峻祁连
