Xamarin Tutorial - Hello World in 10 minutes

Edit your code

When developing applications with Xamarin.Forms, XAML Hot Reload is available when you're debugging your application. This means that you can change the XAML user interface (UI) while the application is running and the UI will update automatically.

In the Solution Explorer, double-click the MainPage.xaml file under the AwesomeApp project.

Currently, the BackgroundColor of the Frame is set to Xamarin blue as shown in the following code:

MainPage.xaml
<Frame BackgroundColor="#2196F3" Padding="24" CornerRadius="0" >

Let's update the background color to DeepPink or feel free to pick your favorite color.

MainPage.xaml
<Frame BackgroundColor="DeepPink" Padding="24" CornerRadius="0" >

If you don't see a Frame element in your MainPage.xaml, you may be on an older version of Visual Studio. If that's the case, simply paste the following code inside of the StackLayout:

MainPage.xaml
  <Frame BackgroundColor="DeepPink" Padding="24" CornerRadius="0">
    <Label Text="Welcome to Xamarin.Forms!" HorizontalTextAlignment="Center" TextColor="White" FontSize="36"/>
  </Frame>

Save your changes by selecting File > Save or select CTRL+S and the UI will update.

Save your changes by selecting File > Save or select CMD+S and the UI will update.

Android emulator running the Xamarin app. A 'Welcome to Xamarin.Forms!` message is displayed with the new color selected. In this case Hot Pink.

Now, you'll add a button to the user interface, along with a click event that will increase and display a count.

Add a button

Open MainPage.xaml and add the following code under the </Frame> closing tag:

MainPage.xaml
<Button Text="Click Me" Clicked="Handle_Clicked" />

The code inside of the ContentPage in MainPage.xaml should look like the following:

MainPage.xaml
<StackLayout>
  <Frame BackgroundColor="DeepPink" Padding="24" CornerRadius="0">
    <Label Text="Welcome to Xamarin.Forms!" HorizontalTextAlignment="Center" TextColor="White" FontSize="36"/>
  </Frame>
  <Button Text="Click Me" Clicked="Handle_Clicked" />
  <Label Text="Start developing now" FontSize="Title" Padding="30,10,30,10" />
  <!--More Labels here -->
</StackLayout>

Save your changes by selecting File > Save or select CTRL+S and the UI will update with the button.

Save your changes by selecting File > Save or select CMD+S and the UI will update with the button.

Stop debugging

To change non-UI logic, you need to stop debugging. From the menu, select Debug > Stop Debugging.

To change non-UI logic, you need to stop debugging. From the menu, select Run > Stop Debugging.

Add an event handler

Open MainPage.xaml.cs (this file is nested under MainPage.xaml, or you can right-click and select View Code from the menu)

Drop down selection to display code behind of MainPage.xaml

Add the following code inside of the class:

MainPage.xaml.cs
int count = 0;
void Handle_Clicked(object sender, System.EventArgs e)
{
    count++;
    ((Button)sender).Text = $"You clicked {count} times.";
}

Run the application

From the menu, select Debug > Start Debugging.

From the menu, select Run > Start Debugging.

When your app launches, click the button. The number of clicks will be displayed in the main label.

The Android app running with a button that can be clicked.

The iOS and Android apps running with a button that can be clicked

Continue