XAMLFinance – 跨平台 WPF、Silverlight 和 WP7 应用程序

1. 在每个框架中使用不同的控件。您通常会发现有多种方式可以向用户呈现相同的界面。
2. 查找缺失控件的实现，例如，您可以在互联网上找到许多缺失的控件： 
   1. 一个Silverlight GroupBox 控件 
   2. 一个Silverlight 菜单 
   然而，如果原始控件作者没有考虑跨平台开发，您可能会发现 API 与等效的 WPF 控件不兼容。 
3. 根据 WPF API 实现您自己的 Silverlight 控件。根据所讨论的 WPF 控件，这可能是一项相当漫长的任务。过去我曾编写过与 WPF 兼容的 Silverlight 工具栏和多级菜单。
4. 使用源代码移植 WPF 控件。例如，有许多 WPF Toolkit 控件可以相对容易地移植到 Silverlight。同样，有许多 Silverlight Toolkit 控件可以轻松移植到 WP7 版 Silverlight。 

常见陷阱

第一个是默认的 BindingMode。在 Silverlight 中，它是 BindingMode.OneWay，这意味着默认情况下，对模型的更改会更新 UI，但反之则不然。对于 WPF，默认是 BindingMode.Default……这意味着，这取决于！默认绑定模式由依赖属性元数据定义。这是一个令人困惑的差异，但可以通过始终在绑定上显式设置 BindingMode 来轻松解决。

接下来是控件生命周期

在 WPF 中，OnApplyTemplate 在 Loaded 事件触发之前被调用，而在 Silverlight 中，这不保证，并且 OnApplyTemplate 通常最后发生。如果您使用 OnApplyTemplate 连接控件的 UI，在 XAML 标记中定位元素，这可能会有问题。在 Silverlight 中，此逻辑可能不会在 Loaded 事件中的用户逻辑之前被调用。有方法可以解决此问题；Page Brooks 描述了一种强制生命周期遵循 WPF 事件顺序的方法。

最后，XAML 资源，如果您在 WPF 项目中使用文件链接方法将 XAML 资源链接到 WPF 解决方案中，然后构建项目，再用 ILSpy 检查程序集，您会发现 XAML 资源始终位于程序集的根目录中，无论它们被放入哪个项目文件夹。对于需要 Themes/generic.xaml 文件的自定义控件来说，这是灾难性的！

解决此问题的一个很好的方案，由 Alan Mendelevich 提供，是将所有 XAML 资源放在项目根目录中，然后使用 MergedDictionaries 将所需资源包含在 generic.xaml 文件中： 

<ResourceDictionary
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <ResourceDictionary.MergedDictionaries>
     <ResourceDictionary Source="/WpfControl;component/Themes/MyTemplatedControl.xaml" />
  </ResourceDictionary.MergedDictionaries>
</ResourceDictionary>

桌面 WPF 和基于 Web 的 Silverlight 界面非常相似，然而，WP7 界面看起来非常不同。按钮、复选框和单选按钮大得多，以适应主要输入设备（您的手指！）的相对不准确性，还有一些动态差异，例如，滚动通过滑动手势实现，滚动条隐藏以节省宝贵的屏幕空间。

然而，不同的平台为您的应用程序提供了更大的适应空间。桌面和基于 Web 的应用程序变得越来越相似；然而，移动环境提供了许多 Web 和桌面通常不具备的功能

方向 – 移动设备可以检测方向，这允许您开发纵向或横向界面，或者在方向改变时进行适应的界面。

相机、GPS、加速度计 – 移动设备包含许多外围输入，您可以在应用程序中使用它们来提供新颖的功能。最常用的是 GPS，提供位置感知搜索结果。

多点触控 – 有多点触控桌面界面可用，但这些并不常见（可能是由于人体工程学问题），相比之下，多点触控是智能手机的标准功能。利用多点触控界面和手势允许用户以新颖有趣的方式探索您的应用程序和数据。 

 

XAML Finance 应用程序

XAML Finance 应用程序依赖于数据源项目，使用它来提供所需数据。在 XAML Finance 应用程序的三个版本中，我们看到了框架差异得到解决，并且应用程序正在适应其目标平台。 

MVVM 模式

XAML Finance 应用程序利用了模型-视图-视图模型 (MVVM) UI 设计模式（Josh Smith 在这篇 MSDN 文章中详细描述了该模式），对我来说，MVVM 模式中要记住的一个关键点是 ViewModel 是视图的模型，换句话说，ViewModel 的结构应该与数据在屏幕上的呈现方式密切相关。 

Silverlight 版的 XAML Finance 应用程序向用户提供了一个选项卡式界面。单击左侧的按钮之一会添加一个新的 FTSE100 或热力图视图，而单击其中一个股票则会添加一个视图，为您提供有关特定公司的更多信息，包括图表。顶层视图模型 XamlFinanceViewModel 暴露了一个“子”视图模型的 ObservableCollection，每个视图模型都绑定到一个选项卡页。当添加新的“子”视图模型时，它们通过 IDataSource 接口获取数据来初始化自己。视图模型实现了 INotifyPropertyChanged 接口，以便在数据到达时更新视图。这都是非常标准的 MVVM 操作！

 

所有子视图模型都继承自 NamedViewModelBase。这个基类提供了一个 Name 属性，它显示为选项卡标题，以及一个 CloseCommand，它绑定到移除选项卡的小“x”按钮。此命令的实现只是从 XamlFinanceViewModel 中的 TabItems 集合中移除视图模型，集合绑定确保 UI 相应地更新。

适应 Web 

基于 Web 的 Silverlight 应用程序通常与基于 Web 的 HTML 内容并存。Silverlight 应用程序的默认样式（基于 Aero 主题）与大多数 Web 内容不太协调。Silverlight 中灵活的样式/模板使其可以很容易地重新设计 UI 以适应现有的 Web 内容。在下面的屏幕截图中可以看到，字体、配色方案、超链接和其他图像已从托管应用程序的网站复制而来，这使得很难确定 Silverlight 应用程序的边界

适应桌面

桌面应用程序通常与基于 Web 的应用程序具有相似的外观和布局。我使用了 WPF 可用的“库存”主题之一，为应用程序提供了一个 Aero 主题。

对于基于 Web 的应用程序，通常期望浏览器最大化，从而为每个应用程序提供相似的屏幕空间。在 XAML Finance 中，我想探索使用多个窗口。在 Web 版本中，您可以为多个股票打开页面，每个页面都显示在单独的选项卡中，但您不能并排比较两个。 

XAML Finance 的 WPF 版本通过分部类专门化了顶层模型 XAMLFinanceViewModel，以添加第二个“子”视图模型集合。

TabItems 集合直接绑定到视图中 TabControl 的 ItemsSource，绑定框架管理 TabItems 的创建/销毁，因为此集合会发生变化。但是，浮动窗口的管理必须手动完成。视图模型的 WPF 特定附加项需要 WPF 特定视图。但是，视图由 UserControl 组成，允许重用各种组件，例如，公司摘要和图表页面在 WPF 和 Silverlight 之间共享，即使托管它们的视图不同。

NamedViewModelBase 通过分部类在 WPF 项目中进行了扩展，以添加 PopOutCommand 和 PopInCommand。这些命令绑定到选项卡标题中的按钮

PopOutCommand 将视图模型从 TabItems 集合移动到 FloatingItems 集合。创建 Window 以托管弹出视图模型的任务由应用程序执行，该应用程序处理由 FloatingItems 集合引发的集合更改事件： 

private XAMLFinanceViewModel _model = new XAMLFinanceViewModel();

public MainWindow()
{
  InitializeComponent();

  this.DataContext = _model;

  model.FloatingViewModels.CollectionChanged += FloatingViewModels_CollectionChanged);
}

private void FloatingViewModels_CollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
{
  if (e.Action == NotifyCollectionChangedAction.Add)
  {
    // create a window to host the view model that has been moved into this collection
    var host = new ViewModelHost();
    host.DataContext = e.NewItems[0];
    host.Show();
  }
}

添加视图模型时，会创建一个 ViewModelHost 窗口，并将视图模型作为 DataContext 提供。ViewModelHost 仅包含一个 ContentControl： 

<Window x:Class="XAMLFinance.ViewModelHost"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        ShowInTaskbar="False"
        WindowStartupLocation="CenterOwner"
        Closed="Window_Closed"
        Title="{Binding Path=Title}" Height="600" Width="500">
    <Grid>
        <ContentControl Content="{Binding}"
                        VerticalAlignment="Stretch"
                        HorizontalAlignment="Stretch"/>
    </Grid>
</Window>

<ResourceDictionary 
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:view="http://XAMLFinance/View"
             xmlns:vm="http://XAMLFinance/ViewModel">

    <DataTemplate DataType="{x:Type vm:InstrumentDetailsViewModel}">
        <view:InstrumentDetailsView/>
    </DataTemplate>
    
    <DataTemplate DataType="{x:Type vm:PriceListViewModel}">
        <view:PriceListGridView/>
    </DataTemplate>

    <DataTemplate DataType="{x:Type vm:HeatMapViewModel}">
        <view:HeatMapView/>
    </DataTemplate>
</ResourceDictionary>

/// <summary>
/// Initialises the various view-models required for the panorama
/// </summary>
public override void Init()
{
  Pricelist.PropertyChanged += (s,e) => CheckChildViewModelsLoaded();
  HeatMap.PropertyChanged += (s, e) => CheckChildViewModelsLoaded();
  Pricelist.Init();
  HeatMap.Init();

  // get the FTSE100 prices
  App.Current.DataSource.GetFTSE100PriceHistory(
    priceHistory =>
    {
      FTSE100Price = new InstrumentPriceHistoryViewModel(priceHistory);
      CheckChildViewModelsLoaded();
    });
}

/// <summary>
/// Updates the IsLoaded state based on the state of the related view models.
/// </summary>
private void CheckChildViewModelsLoaded()
{
  IsLoaded = Pricelist.Prices.Count > 0 &&
            HeatMap.Sectors.Count > 0 &&
            FTSE100Price.Count > 0;
}

托管全景控件的页面的代码隐藏会检查 IsLoaded 属性的状态，并在所有视图模型完全填充时隐藏加载指示器： 

public PanoramaIndex()
{
  InitializeComponent();
  this.DataContext = App.Current.ViewModel;

  LoadingIndicator.Opacity = 1;

  // monitor the IsLoaded view model property to determine when the
  // data we require has arrived
  if (App.Current.ViewModel.IsLoaded)
  {
    DataLoadComplete();
  }
  else
  {
    App.Current.ViewModel.PropertyChanged += (s, e) =>
      {
        if (App.Current.ViewModel.IsLoaded)
        {
          DataLoadComplete();
        }
      };
  }
}

/// <summary>
/// If data has arrived, hide the loading indicator.
/// </summary>
private void DataLoadComplete()
{
  BackgroundImage.Opacity = 0.4;
  LoadingIndicator.Visibility = Visibility.Collapsed;
}

公司信息在 Silverlight 和 WPF 应用程序中显示为单个页面，而在 WP7 中则使用 WP7 枢轴控件显示在多个屏幕上

XAML Finance 使用的唯一第三方控件是 Visiblox 图表控件。该图表有 WPF、Silverlight 和 WP7 版本，每个版本都公开相同的 API。此外，WP7 版本利用了手机的多点触控界面，允许用户用手指滚动和“捏合”图表。

与图表交互时，将其最大化以填充整个手机屏幕是有意义的。此外，横向方向对于时间序列图表也最有意义。XAML Finance 没有让用户明确导航到全屏图表页面，而是利用了手机可以检测方向的事实。当用户将手机旋转到横向模式时，图表将以全屏显示。

WP7 版的 XAML Finance 还利用了 codeplex 上的 WP7Contrib 项目，该项目为 WP7 开发者提供了许多有用的工具和实用程序。

结论 

通过本文，我展示了如何通过分别使用 WPF、Silverlight 和用于 WP7 的 Silverlight 框架，在桌面、Web 和移动应用程序之间重用大量代码。不幸的是，编写跨平台应用程序并非易事；除了链接文件之外，没有真正的工具支持，而且无数的框架差异是必须克服的障碍。幸运的是，通过对这些差异使用标准解决方案，以及合适的 UI 模式来专门化应用程序的每个版本，可以编写共享大量代码的跨平台应用程序，同时它们看起来在每个环境中都真正“适合”。

可以共享多少代码确实取决于您正在创建的应用程序。本文附带的 XAML Finance 应用程序约有 75% 的代码位于通用代码库中

基于 Web 的 Silverlight 和 WPF 版本之间也共享了相当多的代码。XAML Finance 的 WP7 版本比其他版本有更多的平台特定代码，因为平台本身存在更显著的差异。

我希望这篇文章能提供信息并鼓励其他人思考使用 XAML 技术进行跨平台开发。一旦克服了障碍，就可以共享大量代码。

一个价格购买三个应用程序（或一个半），真是划算！

变更历史

• 2011 年 9 月 22 日 - 修复了损坏的链接 
• 2011 年 9 月 21 日 - 添加了 WP7 版本的视频 
• 2011 年 9 月 19 日 - 首次上传文章