65.9K
CodeProject 正在变化。 阅读更多。
Home

MvvmCross TipCalc - 步骤 5：创建 Windows 应用商店 UI

slodge
starIconstarIconstarIconstarIconstarIcon

5.00/5 (1投票)

2013 年 3 月 23 日

Ms-PL

6分钟阅读

viewsIcon

18362

MvvmCross v3 - Hot Tuna 的 TipCalc 教程的步骤 5。

介绍 

本文是 TipCalc 教程 v3 - Hot Tuna! 的第 5 步。

迄今为止...

我们开始的目标是创建一个应用程序，以帮助计算在餐厅应该留下多少小费。

我们计划基于此概念创建一个 UI

Sketch

为了实现这一点，我们构建了一个“Core”可移植类库项目，其中包含

  • 我们的“业务逻辑” - `ICalculation`
  • 我们的 `ViewModel` - `TipViewModel`
  • 我们的 App，它包含了应用的连接逻辑，包括启动指令

我们已经有了三个用户界面 - 分别用于 Xamarin.Android、Xamarin.iOS 和 WindowsPhone。

Android

v1

v1

对于我们下一个项目，让我们转向 WindowsStore。

要创建 WindowsStore MvvmCross UI，您可以使用 Visual Studio 项目模板向导，但在这里，我们将像为 Core、Android、iOS 和 WindowsPhone 项目一样，从“空项目”开始构建一个新项目。

显然，要使用 WindowsStore，您需要使用 Visual Studio 在 PC 上进行开发。

创建新的 WindowsStore 项目

向您的解决方案添加一个新项目 - 一个名为 TipCalc.UI.WindowsStore 的“空白应用 (XAML)”应用程序。

在此项目中，您将找到标准的 WindowsStore 应用程序构造：

  • “Assets”文件夹
  • “Common”文件夹
  • “Properties”文件夹，其中只有“AssemblyInfo”文件
  • App.Xaml “应用程序”对象
  • MainPage.Xaml 和 MainPage.Xaml.cs 文件，它们定义了此应用程序的默认 Page
  • “Package.appxmanifest”配置文件
  • 用于开发的调试私钥

删除 MainPage.xaml

没有人真正需要一个 MainPage。 微笑 | <img src= " align="top" src="https://codeproject.org.cn/script/Forums/Images/smiley_smile.gif" />

添加引用

添加对 CoreCross 和 MvvmCross - PCL 版本的引用

为新项目添加对可移植库的引用

  • Cirrious.CrossCore.dll
    • 核心接口和概念，包括跟踪、IoC 和插件管理
  • Cirrious.MvvmCross.dll
    • Mvvm 类 - 包括视图和 ViewModel 的基类

通常，这些文件会位于类似 {SolutionRoot}/Libs/Mvx/Portable/ 的文件夹路径下。

添加对 CoreCross 和 MvvmCross - WindowsStore 特定版本的引用

为 WindowsStore 特定库向新项目添加引用。

  • Cirrious.CrossCore.WindowsStore.dll
  • Cirrious.MvvmCross.WindowsStore.dll

这些 DLL 扩展了它们 PCL 对等项的功能，并添加了 WindowsStore 特定内容。

通常，这些文件会位于类似 {SolutionRoot}/Libs/Mvx/WindowsStore/ 的文件夹路径下。

另外，在同一个文件夹中，您还需要添加

添加对 TipCalc.Core.csproj 的引用

添加对您的 TipCalc.Core 项目的引用 - 这是我们在上一步创建的项目，其中包含

  • 您的 Calculation 服务
  • 您的 TipViewModel
  • 您的 App 连接

添加 Setup 类

正如我们在 Android、iOS 和 WO 构建过程中所说，*每个 MvvmCross UI 项目都需要一个 Setup 类*。

这个类位于我们 UI 项目的根命名空间（文件夹）中，负责初始化 `MvvmCross` 框架和你的应用程序，包括

  • 控制反转 (IoC) 系统
  • MvvmCross 数据绑定
  • 您的 App 及其 ViewModel 集合
  • 您的 UI 项目及其 View 集合

其中大部分功能会自动提供给您。在您的 WindowsStore UI 项目中，您只需要提供：

  • 您的 App - 您与业务逻辑和 ViewModel 内容的连接

对于 TipCalc，以下是 Setup.cs 中所需的所有内容：

using Cirrious.MvvmCross.ViewModels;
using Cirrious.MvvmCross.WindowsStore.Platform;
using Windows.UI.Xaml.Controls;

namespace TipCalc.UI.WindowsStore
{
    public class Setup : MvxStoreSetup
    {
        public Setup(Frame rootFrame) : base(rootFrame)
        {
        }

        protected override IMvxApplication CreateApp()
        {
            return new Core.App();
        }
    }
}

修改 App.xaml.cs 以使用 Setup

您的 App.xaml.cs 提供了 WindowsStore 的“主应用程序”对象 - 该对象拥有用户界面，并在应用程序生命周期的某些关键事件中接收来自操作系统的回调。

要修改此 MvvmCross 的 App.xaml.cs，我们需要：

  • 修改 OnLaunched 回调

    • 删除这些行

      if (!rootFrame.Navigate(typeof(MainPage), args.Arguments))
{
    throw new Exception("Failed to create initial page");
}

    • 添加这些行，使其能够创建 Setup，然后启动 IMvxAppStart Start 导航。

      var setup = new Setup(rootFrame);
setup.Initialize();

var start = Mvx.Resolve<IMvxAppStart>();
start.Start();

要做到这一点，您需要添加这些 using 行：

using Cirrious.CrossCore.IoC;
using Cirrious.MvvmCross.ViewModels;

添加您的 View

创建初始页面

创建一个 Views 文件夹。

在此文件夹中，添加一个名为 TipView.xaml 的新“基本页面”。

系统会询问您是否要自动添加缺失的“Common”文件以支持此“基本页面” - 请回答 **是**。

页面将生成。

  • TipView.xaml
  • TipView.xaml.cs

在 Common 文件夹中，您还将添加新文件：

  • BindableBase.cs
  • BooleanNegationConverter.cs
  • BooleanToVisibilityConverter.cs
  • LayoutAwarePage.cs
  • RichTextColumns.cs
  • SuspensionManager.cs

将 LayoutAwarePage 转换为 MvvmCross 基类视图

更改 LayoutAwarePage ，使其继承自 MvxStorePage。

更改

public class LayoutAwarePage : Page

to

public class LayoutAwarePage : MvxStorePage

这需要添加：

using Cirrious.MvvmCross.WindowsStore.Views;

让 LayoutAwarePage 与 MvxStorePage 基类更合理地协作

删除该区域

#region Process lifetime management

// all sorts of 'stuff' including
//  OnNavigatedTo
//  OnNavigatedFrom
//  LoadState
//  SaveState

#endregion

或者更改 OnNavigatedTo 和 OnNavigatedFrom 方法，使它们调用它们的基类实现。

base.OnNavigatedTo(e);

和

base.OnNavigatedFrom(e);

将 TipView 变成 TipViewModel 的 MvvmCross 视图

打开 TipView.cs 文件。

要将 TipView 链接到 TipViewModel，请创建一个 public new TipViewModel ViewModel 属性 - 与您在 Xamarin.Android、Xamarin.iOS 和 WindowsPhone 中所做的完全一样。

public new TipViewModel ViewModel
{
    get { return (TipViewModel) base.ViewModel; }
    set { base.ViewModel = value; }
}

删除 LoadState 和 SaveState 方法。

总而言之，这看起来是这样的

using TipCalc.Core.ViewModels;
using TipCalc.UI.WindowsStore.Common;

namespace TipCalc.UI.WindowsStore.Views
{
    public sealed partial class TipView : LayoutAwarePage
    {
        public new TipViewModel ViewModel
        {
            get { return (TipViewModel)base.ViewModel; }
            set { base.ViewModel = value; }
        }

        public TipView()
        {
            this.InitializeComponent();
        }
    }
}

编辑 XAML 布局

双击 XAML 文件。

这将在 Visual Studio 中打开 XAML 编辑器。

就像 WindowsPhone 一样，我在这里不会深入介绍如何使用 XAML 或进行 Windows 数据绑定。我假设大多数读者已经具备了至少一点 XAML 背景。

要为我们的提示计算器添加 XAML 用户界面，我们将在现有的 <VisualStateManager.VisualStateGroups> XAML 节点上方添加一个 ContentPanel Grid 。

此 Content Panel 将包含**几乎**与我们在 WindowsPhone 示例中添加的 XAML 完全相同的 XAML - 只会删除 Style 属性。

  • 一个 StackPanel 容器，我们将在其中添加
    • 一些 TextBlock 静态文本
    • 用于 SubTotal 的绑定 TextBox
    • 用于 Generosity 的绑定 Slider
    • 用于 Tip 的绑定 TextBlock

这将生成类似以下的 XAML：

    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <StackPanel>
            <TextBlock
                Text="SubTotal"
                />
            <TextBox 
                Text="{Binding SubTotal, Mode=TwoWay}" 
                />

            <TextBlock
                Text="Generosity"
                />
            <Slider 
                Value="{Binding Generosity,Mode=TwoWay}" 
                SmallChange="1" 
                LargeChange="10" 
                Minimum="0" 
                Maximum="100" />

            <TextBlock
                Text="Tip"
                />
            <TextBlock 
                Text="{Binding Tip}" 
                />
        </StackPanel>
    </Grid>

**注意**，在 XAML 中，OneWay 绑定通常是默认设置。

为了提供 TwoWay 绑定，我们在绑定表达式中显式添加 Mode：例如 Value="{Binding Generosity,Mode=TwoWay}"。

在设计器中，这将显示为

Designer

Store UI 完成！

此时，您应该能够运行您的应用程序。

当它启动时...您应该看到

Designer

这似乎工作得很完美，尽管您可能会注意到，如果您在 SubTotal TextBox 中编辑值，则其余的显示不会正确更新。

这是一个 View 的关注点 - 这是一个 UI 问题。所以我们可以在 WindowsStore UI 代码中修复它 - 就像我们在 WindowsPhone 示例中所做的那样。

继续...

我们还可以做更多的事情来让这个用户界面更美观，让应用更丰富……但对于这第一个应用程序，我们暂时就到这里。

让我们继续最后一个 Windows 部分！

文章

历史 

  • 2013 年 3 月 22 日 - 首次提交  
© . All rights reserved.