Announcing Microsoft Visual Basic CTP for Windows Phone Developer Tools

VBTeam

Today we announced availability of the Microsoft Visual Basic CTP for Windows Phone Developer Tools.  You can download the release here:

This CTP is to be used with the Windows Phone Developer Tools, in order to do Windows Phone 7 development with Visual Basic. We have heard a lot of customer requests for this capability and are all very excited about today’s announcement. Here are some Microsoft blog posts regarding this announcement:

Please find below a walkthrough with screenshots of the experience creating a Windows Phone 7 application with Visual Basic, using the new CTP.

WALKTHROUGH:

Open Visual Studio and create a new project by selecting the File | New Project menu command.

The New Project window will be displayed. Expand the Visual Basic templates, and then select the Silverlight for Windows Phone templates.

Select the Windows Phone Application template. Fill in the project Name as “ConversionCalculator”.

Click OK. A new project will be created and MainPage.xaml will be opened in the Visual Studio designer window.

clip_image002

The next step is to lay out the controls of the application using the Visual Studio designer. Once you open a xaml file, click on toolbox, you can drag and drop any control onto your design surface. , The final layout will look similar to the following screen shot:

clip_image004

clip_image006

For anyone that who worked with Winforms, WPF, Silverlight or ASP.NET, creating a page layout is very similar. Drag and drop controls from the toolbox onto the designer surface and modify the properties of the controls either through the properties window, by modifying the .xaml code directly or by using the mouse to control size & position of controls on the surface.

To save you the effort of having to do this and make sure all the names match, you can simply replace the contents of MainPage.xaml with the .xaml code below.

The page itself is quite simple and consists of Radio Buttons, Listbox , Buttons, Textboxes, and TextBlocks. All of these should be familiar to those that have done any other development using a UI using Visual Studio.

<phone:PhoneApplicationPage x:Class=”ConversionCalculator.MainPage” xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation” xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml” xmlns:phone=”clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone” xmlns:shell=”clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone” xmlns:d=”http://schemas.microsoft.com/expression/blend/2008″ xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006″ mc:Ignorable=”d” d:DesignWidth=”480″ d:DesignHeight=”768″ FontFamily=”{StaticResource PhoneFontFamilyNormal}” FontSize=”{StaticResource PhoneFontSizeNormal}” Foreground=”{StaticResource PhoneForegroundBrush}” SupportedOrientations=”Portrait” Orientation=”Portrait” shell:SystemTray.IsVisible=”True”>

    <!–LayoutRoot is the root grid where all page content is placed–>     <Grid x:Name=”LayoutRoot” Background=”Transparent”>         <Grid.RowDefinitions>             <RowDefinition Height=”Auto”/>             <RowDefinition Height=”*”/>         </Grid.RowDefinitions>

        <!–TitlePanel contains the name of the application and page title–>         <StackPanel x:Name=”TitlePanel” Grid.Row=”0″ Margin=”12,17,0,28″>             <TextBlock x:Name=”ApplicationTitle” Text=”Conversion Calculator” Style=”{StaticResource PhoneTextNormalStyle}”/>             <TextBlock x:Name=”PageTitle” Text=”Conversion” Margin=”9,-7,0,0″ Style=”{StaticResource PhoneTextTitle1Style}”/>         </StackPanel>

        <!–ContentPanel – place additional content here–>         <Grid x:Name=”Co ntentPanel” Grid.Row=”1″ Margin=”12,0,12,0″>             <Grid Height=”595″ HorizontalAlignment=”Left” Margin=”0,6,0,0″ Name=”Grid1″ VerticalAlignment=”Top” Width=”468″>                 <StackPanel Height=”140″ HorizontalAlignment=”Left” Margin=”15,21,0,0″ Name=”StackPanel1″ VerticalAlignment=”Top” Width=”427″>                     <RadioButton Content=”Length” Height=”71″ Name=”RadioButton1″ />                     <RadioButton Content=”Weight” Height=”71″ Name=”RadioButton2″ />                 </StackPanel>                 <TextBlock Height=”30″ HorizontalAlignment=”Left” Margin=”15,187,0,0″ Name=”TextBlock1″ Text=”Conversions” VerticalAlignment=”Top” />                 <ListBox Height=”159″ HorizontalAlignment=”Left” Margin=”145,167,0,0″ Name=”LstConversions” VerticalAlignment=”Top” Width=”297″ />                 <TextBlock Height=”30″ HorizontalAlignment=”Left” Margin=”18,345,0,0″ Name=”TextBlock2″ Text=”From:” VerticalAlignment=”Top” />                 <TextBlock Height=”30″ HorizontalAlignment=”Left” Margin=”18,404,0,0″ Name=”TextBlock3″ Text=”To:” VerticalAlignment=”Top” />                 <TextBlock Height=”30″ HorizontalAlignment=”Left” Margin=”18,463,0,0″ Name=”TextBlock4″ Text=”Factor:” VerticalAlignment=”Top” />                 <TextBox Height=”72″ HorizontalAlignment=”Left” Margin=”129,322,0,0″ Name=”TxtFrom” Text=”0″ VerticalAlignment=”Top” Width=”327″ />                 <TextBlock Height=”30″ HorizontalAlignment=”Left” Margin=”145,404,0,0″ Name=”TxtTo” Text=”0″ VerticalAlignment=”Top” Width=”297″ />                 <TextBlock Height=”30″ HorizontalAlignment=”Left” Margin=”145,463,0,0″ Name=”TxtFactor” Text=”0″ VerticalAlignment=”Top” Width=”297″ />                 <Button Content=”Calc” Height=”72″ HorizontalAlignment=”Left” Margin=”49,508,0,0″ Name=”Button1″ VerticalAlignment=”Top” Width=”160″ />                 <Button Content=”Reset” Height=”72″ HorizontalAlignment=”Left” Margin=”203,508,0,0″ Name=”Button2″ VerticalAlignment=”Top” Width=”160″ />             </Grid>         </Grid>     </Grid>

</phone:PhoneApplicationPage>

 

 

 

Next step: Add code to implement the application logic.

We now have a user interface for our phone application but it doesn’t do anything. So we need to add some code to the application to make the converter work. Adding code is similar to the current experience with Silverlight or WPF. You can add code in code behind xaml.vb, or you can add code file into existing project.

The general editing experience is similar to Winform, Silverlight and WPF application development. IntelliSense , colorization, and code spit work the same. New VS2010 IDE features such Generate From Usage and Navigate To also work well with phone app. Double click the Reset button, and a default event handler will be generated. You should see something similar to the following …

Partial Public Class MainPage
     Inherits PhoneApplicationPage
     Public Sub New()
         InitializeComponent()

     End Sub
 
     Private Sub button1_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
    End Sub
End Class<?xml:namespace prefix = o />

In this method we simply reset the textboxes back to a default value. This should be as straightforward as setting the appropriate textbox .text properties.

Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles Button2.Click TxtFrom.Text = “0” TxtTo.Text = “0” TxtFactor.Text = “0” End Sub

 

 

IntelliSense works and will provide you with options for Controls, properties etc. This helps identify any new properties you may not be familiar with.

To add a little spice to the app, we are going to add another class into the project and use this store the various conversions factors.

We can simply add a new code file to the project using Project -> Add Class… and then add a class called “Conversions.vb”. The code is pretty straightforward and will simply define some auto implemented properties and an override for the .ToString method.

Public Class Conversions Public Property FromUnit As String = “” Public Property ToUnit As String = “” Public Property ConversionFactor As Double = 0

Public Overrides Function ToString() As String Return FromUnit & ” => “ & ToUnit End Function End Class

 

 

Next we’re going to retrieve the conversion factors from an XML Literal using a XML LINQ query. To do this, we need to add a reference to System.Xml.Linq. Once added, you should see it appear in the application references list.

clip_image008

 

 

Now we can add the final code to set up the XML literal with the conversions and implement the filtering using the radio buttons and a LINQ query over the XML.

For this, we are going to add a few VB methods. We’ll see how new features in VS2008 and VS2010 can help us achieve this easily.

Again, you can simply copy the entire code behind file below. and replace the contents. (If you copied the .xaml file earlier, then copying this VB code file will ensure that the control names match between the two files.)

Partial Public Class MainPage Inherits PhoneApplicationPage

‘ Constructor Public Sub New() InitializeComponent() PopulateAllConversions() End Sub

Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles Button2.Click TxtFrom.Text = “0” TxtTo.Text = “0” TxtFactor.Text = “0” End Sub

Private AllConversions As System.Xml.Linq.XElement

Private Sub PopulateAllConversions() AllConversions = <Conversions>                              <Conversion Type=Length From=meters To=centimeter>                                  100                              </Conversion>                              <Conversion Type=Length From=centimeter To=meter>                                  0.01                              </Conversion>                              <Conversion Type=Length From=inch To=centimeter>                                  2.5                              </Conversion>                              <Conversion Type=Length From=centimeter To=inche>     &nb sp;                            0.4                              </Conversion>                              <Conversion Type=Weight From=lbs To=Kg>                                   2.2                              </Conversion>                              <Conversion Type=Weight From=Kg To=lb>                                    0.453                              </Conversion>                          </Conversions> End Sub

Private Sub RetrieveConversions(ByVal Type As String) If AllConversions IsNot Nothing Then ‘Query the XML Based upon Type argument Dim QueryItems = From item In AllConversions…<Conversion> Where item.@Type = Type Select item

‘Populate the Listbox LstConversions.Items.Clear() For Each i In QueryItems LstConversions.Items.Add(New Conversions With {.FromUnit = i.@From, .ToUnit = i.@To, .ConversionFactor = i.Value})

Next End If End Sub

Private Sub RadioButton1_Checked(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles RadioButton1.Checked, RadioButton2.Checked ‘Filter Listbox depending on radio button checked If sender Is RadioButton1 Then RetrieveConversions(“Length”) ElseIf sender Is RadioButton2 Then RetrieveConversions(“Weight”) End If End Sub

Private Sub LstConversions_SelectionChanged(ByVal sender As System.Object, ByVal e As System.Windows.Controls.SelectionChangedEventArgs) Handles LstConversions.SelectionChanged If sender Is LstConversions Then If LstConversions.SelectedItem IsNot Nothing Then TxtFactor.Text = CType(LstConversions.SelectedItem, Conversions).ConversionFactor.ToString Else TxtFactor.Text = “0” End If End If End Sub

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles Button1.Click Try Dim calcvalue = CDbl(TxtFrom.Text) * CDbl(TxtFactor.Text) TxtTo.Text = calcvalue.ToString Catch ex As Exception TxtTo.Text = “Invalid” End Try End Sub End Class

 

 

The code above declares methods with event handlers for the following events

· RadioButton1.Click

· RadioButton2.Click

· LstConversion.SelectionChanged

· Button1.Click

· Button2.Click

At this point we should be able to build the application and test it.

We can build the solution using Debug | Build Solution menu command. The project should build without any errors in the Error List window. You can open the Error List window, if it is not already open, by selecting the View | Other Windows | Error List menu command. If there are errors, review the steps above, correct any errors, and then build the solution again.

Even if we don’t have windows phone, we do have a Windows Phone Emulator which allows us to debug and test the app more easily by selecting the Debug | Start Debugging menu command. In the toolbar you can see both options.

clip_image010

This will open the emulator window and launch the application.

clip_image012

Now let’s run our first converter app on emulator! Select a Radio Button and ensure the conversion listbox is populated. Select a conversion and ensure the Factor is populated. Then enter a value and click the calc button to ensure the Result is calculated.

While debugging, you may want to debug specific sections of code. No problem! Set debug breakpoints in the code by placing the cursor on the desired line of code and selecting the Debug | Toggle Breakpoint menu command. Basically, you can debug windows phone app in the same way that you debug other projects.

After the breakpoint is hit, you can step line by line, watch variables in the watch windows, and use other usual Visual Studio debugging techniques, in order to to determine your application behavior.

You can then stop debugging when you have done enough testing.

After debugging the application, you may realize that entering the “From” units with the virtual keyword involved having to change to the digits view every time. We would prefer that this showed the numeric values by default. This can be easily achieved with a slight modification of the .xaml file and replacing the following line:

<TextBox Height=”72″ HorizontalAlignment=”Left” Margin=”129,322,0,0″ Name=”TxtFrom” Text=”0″ VerticalAlignment=”Top” Width=”327″ />

In place of the line above, paste in the following code which includes a textbox InputScope

<TextBox Height=”72″ HorizontalAlignment=”Left” Margin=”129,322,0,0″ Name=”TxtFrom” Text=”0″ VerticalAlignment=”Top” Width=”327″>      <TextBox.InputScope>           <InputScope>                <InputScopeName NameValue=”Digits” />           </InputScope>      </TextBox.InputScope> </TextBox> 

 

 

You can thethen step into the application again and start debugging, to see these new settings.

Each time you debug, you do not need to close the emulator. In fact this results in additional time starting the emulator. Instead, leave it running even when you stop debugging. This way when you do you start your next debugging session, it simply deploys the updated application to the emulator and the resulting startup is significantly quicker.

Congratulations! Now your first Windows Phone 7 Silverlight application in VB is up running! Fortunately, we were able to enjoy the same editing and debugging experience as in other applications.

As you can see, this is a comprehensive Visual Basic CTP for Windows Phone development.

Here are some additional useful links, for further information and discussion: 

· Windows Phone Developer Blog

· Windows Phone Forums

· Microsoft Connect

· Visual Basic Developer Center

· Windows Phone 7 Jump Start

· Windows Phone 7 Training Kit for Developers

Enjoy the CTP and thank you in advance for your feedback!

0 comments

Leave a comment

Feedback usabilla icon