The creation of the UWP app HelloWorld

Source: Internet
Author: User
<span id="Label3"></p><p><p><span style="font-size: medium;">Step 1: Create a new project in Visual Studio</span></p></p> <ul class="litype_1" type="1"> <ul class="litype_1" type="1"> <li><span style="font-size: medium;">Start Visual Studio RC. The Visual Studio RC start Page Appears. (from now on, we'll simply call Visual Studio RC as visual Studio.) )</span></li> <li><span style="font-size: medium;">Choose File > New > Project. The New Project dialog box Appears. You can select the type of template to display in the left pane of the dialog box.</span></li> <li><span style="font-size: medium;">In the left pane, expand installed > Templates > Visual C # > windows, and then choose the Windows Universal template Group. The center pane of the dialog box displays a list of project templates for Universal Windows Platform (UWP) apps.</span></li> <li><span style="font-size: medium;">In the center pane, Select the blank app (Windows Common) Template. The blank application template creates a basic UWP app that compiles and runs, but does not contain any user interface controls or Data. This tutorial will guide you to adding controls to the app.</span></li> <li><span style="font-size: medium;">In the name text box, type HelloWorld "".</span></li> <li><span style="font-size: medium;">Click OK to create the Project. Visual Studio creates the project and displays the project in solution Explorer.<br></span></li> </ul> </ul><span style="font-size: medium;"><span style="font-size: medium;"><span>Although "blank app" is the most basic template, it still contains many files:</span></span></span> <ul> <ul> <li><span style="font-size: medium;">Manifest file (package.appxmanifest), which describes the app (its name, description, tile, start page, and so On) and lists the files that the app Contains.</span></li> <li><span style="font-size: medium;">A set of logo images (assets\logo.scale-100.png, assets\widelogo.scale-100.png, and Assets\smalllogo.scale-100.png) that are used to display in the start MENU.</span></li> <li><span style="font-size: medium;">Represents an image (assets\storelogo.scale-100.png) that is applied to the Windows Store.</span></li> <li><span style="font-size: medium;">Used to display the splash screen (assets\splashscreen.scale-100.png) when the app Starts.</span></li> <li><span style="font-size: medium;">The applied XAML and code files (app.xaml and App.xaml.cs).</span></li> <li><span style="font-size: medium;">The start Page (MAINPAGE.XAML) and the accompanying code files (MainPage.xaml.cs), which run when the app Starts.<br></span></li> </ul> </ul><span style="font-size: medium;"><span style="font-size: medium;"><span>these files are essential to all UWP apps that use C #. Each project that you create in Visual Studio contains these Files. </span></span></span><p><p><span style="font-size: medium;"><span></span></span> <span style="font-size: medium;">2nd step: Modify what is included in the start Page file? </span></p></p><span style="font-size: medium;"><span style="font-size: medium;"><span>to view and edit the files in your project, double-click the file in Solution Explorer. By default, You can expand a XAML file to view its associated code files, just as you would expand a folder. The XAML file opens in Split view to display both the design interface and the XAML Editor. </span></span></span><span style="font-size: medium;"><span style="font-size: medium;"><span>in this tutorial, you can use only a small number of previously listed files: app.xaml, mainpage.xaml, and MainPage.xaml.cs. </span></span></span><p><p><span style="font-size: medium;">App.xaml and App.xaml.cs</span></p></p><span style="font-size: medium;"><span style="font-size: medium;"><span>App.xaml is where you declare the resources used in your app. App.xaml.cs is a code-behind file for App.xaml. Code-behind is code that is combined with a partial class of XAML Pages. XAML, together with code-behind, consists of a complete class. App.xaml.cs is the entry point for the Application. As with all Code-behind pages, It contains a constructor that calls the InitializeComponent Method. You don't have to write InitializeComponent METHODS. This method is generated by Visual Studio, and its primary role is to initialize the elements declared in the XAML File. App.xaml.cs also contains some methods for handling the activation and suspension of the app. </span></span></span><span style="font-size: medium;"><span style="font-size: medium;"><span> </span></span></span><p><p><span style="font-size: medium;">MainPage.xaml</span></p></p><span style="font-size: medium;"><span style="font-size: medium;"><span>in mainpage.xaml, you define the UI for your app. You can add elements directly using XAML markup, or you can use the design tools provided by Visual Studio. MainPage.xaml.cs is the Code-behind page for Mainpage.xaml. You can add application logic and event handlers in it. </span></span></span><span style="font-size: medium;"><span style="font-size: medium;"><span>These two files together define a new class called MainPage that inherits from the <span>Page</span>in the HelloWorld namespace. </span></span></span><span style="font-size: medium;"><span style="font-size: medium;"><span>MainPage.xaml</span></span></span><p><p><span style="font-size: medium;"><span style="font-size: medium;"><span style="color: #333333;"><span>[url=] xaml[/url]</span><br><br><br></span></span></span></p></p> <blockquote> <blockquote> <page x:class= "helloworld.mainpage" xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" XM lns:x= "http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local= "using:helloworld" xmlns:d= "http// schemas.microsoft.com/expression/blend/2008 "xmlns:mc=" http://schemas.openxmlformats.org/markup-compatibility/ 2006 "mc:ignorable=" D "> <grid background=" {ThemeResource applicationpagebackgroundthemebrush} "> </gri D></page> </blockquote> </blockquote><p><p><span style="font-size: medium;"><span style="color: #333333;"><br><br></span><br></span></p></p><span style="font-size: medium;"><span style="font-size: medium;"><span>MainPage.xaml.cs</span></span></span> <blockquote> <blockquote> <span>[url=] c#[/url]</span> <br> <br> <br>Using windows.ui.xaml;using windows.ui.xaml.controls;namespace helloworld{//<summary>//an empty page tha    T can is used on it own or navigated to within a Frame. </summary> public sealed partial class Mainpage:page {public MainPage () {this .        InitializeComponent (); }    }} </blockquote> </blockquote><p><p><span style="font-size: medium;"><span style="color: #333333;"><br></span><br>Modify the Start Page</span></p></p><span style="font-size: medium;"><span style="font-size: medium;"><span>now, Let's add some content to the app. </span></span></span><em id="__mceDel"><em id="__mceDel">                           </em></em><span style="font-size: medium;"><span style="font-size: medium;"><span>to modify the start Page</span></span></span> <ul class="litype_1" type="1"> <ul class="litype_1" type="1"> <li><li><span style="font-size: medium;">In solution explorer, Double-click MainPage.xaml to open it.</span></li></li> <li><span style="font-size: medium;"><span style="font-size: medium;"><span style="font-size: medium;">in the XAML editor, add controls for the UI. In the root <span>Grid</span> , add this XAML. It contains a <span>StackPanel</span>titled <span>TextBlock</span> , a TextBlock that asks for the name of the user, a <span>TextBox</span> element to accept the User's name, a <span>Button </span>, and another TextBlock to show greetings. Some of these controls have names, so you can refer to them later in your Code. </span></span></span> <blockquote> <blockquote> <span> [url=]xaml[/url] </span> <br> <br> <br>         <stackpanel x:name= "contentpanel" margin= "120,30,0,0" >            <textblock text= "Hello, world! " margin= "0,0,0,40"/>            <textblock text= "what ' s your name?" />            <stackpanel x:name= "inputpanel" orientation= "horizontal" margin= "0,20,0,20" >                <textbox x:name= "nameinput "width=" horizontalalignment= "left"/>                < Button x:name= "inputbutton" content= "Say" Hello "/>            </ stackpanel>            <textblock x:name= "greetingoutput"/>        </StackPanel> </blockquote> </blockquote><span style="font-size: medium;"><span style="font-size: medium;"><br><br><br></span></span><span style="font-size: medium;">Controls that you add in the <span style="font-size: medium;">XAML Editor are displayed in design VIEW. </span></span></li> </ul> </ul><p><p></p></p><p><p><span style="font-size: medium;"><span style="line-height: 24px;"><span style="font-size: medium;">Step 3: Launch the app</span><br></span></span></p></p><span style="font-size: medium;"><span style="font-size: medium;"><span>at this point, you've created a very simple app. Now is a good time to build, deploy, and launch your app and see how it looks. You can debug your app on your local computer, in a simulator or emulator, or on a remote DEVICE. </span></span></span><span style="font-size: medium;"><span style="font-size: medium;"> <span style="font-size: medium;"> <span style="font-size: medium;">launch an app on a desktop device</span><br></span></span></span><span style="font-size: medium;"><span style="font-size: medium;"><span>by default, The app runs on the local computer. The target Device menu provides several options for debugging apps on devices in the desktop device family. </span></span></span> <ul> <ul> <ul> <li><span style="font-size: medium;">Analog device</span></li> <li><span style="font-size: medium;">Local computer</span></li> <li><span style="font-size: medium;">remote computer</span></li> </ul> </ul> </ul><p><p></p></p><p><p></p></p><p><p> Creating a UWP app HelloWorld </p> </p></span>

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.