Getting Started with Visual Studio

If you still need to install Visual Studio, check out our earlier article.

Build an App with Visual Studio 2017

by Nicole Bruck

Step 1: Create

We’re going to learn how to use Visual Studio and Xamarin to build a basic Android app (also supports iOS and Windows Phone) — even if you’ve never done any mobile app development before!

  • Select File → New → Project…
  • Choose the Cross-Platform node on the left, select “Cross Platform App (Xamarin.Forms or Native)” project type and name it, “HelloWorld”
  • In the next screen, Select the Blank App template and Portable Class Library (PCL) Code Sharing Strategy:

Step 2: Edit

We’re going to add a text area and button to our mobile app. Then we’ll add an action to our button to display, “Hello, World!”

  • Right-click on the HelloWorldApp (Portable) project, and choose New Item
  • Pick the Forms Xaml Page template and name the new page, “HelloWorldPage”
  • Select the HelloWorldPage.xaml from your Solution Explorer
  • Replace with the following code:
    • <?xml version="1.0" encoding="utf-8" ?>
      <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
      x:Class="HelloWorld.HelloWorldPage">
      <Label Text="{Binding MainText}" VerticalOptions="Center" HorizontalOptions="Center" />
      <ContentPage.Padding>
      <OnPlatform x:TypeArguments="Thickness"
                  iOS="20, 40, 20, 20"
                  Android="20, 20, 20, 20"
                  WinPhone="20, 20, 20, 20" />
      </ContentPage.Padding>
      <ContentPage.Content>
      <StackLayout VerticalOptions="FillAndExpand"
                   HorizontalOptions="FillAndExpand"
                   Orientation="Vertical"
                   Spacing="15">
      <Label Text="Enter your name:" />
      <Entry x:Name="NameEntry" Text="Jane Doe" />
      <Button x:Name="SayHelloButton" Text="Say Hello" Clicked="SayHelloButton_OnClicked" />
      </StackLayout>
      </ContentPage.Content>
      </ContentPage> 
  • In your Solution Explorer, expand the HelloWorldPage.xaml node
  • Select HelloWorldPage.xaml.cs in your Solution Explorer
  • Replace with the following code
    • using System;
      using System.Collections.Generic;
      using System.Linq;
      using System.Text;
      using System.Threading.Tasks;

      using Xamarin.Forms;

      namespace HelloWorld
      {
      public partial class HelloWorldPage : ContentPage
      {
      public HelloWorldPage()
      {
      InitializeComponent();
      }

      private async void SayHelloButton_OnClicked(object sender, EventArgs e)
      {
      var name = NameEntry.Text;
      await DisplayAlert("Greeting", $"Hello {name}!", "Howdy");
      }
      }
      }
  • Open App.xaml.cs in your Solution Explorer
  • Replace “MainPage” with “HelloWorldPage” in public App()

Step 3: Build & Run

Now we’re going to build the project so we can make sure that all the code works.

  • In the Visual Studio toolbar, pick the HelloWorld.Android project and appropriate emulator

If you’re ready to start trying out some of our debugging features, head to our next article: Debug & More.