Beer and Xamarin Forms – Intro to XAML and CodeBehind

In this lesson

  • What is XAML?
  • A review of App.xaml
  • Intro to using a CodeBehind


Tap on time to skip ahead


In this lesson we’re going to take a step back and more pragmatically go through our development process when building a Xamarin.Forms application specifically when we use XAML. In case you don’t now, XAML stands for extendable application markup language and this was a language or coding standard that was used a lot with more traditional .NET applications for desktop or more specifically WPF. Xamarin has taken this standard applied it to Xamarin.Forms where we can use this extendable markup language to declare our user interfaces in our application. 


So with our freshly generated Forms solution we will see that we have this STLBrews PCL which houses two main XAML files right now. We have our App.XAML which is the markup that will hold things like global styles maybe item renderers things of that nature so a lot of global stuff tends to go into our App XAML. And every xml file has a corresponding code behind. And this particular case we have our App class. And we will see that we are setting our main page to the STLBrewsPage. Which if you look down in our solution explorer you’ll see we have xml for that as well. 


Some key elements of xml is namespaces. And namespaces are a very critical part to getting our XAML to compile correctly. We will be adding more namespaces in the future to import in different types of libraries or if we’re wanting to maybe create base classes that can be reused across multiple screens etc. But something that is extremely critical in this particular instance is the specification of the backing class or our CodeBehind for our XAML. 


If we take a look at our STLBrewsPage xmal. We will see we have the same convention where we’re seeing the class or CodeBehind that represents STLBrews.STLBrewsPage which is here. Now what exactly is the purpose of the code behind?


The code behind allows us to interact with the elements that have been declared in our XAML. And to do this, one the first things we need do is give our control a name. So I’m going to say “testLabel” for our name. If I go into our CodeBehind. I will now have access to this particular control and I can set the text like so. “Hello world.” And now if we run our application we should not see what has been specified in our XAML but instead what we should see is “Hello World.” This becomes extremely useful if we have things like buttons. I can say “Text = ‘Tap me’.” And then again I need to give it a name. I’ll give it a name of “testButton.” And now if we go back to our code behind. I can now say” “this.testButton.Click” I’m just going to use a simple lambda expression to handle this. And then I want to say “displayAlert(‘Hi I’ve been tapped’)” Now if we run our application we should be able to tap a button and see our alert.


You also notice that our label has disappeared. And that is because if we take a look here we will see we just have a regular ContentPage. We haven’t specified any sort of layout. So I can come in here real quickly and say StackLayout. And every layout needs two things. HorizontalOptions which specifies how it should behave when it measures or draws itself horizontally. And I’m just going to say “FillAndExpand” for now. And we will get more more into the different options later. And here again I’m going to do this. And now if I enclose our two items and now run this. We should see our test label above our test bottom. And here you can see we’re running into our title bar so I can quickly just come in here and say padding. And the padding starts at the left so I don’t really need padding on the left I’d like some on the top. Zero on the right and then zero for the bottom. And here if we run our application. We should now not be colliding with our title bar. And we’re not. So this is just the very basics of using XAML with our Xamarin.Forms applications.