Xamarin forms lower case button on preview in designer? (Custom components are not being rendered)

Issue

I have an app with a button with text that says 'click me'.

I made this into a lowercase text by adding the code in the resources.Android file of my xamarin forms.

<item name="android:textAllCaps">false</item>

It's uppercase on the designer but when deploying it's what I want. But I also want it to be lowercase in the designer so I can see what's going on.

Designer

Deployment I don't know how to take screnshot on phone but just imagine it as the image above but lower case.

So I want it to also be lowercase in the designer. How do I do this?

This also applies when I import custom fonts. This is how it looked like for my friend but not for me:

I'm also getting this which could be the cause of the problem:

I'M LOOKING FOR A XAMARIN.FORMS SOLTUON. NOT NATIVE. THANK YOU Thanks,

Hello Leo, I am getting this error:

Maybe I will enable hot reload?

Solution

If you have looked at the source code, you will find that in theme Theme.AppCompat, the default property <item name="android:textAllCaps">true</item> of appcompat.widget.Button is true.

You could write a CustomRenderer to change it.

Create a CustomButtonRenderer in your Android project and SetAllCaps(false):

[assembly: ExportRenderer(typeof(Xamarin.Forms.Button), typeof(CustomButtonRenderer))]
namespace your namepace
{
  class CustomButtonRenderer :ButtonRenderer
  {
     public CustomButtonRenderer(Context context):base(context)
     {

     }


     protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Button> e)
      {
        base.OnElementChanged(e);
        if (Control != null)
        {
            Control.SetAllCaps(false);
        }
    }
  }
}

Update

<Button WidthRequest="100" Text="Login" />

before using customrenderer

after using customrenderer

Answered By - Leo Zhu - MSFT