Windows Universal 应用 – Tip Calculator

声明

以下内容取材于 Bob Tabor 的课程《Windows Phone 8.1 Development for Absolute Beginners》，链接地址为：http://www.microsoftvirtualacademy.com/training-courses/windows-phone-8-1-development-for-absolute-beginners

前言

Universal App是一种跨平台的应用开发，目前主要面向Windows和Windows Phone设备。这里，我们会设计并完成一个Universal的Tip Calculator应用程序，该应用程序可以部署到Windows Phone手机上或者是Windows设备中。

1. 应用背景

Tip Calculator，这个应用程序的灵感来自于外出就餐，老外一般有给服务员付小费的习惯，而小费该付多少一般是根据服务员的服务质量来的。本应用程序设计的小费规则是这样的，服务一般付10%，服务较好18%，服务完美25%。

2. 项目创建

首先，我们需要创建一个应用程序，选择Templates > Visual C# > Store Apps > Universal Apps，选择Blank App (Universal Apps)，命名为TipCalculatorUniversal，点击确定。

工程创建完成以后，我们查看解决方案浏览器，发现以工程名称为开头的三个项目：Windows、Windows Phone和Shared。

Windows和Windows Phone的工程在XAML布局上有所不同，原因是部分控件在不同的平台上有所差异。如果是两个平台上都能够用到的类和方法，我们可以放到Share项目中。在本应用中，把Tip.cs文件放到Shared项目中，在Windows和Windows Phone的工程中引用它。

3. Shared项目设计

我们在Shared项目中，点击右键，添加新的文件：

在对话框中，选择类，命名为Tip.cs，点击添加。

在Tip.cs文件中加入以下代码，要注意两点，首先，设置Tip类为公共的。其次，创建三个属性，BillAmount, TipAmount 和 TotalAmount

public class Tip

{

public string BillAmount { get; set; }

public string TipAmount { get; set; }

public string TotalAmount { get; set; }

}

接下来，设置构造函数，将每个属性值初始化为空字符串。

public Tip()

{

this.BillAmount = String.Empty;

this.TipAmount = String.Empty;

this.TotalAmount = String.Empty;

}

接下来，创建一个计算小费的方法：

public void CalculateTip(string originalAmount, double tipPercentage)

{

double billAmount = 0.0;

double tipAmount = 0.0;

double totalAmount = 0.0;

if (double.TryParse(originalAmount.Replace('$', ' '), out billAmount))

{

tipAmount = billAmount * tipPercentage;

totalAmount = billAmount + tipAmount;

}

this.BillAmount = String.Format("{0:C}", billAmount);

this.TipAmount = String.Format("{0:C}", tipAmount);

this.TotalAmount = String.Format("{0:C}", totalAmount);

}

在这个方法中，originalAmount和tipPercentage这两个关键的内容作为传入参数，在计算得到小费和总价以后，存入类的公共属性中。注意，我们这里使用了double.TryParse()方法，如果用户输入了非数字的值，就会返回异常。

4. Windows Phone 项目设计

现在，我们来看看Windows Phone的项目，在MainPage.xaml文件的Gird中加入以下行定义：

<Grid.RowDefinitions>

<RowDefinition Height="50" />

<RowDefinition Height="100" />

<RowDefinition Height="*" />

</Grid.RowDefinitions>

第一行和第二行分别用来显示应用程序名称和应用提示，如：

<TextBlock Margin="20, 0, 20, 0"

Grid.Row="0"

Style="{StaticResource TitleTextBlockStyle}">

Tip Calculator

</TextBlock>

<TextBlock Margin="20, 0, 20, 0"

Grid.Row="1"

Style="{StaticResource TitleTextBlockStyle}"

FontSize="48">

Enter the Bill Amount

</TextBlock>

接下来，我们在第三个行中添加一个StackPanel，占据整个剩余的空间。往StackPanel中添加控件如下：

<StackPanel Name="myStackPanel" Grid.Row="2" Margin="20, 0, 20, 0">

<TextBlock HorizontalAlignment="Left"

TextWrapping="Wrap"

Text="Bill Amount"

FontSize="24"/>

<TextBox Name="billAmountTextBox"

Text="$0.00"

TextAlignment="Right"

HorizontalAlignment="Left"

TextWrapping="Wrap"

VerticalAlignment="Top"

InputScope="Number"

Width="100"

FontSize="24"

LostFocus="amountTextBox_LostFocus"

TextChanged="billAmountTextBox_TextChanged"

GotFocus="amountTextBox_GotFocus" />

</StackPanel>

在上面的代码中，billAmountTextBox允许用户输入账单上的总价，它是计算小费的基础。接下来，添加一个TextBlock和一系列RadioButtons，可以让用户选择服务的质量，以计算小费：

<TextBlock HorizontalAlignment="Left"

TextWrapping="Wrap"

Text="Percent To Tip:"

VerticalAlignment="Top"

FontSize="24"

Margin="0,20,0,0"/>

<RadioButton Content="10% - Horrible Service"

Tag="0.1"

GroupName="percentRadio"

Click="RadioButton_Click" />

<RadioButton Content="18% - Acceptable Service"

Tag="0.18"

GroupName="percentRadio"

IsChecked="True"

Click="RadioButton_Click" />

<RadioButton Content="25% - Great Service"

Tag="0.25"

GroupName="percentRadio"

Click="RadioButton_Click" />

注意，我使用了RadioButton的Tag属性，用来表示计算小费的百分比。这样的话，我可以不使用Switch语句，而直接获取Tag属性，计算小费。0.1表示10%，0.18表示18%，0.25表示25%。

接下来，我们需要显示计算小费的结果，加入如下两个Textblock:

<TextBlock HorizontalAlignment="Left"

TextWrapping="Wrap"

Text="Amount to Tip:"

FontSize="24"

Margin="0,20,0,0" />

<TextBlock Name="amountToTipTextBlock"

HorizontalAlignment="Left"

TextWrapping="Wrap"

VerticalAlignment="Top"

Text="$0.00"

FontSize="36" />

最后，显示包含了小费和账单的总价，这个是我用信用卡付费的最后价格：

<TextBlock HorizontalAlignment="Left"

TextWrapping="Wrap"

VerticalAlignment="Top"

Text="Total Bill:"

FontSize="24"

Margin="0,20,0,0" />

<TextBlock x:Name="totalTextBlock"

HorizontalAlignment="Left"

TextWrapping="Wrap"

VerticalAlignment="Top"

Text="$0.00"

FontSize="36" />

billAmountTextBox和RadioButton控件包含了一系列我们需要处理的事件。例如，当用户点击billAmountTextBox来输入账单时，我们需要首先清空已有的内容。在用户编辑数字以后，我们需要计算小费和总价。在用户的焦点移出billAmountTextBox时，我们给数字添加必要的美元符。接着，我们通过在XAML编辑器中相应的事件上点击右键，选择go to definition，创建对应的事件处理函数。

在对应的cs文件中，创建的事件处理函数如下

在后台代码中，我们创建一个Tip类的对象，并且在MainPage的构造函数中创建这个对象的实例：

另外，我们在performCalculation()方法中，调用Tip类的CalculateTip方法计算所需要的小费和总帐单。

private void performCalculation()

{

var selectedRadio = myStackPanel.Children.OfType<RadioButton>().FirstOrDefault(r => r.IsChecked == true);

tip.CalculateTip(billAmountTextBox.Text, double.Parse(selectedRadio.Tag.ToString()));

amountToTipTextBlock.Text = tip.TipAmount;

totalTextBlock.Text = tip.TotalAmount;

}

该方法的第一行是使用了LINQ语句检查用户选择的RadioButton；这种方法的优点在于，加入一个新的RadioButton控件，我们不需要增加新的代码去完成这个判断，但如果使用Switch语句就不一样了。

在获得了用户选择的RadioButton后，就可以调用Tip类的CalculateTip方法进行计算。最后将计算所得的结果赋值给相应的控件显示就可以了。

另外，什么时候需要执行这个performCalculation函数呢？首先，当用户输入新的账单时，即在(billAmountTextBox_TextChanged)这个事件被触发时；其次是用户选择不同的小费比例时，即在(RadioButton_Click)事件被触发时。

private void billAmountTextBox_TextChanged(object sender, TextChangedEventArgs e)

{

performCalculation();

}

private void RadioButton_Click(object sender, RoutedEventArgs e)

{

performCalculation();

}

这样，我们就可以调试应用程序了。但是仍存在一些不便之处。如，当我点击Bill Amount TextBox控件输入内容时，该控件就应该自动清空上次我输入的内容，而不应该由我自己手动清除。

其次，在输入完毕内容以后，我希望在前面加上美元符。

为了实现这两个功能，我们可以通过下面的方式来做。

首先，在amount TextBox获得焦点时，我们来清空其内容：

private void amountTextBox_GotFocus(object sender, RoutedEventArgs e)

{

billAmountTextBox.Text = "";

}

现在，再一次调试程序，你会发现，点击该TextBox时，会自从清空。

第二，为了使得输入的内容后加上美元符，我在它失去焦点时，调用Tip类的CalculateTip()方法，

private void amountTextBox_LostFocus(object sender, RoutedEventArgs e)

{

billAmountTextBox.Text = tip.BillAmount;

}

其调试结果如下：

注意，默认是Windows项目作为Start Up项目，我们要把它修改成Windows Phone的项目作为启动项目，可以在Windows Phone项目上点击右键，选择"Set as Start Up Project". 这样就可以了。

5. Windows 项目设计

为了测试方便，我又重新把Windows项目设置为Start Up Project，方法和上面的一样，接下来，打开Windows项目的MainPage.xaml文件，预览如下：

下面我们来看一下，在已有的Phone的界面设计的基础上，完成Windows的项目是多么容易。那么，首先我把Phone当中的MainPage.xaml中的页面布局代码拷贝过来，可以看到如下的效果：

虽然我们的界面上还有很多的空余空间，但是大家可以发现，我们在Phone中的xaml控件，在这里同样可以使用。

除了xaml代码，后台代码同样需要修改，主要是相关的事件处理程序。注意，后台代码的处理和上面的例子完全一样。

完成以后，我们点击Simulator，开始调试。应用程序界面如下：

因此，通过这次项目的内容我们发现，在这个Universal App中，使用了完全相同的XAML页面布局代码，使用了一个Tip类。当然，如果为了美观，我们当然可以拉伸Windows版本控件，以更加适合屏幕。因此，创建应用程序时，我建议把共同的逻辑、规则、数据获取和处理等内容放在Shared项目中，然后就可以在Windows和Windows Phone程序中引用它。这样我们就可以使得应用程序在多个不同的平台上使用。

参考链接：

•Windows Phone 8.1 Development for Absolute Beginners

•作者： Bob Tabor (Microsoft MVP)

•链接： http://www.microsoftvirtualacademy.com/training-courses/windows-phone-8-1-development-for-absolute-beginners

•源代码链接：http://aka.ms/absolutebeginnerwp81