在本教程中,将学习如何使用MvvmCross框架创建一个Windows Store应用。MvvmCross是一个流行的.NET跨平台MVVM框架,它允许开发者在多个平台上共享代码。将从创建一个简单的小费计算器应用开始,逐步深入到UI项目设置、XAML布局和数据绑定等高级主题。
首先,需要创建一个新的Windows Store项目。在Visual Studio中,选择“文件”->“新建”->“项目”,然后选择“空白应用(XAML)”。将项目命名为“TipCalc.UI.WindowsStore”。
接下来,需要添加对CoreCross和MvvmCross的引用。这些库包含了MvvmCross框架的核心功能,如IoC容器、数据绑定等。在解决方案资源管理器中,右键点击“引用”,然后选择“添加引用”。在打开的对话框中,浏览到包含这些库的文件夹,并将它们添加到项目中。
此外,还需要添加对WindowsStore特定版本的CoreCross和MvvmCross的引用。这些库提供了特定于Windows Store平台的功能扩展。同样地,在“引用”对话框中添加这些库。
最后,需要添加对TipCalc.Core项目的引用。这个项目包含了业务逻辑和ViewModel。在“引用”对话框中,选择“项目”选项卡,然后选择“TipCalc.Core”项目。
在MvvmCross中,每个UI项目都需要一个Setup类。这个类负责初始化MvvmCross框架和应用程序,包括IoC容器、数据绑定、ViewModel和View的集合等。在WindowsStore UI项目中,只需要提供对App的引用,即业务逻辑和ViewModel。
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文件提供了WindowsStore的“主应用程序”对象,它负责管理用户界面,并在应用程序生命周期的关键事件中接收操作系统的回调。为了使用MvvmCross,需要修改OnLaunched回调,以允许它创建Setup对象并启动IMvxAppStart导航。
var setup = new Setup(rootFrame);
setup.Initialize();
var start = Mvx.Resolve<IMvxAppStart>();
start.Start();
接下来,需要创建初始页面。在项目中创建一个新的“基本页面”,并将其命名为TipView.xaml。这将生成TipView.xaml和TipView.xaml.cs文件。
为了将TipView与TipViewModel关联起来,需要在TipView.cs文件中创建一个新的ViewModel属性。
public new TipViewModel ViewModel
{
get { return (TipViewModel)base.ViewModel; }
set { base.ViewModel = value; }
}
最后,需要编辑XAML布局以添加用户界面。将添加一个ContentPanel Grid,其中包含一个StackPanel容器,用于放置静态文本、绑定的TextBox、Slider和TextBlock。
<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>
在设计视图中,这将显示为一个包含小费计算器UI的页面。