Display label text in uppercase using xaml in Xamarin.Forms

Question

I have an username label and need to view this as uppercase but this should only relate to the UI. The data (string) should be saved in the db as actual case whatever it is. Could anyone tell me if there is anyway to convert it to uppercase without doing so through the code behind?

Solution 1

As you're aware you can do this from the code behind as such:

string data = "my data";
UILabel myLabel = new UILabel();
myLabel.Text = data.ToUpper();

So bearing in mind that you don't want to do it this way you would need to derive from UILabel and create your own, then simply add the ToUpper() onto the end of the get;set; values of the Text property.

using CoreGraphics;
using System;
using UIKit;

namespace MyApp.Controls
{
    partial class Control_UpperLabel : UILabel
    {
        public Control_UpperLabel IntPtr handle) : base(handle)
        {
               //
        }

        public Control_UpperLabel()
        {
               //
        }

        public override void Draw(CGRect rect)
        {
            base.Draw(rect);
        }

        public override string Text { get => base.Text.ToUpper(); set => base.Text = value.ToUpper(); }    
   }
}

EDIT: As per comments below, here is an alternative solution for Xamarin.Forms

This uses a value converter as part of a binding solution. It's also been slightly amended to use the suggestion by clint in the comments below. Thanks.

public class StringCaseConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        switch ((parameter as string).ToUpper()[0]) 
        { 
        case 'U': 
            return ((string)value).ToUpper(); 
        case 'L': 
            return ((string)value).ToLower(); 
        default: 
            return ((string)value);
        };
    }

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

It would be used in the XAML as such:

Text="{Binding Text, Converter={StaticResource caseConverter}, ConverterParameter=u}}"

Solution 2

You can use Label.TextTransform with TextTransform.Uppercase.

XAML

<Label TextTransform="Uppercase" />

C#

var label = new Label
{
    TextTransform = TextTransform.Uppercase
};

Comments

[Riyas]

i dont want to convert the label text to upper , just need to display upper case. Is there any way to just display it as upper but not to convert in code behind

[JoeTomks]

@Riyas You're only converting the string to upper, you don't have to reuse that string anywhere else, either way I've updated the answer above to upper the text property of the label, rather than using ToUpper() on the string your assigning.

[Riyas]

how to bind this to a label in content view xaml?

[JoeTomks]

are you using Xamarin Forms? or Xamarin native iOS?

[Riyas]

im using xamarin forms

[Riyas]

i already tried it throwing xaml.xamlparseException for key caseConverter

[Riyas]

<Label x:Name="LblSurName" Text="{Binding Name, Converter={StaticResource StringCaseConverter}, ConverterParameter=u}"/> this throwing xamlParseException btw, any solution please

[Riyas]

It worked, Thanks for the [e-mail]/users/4486115/digitalsa1nt

[Clint StLaurent]

I made a minor tweek to your nice converter. Checking against only the first character of the upper/lower parameters gives it more error compensation for how the developer might use it. They can send "U" or "UPPER" as the param and it still works, increasing XAML readability ` switch (param.ToUpper()[0]) { case 'U': return ((string)value).ToUpper(); case 'L': return ((string)value).ToLower(); default: return ((string)value); `

[Clint StLaurent]

Making the property specific to a display need is anti-MVVM. That same property might be used on 10 other views that don't require upper case. Data should remain pure. Its the responsibility of the UI layer to present it in a specific way on a specific view.

[JoeTomks]

@ClintStLaurent thanks for this, when I get chance I'll review your posted code and if it all looks cool, I'll update the answer and credit you for that section :)

[mulodzwi]

@ClintStLaurent a Bindable Property's purpose is to hold a value for the UI. Hence it is used to style or format data as per the UI display requirements.

[Clint StLaurent]

I would disagree for a couple reasons. First... If you wanted to do this in 200 models you'd have to have this extra property in every one of them. No way jose. Where if you use a converter you define it just once and use it 200 times from XAML.