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

Introduction:

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

Requirements:

• 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.

Description:

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

             

• 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.

             

• 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.

             

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.

  And set proprties of textblock like this

XAML

<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.

XAML

<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="http://windows.microsoft.com/" 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"/> 
    </Grid>

With these settings, the control can size and position itself correctly in both portrait and landscape modes.

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.

XAML

<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.

C#

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.
   
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.
   
5. To test the app in landscape mode, press one of the rotation controls on the emulator toolbar.
   
   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.

Test:

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.

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  @Subramanyam_B 

Have a nice day by Subramanyam Raju :)