创建Windows Store应用的步骤指南

在本教程中,将学习如何使用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”项目。

创建Setup类

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

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布局

最后,需要编辑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的页面。

沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485