Mindscape WPF Elements使用教程：构建超炫仪表盘（三）-控件新闻-慧都网

Mindscape WPF Elements使用教程：构建超炫仪表盘（三）

原创|其它|编辑：郝浩|2012-12-11 16:25:53.000|阅读 977 次

概述：在前面的文章中《WPF Elements构建超炫仪表盘（二）》中我们了解了要创建的仪表盘所包含的哪些模块，在本文中就来看看具体的创建步骤。

第一步：项目

运行VS2010，并且创建一个新的.NET 4.0 WPF应用程序。但是在开始之前，需要先添加一些组件，首先创建一个新的文件夹并命名为Lib，然后添加Caliburn.Micro.dll、System.Windows.Interactivity.dll 、the Microsoft.Windows.Shell.dll文件到这个文件夹下面；接下来，就是添加这些引用到你的项目中去，所以我们在这里将需要添加一个引用到System.ComponentModel.Composition ，这个会在稍后用到；当你在下载Caliburn.Micro.dll时就会有刚才在前文中提到的前面两个dll文件，因为Caliburn.Micro.dll将为我们处理窗口创建，主要用于创建自定义窗口chrome，完成设置之后你可以删除主要的窗口，想要删除这个，还需要从xaml删除StartupUri 。

第二步：商业模型

就像在前面的文中提到的那样，所有控件的主要数据来源来自一个订单列表，所以需要创建一个名为“模型”的文件夹，然后添加一个类来表示一个订单，同时这个订单里存储着客户名称、购买的产品类型、购买日期、采购的成本和部门、客户来自哪个国家。当然如何存储这些值是由你决定，产品类型例如可以是一个字符串或是其他，另一个模型对象将持有该产品的更多信息，Order类应该公开这些以绑定到视图中的值与属性。

第三步：可视化的模型

现在我们添加此可视化模型的视图，这个将是我们称之为DashboardView的用户控件，Caliburn Micro使用命名约定来找到一个可视化模型的视图，这个模型名称应以“ViewModel”结束。用户控件的名称以“View”结尾，他们都以一样的名称开始，在这个示例中是“Dashboard”。当遵循MVVM 模式时，为了不在后面的代码中编写任何的代码，所以删除了DashboardView.xaml.cs 文件。

第四步：引导程序

为了将Caliburn Micro插入到应用程序中，需要引导程序，所以向项目中添加一个新的DashboardBootstrapper 类和扩展的Caliburn Micro引导程序。

public class DashboardBootstrapper : Bootstrapper<DashboardViewModel>
{
}

传统的引导应用程序会告知Caliburn Micro哪个模型将会在应用程序启动时使用，这就是我们现在所需要做的引导程序，我们很快就会回到这来集成一个自定义的窗口管理器。下面就是添加一个实例的启动加载器到App.xaml：

<ResourceDictionary>

  <ResourceDictionary.MergedDictionaries>

    <ResourceDictionary>

      <local:DashboardBootstrapper x:Key="bootstrapper" />

    </ResourceDictionary>

  </ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

  现在应用程序可以使用Caliburn Micro提供的所有东西，这时运行应用程序，将会显示一个微小的空白窗口。

第五步：窗口管理器

Caliburn Micro管理着窗口的创建以及关联到合适的视图模型，但是有的时候，你想控制一些窗口的属性，窗口管理器就是用在这些地方，添加一个新类到DashboardWindowManager项目，延长Caliburn Micro indowManager类，在这里你可以覆盖EnsureWindow方法，调用基本实现，然后在返回的窗口设置任何的属性。我已经手动设置SizeToContent来实现WindowState来最大化，接下来，回到你的启动加载器然后像这样进行编辑：

public class DashboardBootstrapper : Bootstrapper<DashboardViewModel>
{
  private CompositionContainer container;
 
  protected override void Configure()
  {
    container = new CompositionContainer(new AggregateCatalog(AssemblySource.Instance.Select(x => new AssemblyCatalog(x)).OfType<ComposablePartCatalog>()));
 
    CompositionBatch batch = new CompositionBatch();
 
    batch.AddExportedValue<IWindowManager>(new DashboardWindowManager());
    batch.AddExportedValue<IEventAggregator>(new EventAggregator());
    batch.AddExportedValue(container);
 
    container.Compose(batch);
  }
 
  protected override object GetInstance(Type serviceType, string key)
  {
    string contract = string.IsNullOrEmpty(key) ? AttributedModelServices.GetContractName(serviceType) : key;
    var exports = container.GetExportedValues<object>(contract);
 
    if (exports.Count() > 0)
    {
      return exports.First();
    }
 
    throw new Exception(string.Format("Could not locate any instances of contract {0}.", contract));
  }
 
  protected override IEnumerable<object> GetAllInstances(Type serviceType)
  {
    return container.GetExportedValues<object>(AttributedModelServices.GetContractName(serviceType));
  }
 
  protected override void BuildUp(object instance)
  {
    container.SatisfyImportsOnce(instance);
  }
}

里面所看见的大部分是伴随着Caliburn Micro一起带过来的，在这里重要的是如何添加仪表的自定义模版的窗口管理器到配置方法中，在这个过程中不要忘记了引导程序的更改，的添加一个导出属性到DashboardViewModel类，像下面这样：

[Export(typeof(DashboardViewModel))]

回到仪表管理窗口管理器，我们可以做其他一些有用的东西比如设置应用程序图标并应用自定义窗口chrome，这些可能是你要添加到一个应用程序中的一些，但是关于窗口管理区这个主题，现在是提到的好时机，可以向项目中添加一个图标文件，然后再使用BitmapFrame。

创建窗口的图标属性进行设置，对于自定义窗口，可以使用Microsoft.Windows.Shell dll文件，在App.xaml中，我创建了窗口的风格，然后我发现在窗口管理器找到之后用到了应用窗口中，此外还需要附加一些事件处理程序，可以使用下面的代码实现。下面就是窗口管理器的最终程序：

public class DashboardWindowManager : WindowManager
{
  private Window _window;
 
  protected override Window EnsureWindow(object model, object view, bool isDialog)
  {
    _window = base.EnsureWindow(model, view, isDialog);
    _window.SizeToContent = SizeToContent.Manual;
    _window.WindowState = WindowState.Maximized;
    _window.Style = _window.FindResource("CustomWindowStyle") as Style;
 
    Uri icon = new Uri("../../WpfElements.ico", UriKind.Relative);
    _window.Icon = BitmapFrame.Create(icon);
 
    _window.CommandBindings.Add(new CommandBinding(SystemCommands.CloseWindowCommand, OnSystemCommandCloseWindow));
    _window.CommandBindings.Add(new CommandBinding(SystemCommands.MinimizeWindowCommand, OnSystemCommandMinimizeWindow));
    _window.CommandBindings.Add(new CommandBinding(SystemCommands.MaximizeWindowCommand, OnSystemCommandMaximizeWindow));
    _window.CommandBindings.Add(new CommandBinding(SystemCommands.RestoreWindowCommand, OnSystemCommandRestoreWindow));
 
    return _window;
  }
 
  private void OnSystemCommandCloseWindow(object sender, ExecutedRoutedEventArgs e)
  {
    SystemCommands.CloseWindow(_window);
  }
 
  private void OnSystemCommandMinimizeWindow(object sender, ExecutedRoutedEventArgs e)
  {
    SystemCommands.MinimizeWindow(_window);
  }
 
  private void OnSystemCommandMaximizeWindow(object sender, ExecutedRoutedEventArgs e)
  {
    SystemCommands.MaximizeWindow(_window);
  }
 
  private void OnSystemCommandRestoreWindow(object sender, ExecutedRoutedEventArgs e)
  {
    SystemCommands.RestoreWindow(_window);
  }
}

第六步：

最后在DashboardView.xaml中，可以得到粗略的仪表盘了，在下一课中，将会讲到控件的布局来优化仪表效果。在本次的内容中，添加了应用程序的特定资源到App.xaml中。在大型的应用程序中，你可以添加类似这样的资源到一个或值多个库中。在这篇文章的最后，我将在每个控件后添加一个彩色的矩形，小效果如下：

构建超炫仪表盘（三） - Mindscape WPF Elements使用教程连载