Announcing Microsoft Visual Basic CTP for Windows Phone Developer Tools

Announcing Microsoft Visual Basic CTP for Windows Phone Developer Tools

Rate This
  • Comments 13

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="ContentPanel" 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">
                                 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!

Leave a Comment
  • Please add 4 and 6 and type the answer here:
  • Post
  • Thanks for the comprehensive walkthrough, Spotty!

  • Its been a tough time keeping quiet about the work weve been doing behind the scenes to enable this support but now VB developers can get in on the party and write some great apps using VB.   Windows Phone 7 looks great - I can't wait for this to be released.

  • Compliments! It's really good to see that Microsoft has decided to support VB for WP7 development. I'm looking forward to build my first WP7 app!

  • Nice to have VB.NET support, there so many VB developer out there. I am planning for very seious programming. that will tap into telephony.

    do you have samples of directions, on where i can find information for writing program, that can intercept phone call(incoming & out going). Iam planning to write application as with below mentioned features.

    1) Calling card feature ot intercept out going call inspect the number and use dial the calling card number

    2) similarly intercept incoming call, check if i am in meeting, hangup the call and send sms, telling user i am in meeting from so and so times.

    Things like that.

    Any help towards material which will help me in this direction is appreciated.

  • Font size of this article is tiny...I know that Microsoft transitioned to a new blog server (last few months)...this default text size is too small for sure.

  • @John Sorry about the font size. I've increased this now.

  • Hi, my VB.NET app is almost done and I want to publish it soon in the App Hub. When will the final tools be available or could I try to submit my app with the CTP tools compiled?

    Thank you!

  • This CTP is to be used with the Windows Phone Developer Tools, in order to do Windows Phone 7 development with Visual Basic. This is very informative post.Thank you for share  this great knowledge with us.

    <a href=" www.fprinting.com/Rectangular-Sticker-Printing.htm"> Rectangular Sticker Printing</a>

  • Non of the templates work on my machine.

    Anyone else having this problem?

    "Object ref not set to an instance" or "Proj type not supported by this installation"

  • Eric, could you try out these installation-troubleshooting steps please?

    blogs.msdn.com/.../async-ctp-refresh-installation.aspx

  • I can't get it to work. Tried uninstall and reinstall of everything. still broke.

  • Eric, let me know what four version numbers you get (as on that page)

  • Now I have that nagging Install Office 2003 dialog! Any idea hot to get rid of that?

    Why do you release it if you have these problems?

Page 1 of 1 (13 items)