Google WindowsPhone 8.1 SDK: First Sample for Beginner's Tutorial(C#-XAML) | SubramanyamRaju Xamarin & Windows App Dev Tutorials

Friday, 18 April 2014

WindowsPhone 8.1 SDK: First Sample for Beginner's Tutorial(C#-XAML)


Windows Phone 8.1 introduces an important change in the Windows Phone developer ecosystem. In this release, Windows Phone converges with the Windows Store apps platform into a single developer platform that runs the same types of apps i.e Windows Runtime apps.So that please read this post before going to read about this article.
However in this post ,learn how to create a new project, and explore the windows phone 8.1  sdk development environment.

Platform convergence began in Windows Phone 8, which supports a small subset of Windows Runtime APIs, but which differs from Windows in many core areas. In Windows Phone 8.1, there’s so much more in common—a much larger API set, a similar app model and life cycle, a shared toolset, a common UI framework—Windows Phone and Windows Store app developer platforms truly have become one, single development platform.
SourceFile at :WP8.1FirstSample


  • Make sure you’ve downloaded and installed the Windows Phone SDK. For more information, see Get the SDK.
  • I assumes that you’re going to test your app on the Windows Phone emulator. If you want to test your app on a phone, you have to take some additional steps. For more info, see Register your Windows Phone device for development.
  • This post assumes you’re using Microsoft Visual Studio Express 2013 for Windows.


Lets start creating sample 

1)Create the project:

  • Make sure you’ve downloaded and installed the Windows Phone SDK. For more information, seeGet the SDK.
  • Launch Visual Studio from the Windows Start screen. If the Registration window appears, you can register the product, or you can temporarily dismiss the prompt.
  • Create a new project by selecting the FILE | New | Project menu command.
    • In the New Project window, expand the installed Visual C# , and then expand Store Apps. Select the Windows Phone Apps templates.
    • In the list of Windows Phone Apps templates, select the Blank App (Windows Phone)template.
    At the bottom of the New Project window, type MiniBrowser as the Name of the project
                  Pick a Windows Phone app template
    • Click OK. The new project is created, and opens in Visual Studio. You see the following items:
      • The main window contains the code editor and displays App.xaml.cs . In this code file you can define global event handlers.
      • The right pane includes Solution Explorer, which lists the files in the project.
                 App.xaml.cs page open in Visual Studio
    • In Solution Explorer, double-click MainPage.xaml to open it. This page contains the user interface for the first page of your app. The main window is divided into two parts:
      • The right pane contains the XAML markup that defines the user interface for the page.
      • The left pane contains a skin that shows the output of the XAML markup.
    The associated code-behind page, MainPage.xaml.cs , which contains the code to handle user interaction with the page, is not opened or displayed by default.
                 MainPage.xaml open in Visual Studio
      Now you're done with the first step of building your first Windows Phone Store app!

      2)User Interface:

      In this step, lay out the controls for the simple user interface of your app.
      To create the UI
      1. Open the Toolbox in Visual Studio, if it’s not already open, by selecting the VIEW | Toolbox menu command.
      2. Add a title for the app.From the Common XAML Controls group in the Toolbox, add a TextBlock control to the designer surface by dragging it from the Toolbox and dropping it onto the designer surface. Place the TextBlock at the top of the available space. Use the mouse to size the control to the width of the page.
      Visual Studio toolbox
        And set proprties of textblock like this

      <TextBlock Margin="10,10,10,0" TextWrapping="Wrap" Text="MiniBrowser" VerticalAlignment="Top" FontSize="48"/>
       However with same above procedure ,after adding 3 more controls i.e Textbox,Button,Webview  

      In the XAML code in MainPage.xaml, look for the grid that contains your controls. It will look similar to the following. If you want the layout exactly as shown in the preceding illustration, copy the following XAML and paste it to replace the Grid in your MainPage.xaml file.

      <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"        <TextBlock Margin="10,10,10,0" TextWrapping="Wrap" Text="MiniBrowser" VerticalAlignment="Top" FontSize="48"/> 
              <TextBox x:Name="URL" Margin="10,95,124,0" Text="" VerticalAlignment="Top"/> 
              <Button x:Name="Go" Content="Go" HorizontalAlignment="Right" Margin="0,85,10,0" VerticalAlignment="Top" Width="109"/> 
              <WebView x:Name="MiniBrowser" Margin="10,150,10,10"/> 

      With these settings, the control can size and position itself correctly in both portrait and landscape modes.
        App with controls
        Now Your UI is completed

        3)Add the C# code to action 'click':

        When you double-click the Go button, Visual Studio also updates the XAML in MainPage.xamlto connect the button’s Click event to the Go_Click event handler.

        <Button x:Name="Go" Content="Go" ... Click="Go_Click"/>
         In MainPage.xaml.cs or MainPage.xaml.vb, add the two lines of code shown below inside the empty Go_Click event handler. This code takes the URL that the user enters in the text box and navigates to that URL in the WebView control named MiniBrowser.
        private void Go_Click(object sender, RoutedEventArgs e) 
                    string site = URL.Text; 
                    MiniBrowser.Navigate(new Uri(site, UriKind.Absolute)); 

        4)Run the sample:

               To run your app in the emulator
        1. Build the solution by selecting the BUILD | Build Solution menu command.
          If any errors occur, they’re listed in the Error List window. You can open the Error List window, if it’s not already open, by selecting the VIEW | Error List menu command. If there are errors, review the steps above, correct any errors, and then build the solution again.
        2. On the Standard toolbar, make sure the deployment target for the app is set to one of the values for the Windows Phone Emulator, for example, Emulator 8.1 WVGA 4 inch 512MB.
          List of emulators in Visual Studio
        3. Run the app by pressing F5 or by selecting the DEBUG | Start Debugging menu command.
          This opens the emulator window and launches the app. If this is the first time you’re starting the emulator, it takes several seconds for the emulator to start and launch your app.
        4. To test your running app, click the Go button and verify that the WebView control loads the specified web site.
          App running in the emulator
        5. To test the app in landscape mode, press one of the rotation controls on the emulator toolbar.
          Rotation controls for the emulator
          The emulator rotates to landscape mode. The controls resize themselves to fit the landscape screen format.
        6. To stop debugging, you can select the DEBUG | Stop Debugging menu command in Visual Studio.
          It’s better to leave the emulator running when you end a debugging session. The next time you run your app, the app starts more quickly because the emulator is already running.
        Application Deployment tool
        During development you typically deploy and run your app from Visual Studio. Optionally, you can also use the stand-alone Application Deployment tool to deploy your app to the emulator or to a registered device. For more info, see Deploy Windows Phone apps with the Application Deployment tool.
        Windows Phone Application Deployment tool


        Windows Phone Developer Power Tools
        Catch subtle programming errors, capture real-time performance metrics, and collect log files to troubleshoot your app with the three tools in Windows Phone Developer Power Tools. For more info, seeTest and troubleshoot apps with the Windows Phone Developer Power Tools.
        Windows Phone Developer Power Tools

        Congratulations! You’ve now successfully completed your first Windows Phone 8.1 app.
        Note: By default windows phone 8.1 support the Fast App Resume
        Please read next post is about "WindowsPhone 8.1 App Deployment

        Note: Please share your thoughts,what you think about this post,Is this post really helpful for you?I always welcome if you drop comments on this post and it would be impressive.

        Follow me always at  

        Have a nice day by  :)


        1. Hi..

          I have a question regarding windows phone development.

          I am adding PHP SOAP service to my windows phone project.
          I added my service url using Add service reference.

          I created new instance of reference class..

          But I can't see my methods Reference.cs file

          I didn't get what I missing. Can you help me regarding this.

          Waiting for your reply.. Thanks

          1. At the time of adding PHP SOAP service ,You are entered Namespace.So that to access methods of service you must reference with namespace.
            So that you have access method like Myservice.Getdata();
            For your reference link:

          2. Thanks for reply
            Yes.. I tried in same way. After adding service reference the IDE will create reference.cs like this..

            This is the code the geolocation example created. But for me the interface empty.

            public partial class TerraServiceSoapClient : System.ServiceModel.ClientBase, geolocationsample.ServiceReference1.TerraServiceSoap {

            private BeginOperationDelegate onBeginConvertLonLatPtToNearestPlaceDelegate;

            private EndOperationDelegate onEndConvertLonLatPtToNearestPlaceDelegate;


            I tried this sample also

            My guess the problem that I am using PHP SOAP server. The services I tried all are asmx services
            Do you have any PHP webservice link to test.

          3. Yes,check once with your php service,and i am sorry i don't have php service to test.

        2. Hi.. Subbu ,
          Still I didn't find the solution for this issue. Here is my question in MSDN forum.

          & you can try my sample from Here if you free [ ].

          1. Ok sure will try to work on your sample.Thanks for repro

          2. Hi Subbu.. Have you tried my sample.. Waiting for your reply..

          3. Hi,

            Sorry for late reply.Have you got solution,I tried your sample and i think IDE could not able to recognize NuSOAP service methods,However have you tried by making Soap request "HttpWebRequest" instead of consuming?

        3. I want to Integrate Facebook in WINDOWS PHONE 8.1 - UNIVERSAL App ..
          If u can provide me any examples // samples etc will be very helpfull for me ..

          Right nw I am unable to install facebook- client -pre packages etc

          Please help me out ...

          1. Hi ,
            Still i am not tried facebook integration in wp8.1,So i will be update you by working on it.In BTW let me know if you have done.
            and thank you for being a good question :)


        Search Engine Submission - AddMe