TintColor

That is right! Tint! I like to have a theme for my apps as far as colors and styles and TintColor play a huge role into how your app looks on iOS. iOS has a really great Appearance Class that helps you set defaults throughout your application that you can use to take your icons from this:

to this:

with just this single line of code in the `FinishedLaunching` of your `AppDelegate`:

UITabBar.Appearance.SelectedImageTintColor = UIColor.FromRGB(118,53,235);

Selected TabItem Image

Another way to spice up your user interface is to have a a completely different image on the selected tab. Usually it fills in and inverts the icon in some way. For example we would want our tabs to look like:

So the first thing is to create those selected images and add them to your Resources folder in your iOS project:

Notice I have tab_about.png that is what my ContentPage.Icon property is set to. I have added in the _selected.png too, which is what we will want to use. For this to work the naming is very important as you will see because all we need to do is create a custom renderer in our iOS project to swap out the SelectedImage on the TabBarItems when our TabbedPage shows up:

public class SelectedTabPageRenderer : TabbedRenderer
{
       public override void ViewWillAppear(bool animated)
        {

            if (TabBar?.Items == null)
                return;

            var tabs = Element as TabbedPage;
            if (tabs != null)
            {
                for (int i = 0; i < TabBar.Items.Length; i++)
                {
                    UpdateItem(TabBar.Items[i],  tabs.Children[i].Icon);
                }
            }

            base.ViewWillAppear(animated);
        }

        void UpdateItem(UITabBarItem item, string icon)
        {
            if (item == null)
                return;
            try
            {
                icon = icon.Replace(".png", "_selected.png");
                if(item?.SelectedImage?.AccessibilityIdentifier == icon)
                    return;
                item.SelectedImage = UIImage.FromBundle(icon);
                item.SelectedImage.AccessibilityIdentifier = icon;
            }
            catch(Exception ex)
            {
                Console.WriteLine("Unable to set selected icon: " + ex);
            }

        }
}

That’s it! Super crazy simple to make your tabs look about 100% better! Have fun out there.

Looking for Android? Head over to my blog post outlining how to implement it.

Xamarin.Forms has a simple method that can be called to adjust what the back button’s text property is. It is a bit hidden and a bit hard to understand how to call it. Since a page has a Title, you may assume that there is a BackButtonTitle that would correlate to what would be display, but you would assume wrong. Diving into the API docs we find Xamarin.Forms.NavigationPage.SetBackButtonTitle Method with the docs saying “Sets the title that appears on the back button for page.”. Looking a bit further into the docs we see that it is actually a static method on the NavigationPage class. You are probably thinking at this point wait… why is it on the NavigationPage when you are setting a property for the page. This is a great question that also puzzled me. So how would you use it? All you have to do is call the static method as the first thing you do in the constructor of any page:

NavigationPage.SetBackButtonTitle(this, "Back");

That’s it! It is actually pretty simple, although a bit tedious since it can’t be set in XAML of any sort. Look how much better that looks now! Beautiful. 

Update! Looks like I spoke too soon about the XAML as my good friend Jason Smith here at Xamarin was quick to correct me:

@JamesMontemagno you can set it from XAML. <ContentPage NavigationPage.BackButtonTitle=“Back”>

— Jason Smith (@jassmith87) January 6, 2016

That’s right simply add:

NavigationPage.BackButtonTitle="Back"

into your Content page’s root!