203 – Now for the left foot

Second step

So far, we’ve managed to get the program created from the default solution templates to build. But we aren’t going to actually to go real far with the project like this. There are things we want to change away from the default and closer to how things need to be for a real app.

There are certain things that are just staples in a XAML/MVVM application so we might as well take care of a little housekeeping now so we can continue to build cleanly and not have to clean up a big mess later. Let’s make some folders in our PCL project. Every project involves making some controls that are going to be reused, so we need a folder for ‘Controls’. This being XAML, we are going to have ‘Converters’. And without some ‘Icons’ our app might be a bit boring.

If you’ve done any reading about Xamarin you already know that each platform project needs its images in a special folder. In Android it’s the ..\Resources\drawable
folder, for example. So, you’re probably wondering why we just made a folder for icons in the PCL project. It’s so we can keep all of our icons in one place, and link references to them in all of the other platform projects. We aren’t going to copy them into the other projects because that just becomes a maintenance problem. Every time the boss says to ‘change the download icon’, you have to be sure to change it in all 5 platforms. In our case, since we will have the actual file in the PCL project and just have reference links in the other projects we only have to change one file in one place one time.

Converters

Let’s touch on converters for just a moment. If you’ve done WPF XAML in the past you should already know what these are. For those that don’t let’s explain something really quick. XAML is a markup language we use to describe our GUI. One of the key concepts is bindings.

  • EX: We bind the text of a label to the string property that holds the value we want to display.
  • We bind the visibility of a control to the bool property that determines if we should see the control. For example, we may not want to even show the [Submit] button on a form until all the entry boxes are filled in.
  • EX: We bind entire views to the currently selected user. If a label is binded to SelectedUser.NameFirst all we have to do is change the SelectedUser and the label will update itself automagically. Consider the implications of that across the entire app. Maybe a given user has poor eyesight. When they log in the theme changes to high contrast and larger type.
  • EX: We bind the volume to the time (through a converter) so the app is only half as loud between 9pm and 8am.
  • With me so far? Well converters are really small reusable classes that do some converting for us for specific purposes. For example, we may want to show a button only when some property is false instead of true. We can’t bind directly to that property, right? And making a second property just to show the opposite value would be a mess. So we use a BoolInvertConverter. We can attach that any time we want the opposite value.

If you’ve never seen this before don’t panic if it’s a bit vague. We’ll do some of this soon and seeing is understanding.

Styles

Styles are another key concept of XAML that you should have seen if you’ve done WPF. If you’ve done web work and used Cascading Style Sheets then you’ve also got some idea where this is going. A style describes how we want a given type of UI element to look. Maybe we want our normal labels to all be white text, 20 point, vertically centered, horizontally at the start. Well we don’t want to have to put all of that on every label every time so we define a Style for that. And, styles can inherit from other styles making it easy for definitions to exist in just one place.

Activity (we’re doing this in our new solution)

We’re going to define a few styles first so we can apply them to some controls we’re going to build later. If you open the app.xaml file you’ll see a fairly bland document. But you might have guessed just by the name Application.Resources, that within this tag is where you will put all of the resources for the application.

Let’s add in a pair of tags for ResourceDictionary. Then inside of them we are going to add a few font size definitions. We’re going to take advantage of Xamarin’s OnPlatform concept to define different values to different platforms. We do this because of how each platform handles fonts just a little differently.

UPDATE (24aug2017) – OnPlatform is all one word

A couple people have asked about Intellisense popping up a suggestion of “On Platform” with a space.  Ignore that. If you put in a space then it is two key words: On and Platform not OnPlatform – and everything goes sideways quickly after that.

To see this in action we can open the MainPage.xaml and use this on the label provided by the solution template.

What makes this even nicer is that resources can use other resources. Let’s define some sizes and colors then reference those in our styles.

Hopefully you can see where we are headed with this. Once you define the small bits you can then make them part of the medium bits and so on. Once you have defined the LabelStyleSml you can use that as the basis for a LabelStyleMed with nothing more than a change to the font size. Since everything is based on some other resources you can change the entire look of your UI with only a couple changes: Change the primary font color in one place and everything that uses it updates, and everything that use something that use it updates, and everything that uses something that uses something that uses it updates {…} Call it ‘inheritance’. Call it ‘Cascading’. Call it whatever you like; I call it really, really nice.

I’m going to give you the markup for a few resources and styles. Sure you could copy/paste it but I might suggest taking the extra 5 minutes to read it and type it into your solution. That simple act helps drive it into your brain, and gives you some hands-on with your IDE so you can get a feel for it popping up helpful Intellisense suggestions and how it marks what it thinks are errors until you complete your typing.

Once you have these in your solution go back to the MainPage a play a bit. Change the style and re-run the app on your device to actually see it in operation. Play around with it a bit… We’ll wait for ya.

06dec2017 – The move to a new host lost some included code. One of the reasons I like the screen shots. I’ll get this style markup replaced as soon as I can. Sorry for the problem.


<!--?xml version="1.0" encoding="utf-8" ?-->

<!-- Application resource dictionary -->

<!--#region Font Sizes -->
<!--#endregion Font Sizes -->

<!--#region Colors -->
<!--#endregion Colors -->

<!--#region Styles (Labels) -->
<!--#endregion Styles (Labels) -->