Practical .NET

'Hello World' for Your Smartphone: Your First Xamarin Application

• By Peter Vogel
• 06/20/2018

If you set up your project using my previous column as a guide and follow along with this column, then you'll have a (not well architected) Xamarin app running on your Android phone in a few minutes.

Creating Your UI
If you used my previous column as a guide, your Xamarin solution will have a .NET Standard Project with a default XAML file. That's probably as good a start point for creating your "Hello, World" application as any. In my default XAML page, I have a Label inside a StackLayout element, inside a ContentPage element, like this:

<ContentPage.Content>
        <StackLayout>
            <Label Text="Welcome to Xamarin.Forms!"
                VerticalOptions="CenterAndExpand" 
                HorizontalOptions="CenterAndExpand" />
        </StackLayout>
</ContentPage.Content>

The ContentPage element is required. However, if you intend to have only one element inside the ContentPage, you can omit the StackLayout. A single element page probably isn't realistic so, leave the StackLayout control in place and add a Button element underneath the Label. Give that Button element an x:Name attribute (so that you can refer to the Button from code) and a text attribute. Here's what mine looked like:

<Button x:Name="MyButton" Text="Click Me"/>

You'll also need to add an x:Name attribute to any other element that you intend to refer to from code. I've updated the default Label control so I can use it like this:

<Label x:Name="MyLabel" Text="Welcome to Xamarin.Forms!" ...

You're now ready to add code to your basic application. In a well-architected application, you'd use the MVVM design pattern here to implement your code (you might to consider leveraging the MvvmCross package that Nick Randolph has described).

For a "Hello, World" application, though, we'll use something simpler: event handlers. The easiest way to add an event handler to a Button in your XAML file is to add the Clicked attribute to the Button element. After you type the equals sign following the attribute name a <New Event Handler> helper will appear. Hit the Enter key to both add an event handler to your Page's code-behind file and wire that handler up to your Button.

My final Button element looked like this:

<Button x:Name="MyButton" Text="Click Me!" Clicked="MyButton_Clicked"/>

If you switch to the xaml.cs file associated with your XAML file, you should find a method to handle the event waiting for you. Mine looked like this:

private void MyButton_Clicked(object sender, EventArgs e)
{

}

Adding the code to that method to update my Label with "Hello, World" when the button was clicked looked like this:

private void MyButton_Clicked(object sender, EventArgs e)
{
  MyLabel.Text = "Hello, World";   
}

Debugging
You're now ready to debug your app. You could press F5 and test your app in one of Visual Studio's emulators, but where's the fun in that? With Visual Studio 2017 and Xamarin's Live Player, you can run your UI on your Android smartphone while debugging your code in Visual Studio. Besides, if your computer doesn't have a graphics hardware accelerator, your emulator isn't going to run, so much as it will take a leisurely ramble.

The first step in implementing this magic is to make sure that your Android smartphone and your development computer are on the same network. Your second step is to install the Xamarin Live Player app from Xamarin Inc. on your smartphone through Google's Play Store. Once Live Player is installed, start it running. You'll get a (mostly) black screen with a button labeled Pair in the lower right-hand corner.

Now return to Visual Studio and, in Tools | Options | Xamarin | Other, make sure that Enable Xamarin Live Player is checked. After closing the Options dialog, on the toolbar's list of devices you can debug with (that is, the "F5 button"), select the Manage Xamarin Live Play Devices choice. This will pop up a dialog box with a bar code. Aim your phone's camera at the bar code and click the Live Player's Pair button. You'll see a quick picture of your screen appear on your phone and then disappear: Your phone is now paired. Use the X in the upper right hand corner of the dialog box in Visual Studio to make that dialog box disappear.

You'll find that you have a new device on your dropdown list of devices you can debug with. It will have a name that reflects your phone (mine says Samsung GM-G950W Player, for example). Select that choice and press F5: You should see your application running on your phone. Some patience may be required -- check Visual Studio's Output window to see how your compile and deploy process is going.

One your app is displaying on your phone, press the Click Me! button on your form and your message should appear in your label. One piece of advice: Keep an eye on the debugging device you've selected in your toolbar. I've found that it will unexpectedly switch back to using one of the emulators.

Poof! You're now a Xamarin/smartphone/mobile/cross-platform developer. Update your resume and adjust your billing rates accordingly.