Beer and Xamarin.Forms – Hello XAML Previewer

In this lesson

  • Using XAML Previewer
04:14 C# 100


Tap on time to skip ahead


Now that we’ve gone over what Xamarin Studio has generated for us, how about we see what this application looks like when we run it? I’m going to stop whatever I had running before. I’m going to make sure our iOS project is our startup project. You can do that by right clicking on it and saying set as startup project. This is usually denoted by the fact that the title of the project will be bold. If I hit the run button, our app will compile and then run on our iOS simulator. We’ll see that we have this nice “Hello World, Welcome to Xamarin Forms!”


We can start messing around with our UI right out of the box. For example, I can set BackgroundColor=Color.Red. Now if I run the application, the background of our UILabel should be red. And it is. Maybe I would like the font to be bold. I can say FontAttributes=FontAttributes.Bold.


As you can see, or something that you might be picking up on, is this constant cycle of make a code change, recompile and run, isn’t the most efficient way to build out your UI. With Xamarin Evolve 2016, Xamarin announced an awesome new feature to Xamarin Studio that allows you to design your XAML with a real time preview. Let’s take a look at that.


I’m going to kick things off by adding a new page to our Xamarin Forms application. I’m going to select Forms in my New File wizard and I’m going to select Forms ContentPage XAML. I’m going to create a content page but not a C# content page, or exclusively C# content page. I want to create a content page with XAML. XAML is a markup language that’s used in the Microsoft stack for things like WPF, Silverlight and now Xamarin.


I’m going to call this Breweries Page. If we take a look, we’ll see we have two files that were generated. We have what’s called the code behind which consists purely of C# and then we have our XAML file which acts like our front end of our page. If I expand this out and pull from the right, I can see the preview of the XAML on the right here and I can toggle between iOS and Android.


If I go in here and I type in Label Text=Hello World, we’ll see the update to the right. If I go to Android, I’ll see I have my label there as well. I can also go in here and put in a stack layout, set its orientation to vertical, then I can add some padding to it, maybe 50. We can see immediately to the right how this looks in our application. I can add a Button Text=Tap Me, and we’ll see it again on the right. We can see that it looks a bit different on Android then it does on iOS. So I can come in here and say backgroundColor= (oh, let’s say) lime. Now when I go between the two, we have a more standard look and feel.


This is really great when you build out a more static page, but what happens if, for example, you have a page that is a list of breweries or something returned from a server?