Xamarin.Forms - Useful String Converters for Your Text

Introduction

 

Mobile apps commonly display strings such as lable titles, documents and any kind of text. Strings could be either hard-coded in the app code, for which you might have control, but they could also come from external services such as APIs so you might need additional formatting when data-binding to the UI.

 

In this article I will share some of the converters I use in my daily work, which are very useful to satisfy some common needs.

 

I will start with the converter's code, then I will put them all together inside an example. 

 

Title case converter

 

Title-casing is when the first letter of each word in a string is capitalized, for example, "Title Case Converter". It is very common to have title-casing especially on labels that represent the title of an area.  It is very easy to format a string to title-casing using the ToTitleCase method from the TextInfo property, exposed by the CultureInfo class.

 

Here's the code:

using System;
using System.Globalization;
using Xamarin.Forms;

namespace adsStringConverters
{
    public class StringToTitleCaseConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if (value == null) return string.Empty;

            string originalString = value.ToString().ToLower();

            return CultureInfo.CurrentCulture.TextInfo.ToTitleCase(originalString);
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}

Notice how the Convert method first does a conversion to lower case, which makes sense with a string that needs to be converted to title-casing.

 

Escaping new line symbols

 

More often than not, strings that an app consumes from a database contain escape symbols, such as \n for new lines. Even if views like the Entry and the Editor in Xamarin.Forms should automatically parse these symbols, it's not uncommon that this doesn't happen. You can avoid wasting time and create a converter that removes the \n (new line) and \r (return) symbols. The code is the following,

using System;
using System.Globalization;
using Xamarin.Forms;

namespace adsStringConverters
{
    public class NewLineConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if (value != null)
            {
                value = (value as string).Replace("\\r\\n", Environment.NewLine);
                value = (value as string).Replace("\r\n", Environment.NewLine);
                value = (value as string).Replace("\\n\\n", Environment.NewLine);
                value = (value as string).Replace("\\n", Environment.NewLine);
                value = (value as string).Replace("\n", Environment.NewLine);
            }
            return value;
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            return null;
        }
    }
}

The code basically replaces the escape symbols with the Environment.NewLine object that is how .NET handle a new line and carriage return in a string.

 

Using the converters 

 

Now let's build an example. Because converters are used with data-binding scenarios, the first thing to do is creating a view model class that exposes data-bound properties of type string, each assigned with some text that will be the subject of the conversion. The code is self-explanatory.

using System.ComponentModel;

namespace adsStringConverters
{
    public class StringViewModel: INotifyPropertyChanged
    {
        private string _textToTitleCase;

        public event PropertyChangedEventHandler PropertyChanged;

        public string TextToTitleCase
        {
            get
            {
                return _textToTitleCase;
            }
            set
            {
                _textToTitleCase = value;
                this.PropertyChanged?.Invoke(this,
                    new PropertyChangedEventArgs(nameof(TextToTitleCase)));
            }
        }

        private string _textWithNewLine;
        public string TextWithNewLine
        {
            get
            {
                return _textWithNewLine;
            }
            set
            {
                _textWithNewLine = value;
                this.PropertyChanged?.Invoke(this,
                    new PropertyChangedEventArgs(nameof(TextWithNewLine)));
            }
        }


        public StringViewModel()
        {
            this.TextToTitleCase = "This is a label title";
            this.TextWithNewLine = "This is a long string.\n\rPlease go to a new line";
        }
    }
}

Like any other view model class, the INotifyPropertyChanged interface implementation is necessary to make the UI refresh based on property changes, because the binding starts before the value assignment.

 

In the constructor of the MainPage.cs file, let's assign a view model instance to the Page's BindingContext:

public MainPage()
{
    InitializeComponent();

    BindingContext = new StringViewModel();
}

In the XAML code, the user interface is very simple. We add two labels bound to the properties in the view model, plus the necessary references to the converters as follows:

<?xml version="1.0" encoding="utf-8"?>
<ContentPage
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:d="http://xamarin.com/schemas/2014/forms/design"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" x:Class="adsStringConverters.MainPage"
    xmlns:local="clr-namespace:adsStringConverters">
    <ContentPage.Resources>
        <ResourceDictionary>
            <local:NewLineConverter x:Key="NewLineConverter"/>
            <local:StringToTitleCaseConverter x:Key="TitleCaseConverter"/>
        </ResourceDictionary>
    </ContentPage.Resources>

    <StackLayout Margin="40">
        <!-- Place new controls here -->
        <Label Text="{Binding TextToTitleCase, Converter={StaticResource TitleCaseConverter}}"
               HorizontalOptions="Center" VerticalOptions="CenterAndExpand"
               FontSize="Large"/>

        <Label Text="{Binding TextWithNewLine, Converter={StaticResource NewLineConverter}}"
               HorizontalOptions="Center" VerticalOptions="CenterAndExpand"
               Margin="0,20,0,0"
               FontSize="Medium"/>

    </StackLayout>
</ContentPage>

If you now run the app, you will get the following result:

 

 

This is actually an easy task, but these converters will save time in the implementation.