{"id":1713,"date":"2010-11-29T08:41:00","date_gmt":"2010-11-29T08:41:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/visualstudio\/2010\/11\/29\/using-visual-studio-to-build-vb-windows-phone-applications\/"},"modified":"2022-10-10T14:46:58","modified_gmt":"2022-10-10T21:46:58","slug":"using-visual-studio-to-build-vb-windows-phone-applications","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/visualstudio\/using-visual-studio-to-build-vb-windows-phone-applications\/","title":{"rendered":"Using Visual Studio to build VB Windows Phone Applications"},"content":{"rendered":"

by Yang Xiao<\/p>\n

Today we are announcing the release to web (RTW) of Visual Basic for Windows Phone Developer Tools<\/a>. This walkthrough demonstrates how easy and convenient it is to develop a VB Windows Phone application using the newly released tools. You\u2019ll see that the many new IDE features in Visual Studio 2010, which help you navigate and write code, are now available for VB Windows Phone applications!<\/p>\n

You may have seen the Tip Calculator application<\/a> on Jason Zander\u2019s blog. This post is a variation on that example, and shows how to create a tip calculator that calculates the tip and splits the bill among a group. We\u2019ll need a way to specify group size, percentage of tip we want to give, and bill amount. Now let\u2019s get started!<\/p>\n

First<\/b>, create a Windows Phone 7 application. After installing VB for Windows Phone Developer Tools<\/a>, when you create a new project you\u2019ll see new Windows Phone application templates under the new \u201cSilverlight for Windows Phone\u201d node. The tip calculator we\u2019re writing only has one page, so we\u2019ll select the simplest template – Windows Phone Application, as shown in figure 1:<\/p>\n

\"Windows<\/a>\nFig 1. Create a VB Windows Phone 7 Application<\/p>\n

Second<\/b>, add controls to select group size, tip percentage and bill amount. Similar to other Silverlight applications, we can add controls through the designer surface, by handcrafting XAML, or in code. We\u2019ll demonstrate a bit of each. The tip calculator\u2019s UI looks like this, shown in Fig 2.<\/p>\n

\"clip_image004[4]\"<\/a><\/p>\n

Fig 2. Tip Calculator UI Design<\/p>\n

Here\u2019s the XAML for the content panel which draws the above UI. As you can see, I use nested StackPanels to organize the controls, whose Orientation property take care of the location of containing text boxes, text blocks and buttons, making layout super easy to manage. The top level StackPanel contains five parts: a sharedByPanel to specify the group size, a tipPanel to specify the tip percentage, a StackPanel to enter bill amount, a StackPanel to display the calculated total tip, and a StackPanel to display the calculated total payment (bill + tip) for each person in the group.<\/p>\n

\u00a0\u00a0\u00a0 <\/span><<\/span>Grid<\/span> x<\/span>:<\/span>Name<\/span>=”ContentPanel”<\/span> Grid.Row<\/span>=”1″<\/span> Margin<\/span>=”12,0,12,0″><\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><<\/span>StackPanel<\/span> Orientation<\/span>=”Vertical”><\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><<\/span>TextBlock<\/span> Text<\/span>=”Shared by: “<\/span> Style<\/span>=”{<\/span>StaticResource<\/span> PhoneTextNormalStyle<\/span>}” \/> <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0 <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0 <\/span><!– StackPanel is purposely left blank here. Will add controls in code –><\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><<\/span>StackPanel<\/span> Orientation<\/span>=”Horizontal”<\/span> Name<\/span>=”sharedByPanel” ><\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><\/<\/span>StackPanel<\/span>><\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><<\/span>TextBlock<\/span> Text<\/span>=”Tip %: “<\/span> Style<\/span>=”{<\/span>StaticResource<\/span> PhoneTextNormalStyle<\/span>}”\/> <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><!– StackPanel is purposely left blank here. Will add controls in code –><\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><<\/span>StackPanel<\/span> Orientation<\/span>=”Horizontal”<\/span> Name<\/span>=”tipPanel” ><\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><\/<\/span>StackPanel<\/span>> <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><<\/span>StackPanel<\/span> Orientation<\/span>=”Horizontal”><\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><<\/span>TextBlock<\/span> Text<\/span>=”Bill Amount: “<\/span> Style<\/span>=”{<\/span>StaticResource<\/span> PhoneTextNormalStyle<\/span>}”\/><\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><<\/span>TextBox<\/span> x<\/span>:<\/span>Name<\/span>=”BillAmount”<\/span> Width<\/span>=”150″\/><\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><<\/span>Button<\/span> x<\/span>:<\/span>Name<\/span>=”calcBtn”<\/span> Width<\/span>=”100″<\/span> Height<\/span>=”80″<\/span> FontSize<\/span>=”13″<\/span> Content<\/span>=”Run!”><\/<\/span>Button<\/span>><\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><\/<\/span>StackPanel<\/span>><\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 <\/span><<\/span>StackPanel<\/span> Orientation<\/span>=”Horizontal”><\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><<\/span>TextBlock<\/span> Text<\/span>=”Total tips: “<\/span> Height<\/span>=”50″<\/span> Style<\/span>=”{<\/span>StaticResource<\/span> PhoneTextNormalStyle<\/span>}”\/><\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><<\/span>TextBlock<\/span> x<\/span>:<\/span>Name<\/span> =”totalTip”<\/span> Style<\/span>=”{<\/span>StaticResource<\/span> PhoneTextNormalStyle<\/span>}”\/><\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><\/<\/span>StackPanel<\/span>><\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><<\/span>StackPanel<\/span> Orientation<\/span>=”Horizontal”><\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><<\/span>TextBlock<\/span> Text<\/span>=”Each pays: “<\/span> Height<\/span>=”50″<\/span> Style<\/span>=”{<\/span>StaticResource<\/span> PhoneTextNormalStyle<\/span>}”\/><\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><<\/span>TextBlock<\/span> x<\/span>:<\/span>Name<\/span>=”eachPays”<\/span> Style<\/span>=”{<\/span>StaticResource<\/span> PhoneTextNormalStyle<\/span>}”\/><\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><\/<\/span>StackPanel<\/span>><\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><\/<\/span>StackPanel<\/span>><\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><\/<\/span>Grid<\/span>><\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0 <\/span><\/<\/span>Grid<\/span>> <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

You can easily drag controls such as TextBlocks, Textboxes and Buttons from the Toolbox to the design surface, as shown in Fig 3.<\/p>\n

\"draggable<\/a><\/p>\n

Fig 3. Drag controls from the Toolbox to Design Surface<\/p>\n

Nested StackPanels can be conveniently added wherever necessary in MainPage.xaml file directly. The Visual Studio editor\u2019s IntelliSense makes XAML editing user friendly. See Fig 4 for an example of XAML intelliSense on the orientation property for a StackPanel.<\/p>\n

\"clip_image008\"<\/a><\/p>\n

Fig 4. XAML IntelliSense<\/p>\n

To make the UI more interesting, I\u2019m going to draw a person icon to indicate the group size, as shown in Fig 5. The green color indicates how many people are sharing the bill. If the user clicks the 4th<\/sup> icon, then the first 4 person icons will turn green. This has been implemented through adding code in MainPage.xaml.vb.<\/p>\n

\"clip_image010\"<\/a><\/p>\n

Fig 5. Use the Person Icon to Indicate the Group Size<\/p>\n

The person icon is implemented as a button with two ellipses, which allows me to use Fill property to change color. Each person icon is also hooked up with an event handler that processes the color change for all the icons before itself. This requires that each icon knows its position and is able to identify the icons before it. To achieve this, I use an inherited class PersonBtn from Button, adding Id to indicate its position.<\/p>\n

One enhancement you\u2019ve probably noticed in Visual Studio 2010 is that we removed the line continuation character <\/b>(in 95% of cases)! This was a long requested feature from VB developers, and it works in VB Windows Phone applications as well! Furthermore with Auto-implemented Properties <\/strong>(highlighted below), you can declare a property and its default value in one line!<\/p>\n

Public<\/span> Class<\/span> PersonBtn<\/span> <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0 Inherits<\/span> Button<\/span> <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0 Property<\/span> Id As<\/span> Integer<\/span><\/span> <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0 Property<\/span> Head As<\/span> Ellipse<\/span> <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0 Property<\/span> Body As<\/span> Ellipse<\/span> <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0 Dim<\/span> headSize As<\/span> Integer<\/span> = 20 <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0 Dim<\/span> bodyWidth As<\/span> Integer<\/span> = 30 <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0 Dim<\/span> bodyHeight As<\/span> Integer<\/span> = 40 <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0 Public<\/span> Sub<\/span> New<\/span>(ByVal<\/span> i As<\/span> Integer<\/span>) <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 MyBase<\/span>.New() <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Id = i <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 AddControl() <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0 End<\/span> Sub<\/span> <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0 Private<\/span> Sub<\/span> AddControl() <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ‘button<\/span> <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Me<\/span>.Width = 80 <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Me<\/span>.Height = 100 <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Me<\/span>.BorderThickness = New<\/span> Thickness<\/span>(0) <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ‘person<\/span> <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Head = New<\/span> Ellipse<\/span> With<\/span> {.Fill = New<\/span> SolidColorBrush<\/span>(Colors<\/span>.White), .Height = headSize, .Width = headSize} <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Body = New<\/span> Ellipse<\/span> With<\/span> {.Fill = New<\/span> SolidColorBrush<\/span>(Colors<\/span>.White), .Height = bodyHeight, .Width = bodyWidth} <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Dim<\/span> personStackPanel = New<\/span> StackPanel<\/span> With<\/span> {.Orientation = Orientation<\/span>.Vertical} <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 personStackPanel.Children.Add(Head) <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 personStackPanel.Children.Add(Body) <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Me<\/span>.Content = personStackPanel <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0 End<\/span> Sub<\/span> <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0 Public<\/span> Sub<\/span> ChangeColor(ByVal<\/span> c As<\/span> Color<\/span>) <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Head.Fill = New<\/span> SolidColorBrush<\/span>(c) <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Body.Fill = New<\/span> SolidColorBrush<\/span>(c) <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0 End<\/span> Sub<\/span> <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

End<\/span> Class <\/span><\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

Now that we have PersonBtn, I can add multiple instances of it on the UI, as shown in code below. The first highlighted line uses a VB collection initializer<\/b> to conveniently define an array of user-defined types and assign values in the same statement. The icons are added to the containing StackPanel by calling sharedByPanel.Children.Add method. The second highlighted line adds a universal event handler to each PersonBtn to specify the group size, and changes the corresponding person icon color to green.<\/p>\n

Dim<\/span> personArray As<\/span> PersonBtn<\/span>()= {New<\/span> PersonBtn<\/span>(1), New<\/span> PersonBtn<\/span>(2), New<\/span> PersonBtn<\/span>(3), New<\/span> PersonBtn<\/span>(4), New<\/span> PersonBtn<\/span>(5)}<\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 For<\/span> Each<\/span> p As<\/span> PersonBtn<\/span> In<\/span> personArray <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 sharedByPanel.Children.Add(p) <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 AddHandler<\/span> (p.GotFocus), AddressOf<\/span> HandlePersonSelection<\/span> <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ‘set default<\/span> <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 If<\/span> (p.Id = 1) Then<\/span> <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0 p.ChangeColor(Colors<\/span>.Green) <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Else<\/span> <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 p.ChangeColor(Colors<\/span>.White) <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 End<\/span> If<\/span> <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Next <\/span><\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0 Private<\/span> Sub<\/span> HandleTipSelection(ByVal<\/span> sender As<\/span> Button<\/span>, ByVal<\/span> e As<\/span> RoutedEventArgs<\/span>) <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 percentTips = DirectCast<\/span>(sender, PercentageBtn<\/span>).Ptg <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 DirectCast<\/span>(sender, PercentageBtn<\/span>).ChangeColor(Colors<\/span>.Green) <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Dim<\/span> nonSelectedTipPercents = From<\/span> t In<\/span> tipPercentArray <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Where<\/span> t.Ptg <> percentTips <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 For<\/span> Each<\/span> t In<\/span> nonSelectedTipPercents <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 t.ChangeColor(Colors<\/span>.White) <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Next<\/span> <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0 End<\/span> Sub<\/span> <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

Next,<\/b> we\u2019ll add the remaining controls and logic to the code. The tip percentage icon is implemented in a similar manner, as shown in Fig 6. See attached solution for detailed code.<\/p>\n

\"clip_image012\"<\/a><\/p>\n

Fig 6. Tip Percentage<\/p>\n

There are a few tricks are worth mentioning when you write a Windows Phone app. For example, to enter the bill amount, the default keyboard setting is English characters and users can click the number button to switch to numeric input. However in code, you can change default keyboard setting and save users a click. Here\u2019s how to do it through the TextBox\u2019s InputScope property:<\/p>\n

\u00a0\u00a0 Dim<\/span> DigitKeyboard As<\/span> New<\/span> InputScope<\/span>() <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 DigitKeyboard.Names.Add(New<\/span> InputScopeName<\/span> With<\/span> {.NameValue = InputScopeNameValue<\/span>.Digits}) <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 BillAmount.InputScope = DigitKeyboard <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

Also, you can use the string format to easily change numbers to the desired currency format in just one line. Here\u2019s an example:<\/p>\n

Private<\/span> Sub<\/span> calcBtn_Click(ByVal<\/span> sender As<\/span> System.Object<\/span>, ByVal<\/span> e As<\/span> System.Windows.RoutedEventArgs<\/span>) Handles<\/span> calcBtn.Click <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ‘calcualte and show updates<\/span> <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 If<\/span> (Not<\/span> String<\/span>.IsNullOrEmpty(BillAmount.Text)) Then<\/span> <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Try<\/span> <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 totalBill = CDbl<\/span>(BillAmount.Text) <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 totalTips = totalBill * (percentTips \/ 100) <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 payPerPerson = (totalBill + totalTips) \/ sharedBy <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 totalTip.Text = totalTips.ToString(“C”<\/span>, New<\/span> System.Globalization.CultureInfo<\/span>(“en-US”<\/span>))<\/span> <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 eachPays.Text = payPerPerson.ToString(“C”<\/span>, New<\/span> System.Globalization.CultureInfo<\/span>(“en-US”<\/span>)) <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Catch<\/span> ex As<\/span> InvalidCastException<\/span> <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 MessageBox<\/span>.Show(“Please enter a valid $ amount!”<\/span>) <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 End<\/span> Try<\/span> <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 End<\/span> If<\/span> <\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

\u00a0\u00a0\u00a0 End<\/span> Sub <\/span><\/span><\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

Now we\u2019re done coding both the UI and the application logic! Let\u2019s hit F5 and run it. If you don\u2019t have a Windows Phone 7 physically connected to your computer, Windows Phone Developer Tools will launch the Emulator. This is also the default setting. To see how this tip calculator runs in the Emulator, please see Fig 6. (I removed the button borders to make them look nicer. J)<\/p>\n

Windows Phone 7 applications provide the same full debugging experience as other VB Silverlight applications. You can set breakpoints, step into, over and out function calls, and use all the debug windows such as Watch, Autos, Locals, Immediate, and Threads.<\/p>\n

As an exercise for yourself \u2013 the current application only allows sharing among group size of 5. Add UI and logic to remove this restriction!<\/p>\n

\"tip<\/a><\/p>\n

Fig 7. Tip Calculator Running in the Windows Phone Emulator<\/p>\n

 <\/p>\n

Visual Studio 2010 IDE Tips & Tricks<\/b><\/h2>\n

At the end, I want to highlight a few new IDE features in VS 2010. These features are also available in Windows Phone application development, and can help improve your code navigation and editing experience.<\/p>\n

Navigate To (Ctrl + ,)<\/b><\/p>\n

Activate this command from the Edit menu (Edit->Navigate To), or using the keyboard (Ctrl+,). \u201cNavigate To\u201d helps quickly navigate to functions, type definitions and files. It supports Pascal Casing and multiple-string search. See Fig 8.<\/p>\n

\"edit<\/a><\/p>\n

Fig 8. Navigate To, for functions, type definitions, and files<\/p>\n

Generate From Usage (Ctrl + .)<\/b><\/p>\n

Generate types and method stubs on the go! You don\u2019t have to define everything before you implement your logic. This also helps in a collaboration environment where your team members can implement dependent components. See example in Fig 10.<\/p>\n

\"Fig<\/a><\/p>\n

Fig 10. Ctrl + . to Bring up Generate From Usage Smart Tag for Undeclared Type Test<\/p>\n

Selecting \u201cGenerate Class Test\u201d in Fig 10 will create a new file Test.vb , containing a newly generated class . Selecting \u201cGenerate new type\u2026\u201d will bring up the following Generate From Usage Dialog, which provides further customization of the new type being created. See Fig 11.<\/p>\n

\"usage<\/a><\/p>\n

Fig 11. Generate From Usage Dialog<\/p>\n

Intellisense Consume First Mode (Ctrl + Shift + Space)<\/b><\/p>\n

Disable aggressive matching from IntelliSense. This comes up most frequently in situations like above, when you reference a symbol name before it\u2019s been defined. However with Consume First Mode enabled, when you\u2019re typing a new type that doesn\u2019t exist, IntelliSense will not get in your way anymore! See Fig 9.<\/p>\n

\"disable<\/a>\nFig 9. Intellisense Consume First Mode<\/p>\n

Box Selection and Multiline Editing (Hold Alt and drag mouse)<\/b><\/p>\n

You can now do box selection and edit multiple lines! See a video demo here:<\/p>\n

http:\/\/blogs.msdn.com\/b\/visualstudio\/archive\/2009\/10\/26\/box-selection-and-multi-line-editing<\/a><\/p>\n

Now you have all the secret weapons. Have fun writing your own VB Windows Phone applications!<\/p>\n

TipCalculator<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

by Yang Xiao Today we are announcing the release to web (RTW) of Visual Basic for Windows Phone Developer Tools. This walkthrough demonstrates how easy and convenient it is to develop a VB Windows Phone application using the newly released tools. You\u2019ll see that the many new IDE features in Visual Studio 2010, which help […]<\/p>\n","protected":false},"author":13,"featured_media":255385,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[155],"tags":[9,185,653,133],"class_list":["post-1713","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-visual-studio","tag-debug","tag-node-js","tag-visual-basic","tag-xaml"],"acf":[],"blog_post_summary":"

by Yang Xiao Today we are announcing the release to web (RTW) of Visual Basic for Windows Phone Developer Tools. This walkthrough demonstrates how easy and convenient it is to develop a VB Windows Phone application using the newly released tools. You\u2019ll see that the many new IDE features in Visual Studio 2010, which help […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts\/1713","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/comments?post=1713"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts\/1713\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/media\/255385"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/media?parent=1713"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/categories?post=1713"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/tags?post=1713"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}