使用Visual Studio构建VB Windows Phone应用程序

Visual Studio博客

2010年11月29日00

作者：杨晓

今天，我们宣布发布Visual Basic for Windows Phone开发人员工具。本演练演示了使用新发布的工具开发VB Windows Phone应用程序是多么容易和方便。您将看到VisualStudio2010中的许多新IDE功能现在可用于VB Windows Phone应用程序，这些功能可以帮助您导航和编写代码！

你可能已经看到了小费计算器应用程序在Jason Zander的博客上。本文是该示例的一个变体，展示了如何创建一个小费计算器，用于计算小费并在组中拆分账单。我们需要一种方法来指定团队规模、我们想要支付的小费百分比以及账单金额。现在让我们开始吧！

弗斯特，创建Windows Phone 7应用程序。安装后VB for Windows Phone开发工具，创建新项目时，您将在新的“Silverlight for Windows Phone”节点下看到新的Windows Phone应用程序模板。我们正在编写的技巧计算器只有一个页面，因此我们将选择最简单的模板——Windows Phone Application，如图1所示：

图1。创建VB Windows Phone 7应用程序

第二，添加控件以选择组大小、小费百分比和帐单金额。与其他Silverlight应用程序类似，我们可以通过设计器表面、手工制作XAML或在代码中添加控件。我们将分别进行演示。提示计算器的UI如下所示，如图2所示。

图2。提示计算器UI设计

这是用于绘制上述UI的内容面板的XAML。如您所见，我使用嵌套的StackPanels来组织控件，其Orientation属性负责包含文本框、文本块和按钮的位置，使布局极易管理。顶层StackPanel包含五个部分：sharedByPanel指定组大小，tipPanel指定小费百分比，StackPanels输入帐单金额，StackPanel显示计算出的小费总额，Stack面板显示组中每个人的计算出的付款总额（帐单+小费）。

<网格x个:姓名=“内容面板”网格。排=”1″保证金=”12,0,12,0″>

<堆栈面板方向=“垂直”>

<控件文本=“共享者：”样式=”{静态源PhoneText标准样式}” />

<!– 此处特意将StackPanel留空。将在代码中添加控件–>

<堆栈面板方向=“水平”姓名=“sharedByPanel”>

</堆栈面板>

<控件文本=“小费%：”样式=”{静态源PhoneText标准样式}”/>

<!– 此处特意将StackPanel留空。将在代码中添加控件–>

<堆栈面板方向=“水平”姓名=“tipPanel”>

</堆栈面板>

<堆栈面板方向=“水平”>

<控件文本=“账单金额：”样式=”{静态源PhoneText标准样式}”/>

<文本框x个:姓名=“账单金额”宽度=”150″/>

<按钮x个:姓名=“calcBtn”宽度=”100″高度=”80″字号=“13”内容=“快跑！”></按钮>

</堆栈面板>

<堆栈面板方向=“水平”>

<控件文本=“小费总计：”高度=”50″样式=”{静态源PhoneText标准样式}”/>

<控件x个:姓名=“totalTip”样式=”{静态源PhoneText标准样式}”/>

</堆栈面板>

<堆栈面板方向=“水平”>

<控件文本=“每人支付：”高度=”50″样式=”{静态源PhoneText标准样式}”/>

<控件x个:姓名=“eachPays”样式=”{静态源PhoneText标准样式}”/>

</堆栈面板>

</网格>

您可以轻松地将文本块、文本框和按钮等控件从工具箱拖动到设计图面，如图3所示。

图3。将控件从工具箱拖动到设计图面

嵌套的StackPanels可以方便地直接添加到MainPage.xaml文件中的任何必要位置。Visual Studio编辑器的IntelliSense使XAML编辑变得用户友好。有关StackPanel的orientation属性的XAML intelliSense示例，请参见图4。

图4。XAML智能感知

为了使UI更有趣，我将绘制一个人物图标来指示组的大小，如图5所示。绿色表示有多少人共享账单。如果用户单击4^第个图标，则前4个人图标将变为绿色。这是通过在MainPage.xaml.vb中添加代码实现的。

图5。使用人员图标指示组大小

person图标被实现为一个带有两个椭圆的按钮，它允许我使用Fill属性更改颜色。每个人图标还与一个事件处理程序相关联，该事件处理程序在其自身之前处理所有图标的颜色更改。这要求每个图标都知道自己的位置，并且能够识别前面的图标。为了实现这一点，我使用了一个从Button继承的类PersonBtn，添加Id来指示其位置。

您可能在Visual Studio 2010中注意到的一个增强功能是删除了行接续字符（95%的情况下）！这是VB开发人员长期以来要求的一项功能，它也可以在VB Windows Phone应用程序中使用！此外自动实现的属性（下面突出显示），您可以在一行中声明属性及其默认值！

公共等级人员Btn

继承按钮

财产身份证件作为整数

财产头部作为椭圆

财产车身作为椭圆

尺寸头部尺寸作为整数= 20

尺寸车身宽度作为整数= 30

尺寸车身高度作为整数= 40

公共附属的新建(ByVal公司我作为整数)

MyBase（我的基础）.新建（）

Id=i

添加控制（）

终点附属的

私人附属的添加控制（）

'按钮

我.宽度=80

我.高度=100

我.边框厚度=新建厚度(0)

'个人

头部=新建椭圆使用{.填充=新建单色画刷(颜色.白色）。高度=头部尺寸。宽度=头部尺寸}

车身=新建椭圆使用{.填充=新建单色画刷(颜色.白色）。高度=车身高度。宽度=车身宽度｝

尺寸personStackPanel（人员堆叠面板）=新建堆栈面板使用{.方向=方向.垂直}

personStackPanel。儿童。添加（标题）

personStackPanel。儿童。添加（正文）

我.Content=personStackPanel

终点附属的

公共附属的更改颜色(ByVal公司c作为颜色)

头部。填充=新建单色画刷（c）

车身。填充=新建单色画刷（c）

终点附属的

终点等级

现在我们有了PersonBtn，我可以在UI上添加它的多个实例，如下面的代码所示。第一个高亮显示的行使用VB集合初始值设定项方便地定义用户定义类型的数组并在同一语句中赋值。通过调用sharedByPanel将图标添加到包含的StackPanel中。儿童。Add方法。第二个高亮显示的行向每个PersonBtn添加一个通用事件处理程序，以指定组大小，并将相应的人员图标颜色更改为绿色。

尺寸personArray（人员阵列）作为人员Btn()= {新建人员Btn(1),新建人员Btn(2),新建人员Btn(3),新建人员Btn(4),新建人员Btn(5)}

对于每个第页作为人员Btn 在personArray（人员阵列）

sharedByPanel。儿童。添加（p）

添加处理程序（p.GotFocus），地址属于处理人员选择

'设置默认值

如果（p.Id=1）然后

p.更改颜色(颜色.绿色）

其他

p.更改颜色(颜色.白色）

终点如果

下一步

私人附属的处理Tip选择(ByVal公司发件人作为按钮,ByVal公司e（电子）作为路由事件参数)

百分比提示=DirectCast（直播）（发送方，百分比Btn).Ptg公司

DirectCast（直播）（发送方，百分比Btn).更改颜色(颜色.绿色）

尺寸未选择的Tip百分比=发件人t吨在tipPercentArray（百分比阵列）

在哪里？t.Ptg<>百分比提示

对于每个t吨在非选定TipPercents

t.更改颜色(颜色.白色）

下一步

终点附属的

接下来，我们将向代码中添加其余的控件和逻辑。提示百分比图标以类似的方式实现，如图6所示。有关详细代码，请参阅随附的解决方案。

图6。小费百分比

在编写Windows Phone应用程序时，有几个技巧值得一提。例如，要输入账单金额，默认键盘设置为英文字符，用户可以单击数字按钮切换到数字输入。然而，在代码中，您可以更改默认键盘设置并为用户保存一次单击。以下是如何通过TextBox的InputScope属性执行此操作：

尺寸数字键盘作为新建输入范围()

数字键盘。姓名。添加(新建输入范围名称使用{名称值=输入范围名称值.数字}）

账单金额。InputScope=数字键盘

此外，您可以使用字符串格式在一行中轻松地将数字更改为所需的货币格式。下面是一个示例：

私人附属的calcBtn_单击(ByVal公司发件人作为系统。对象,ByVal公司e（电子）作为系统。窗户。路由事件参数)把手计算生物量。点击

'计算并显示更新

如果(不是字符串.IsNullOrEmpty（账单金额.Text）然后

尝试

账单总计=双精度（账单金额文本）

totalTips=总账单*（percentTips/100）

payPerPerson=（总计账单+总计小费）/共享人

总计小费。文本=totalTips。ToString（目标字符串）(“C”,新建系统。全球化。文化信息(“en-US”))

每个支付。文本=payPerPerson。ToString（目标字符串）(“C”,新建系统。全球化。文化信息(“en-US”))

捕捉前任作为无效CastException

对话框.显示(“请输入有效的$金额！”)

终点尝试

终点如果

终点附属的

现在我们已经完成了UI和应用程序逻辑的编码！让我们按F5并运行它。如果您的计算机上没有实际连接的Windows Phone 7，Windows Phone Developer Tools将启动Emulator。这也是默认设置。要查看此提示计算器如何在Emulator中运行，请参见图6。（我去掉了按钮边框，使它们看起来更好。J）

Windows Phone 7应用程序提供了与其他VB Silverlight应用程序相同的完整调试体验。您可以设置断点、逐步进入、切换和退出函数调用，并使用所有调试窗口，如Watch、Autos、Locals、Immediate和Threads。

作为自己的练习，当前应用程序只允许在5人的组中共享。添加UI和逻辑以删除此限制！