RadButton not left aligned in UWP Release Mode

[Daniel]

Hi there!

I am using the RadButton in an UWP app with Xamarin Forms.

The title should be left aligned and he button should have a padding.

In Debug Mode, everything looks fine but in release mode both padding and alignment are ignored. (See screenshots attached)

This is my code in a clean Telerik template:

<StackLayout Spacing="5" Padding="0,20,0,0" BackgroundColor="LightGray">
        <telerikInput:RadButton Text="Left Aligned With Padding" HorizontalContentAlignment="Start" Padding="20" BackgroundColor="White" />
        <telerikInput:RadButton Text="Left Aligned With Padding" HorizontalContentAlignment="Start" Padding="20" BackgroundColor="White" />
        <telerikInput:RadButton Text="Left Aligned With Padding" HorizontalContentAlignment="Start" Padding="20" BackgroundColor="White" />
    </StackLayout>

[Stefan Nenchev]

Hi, Daniel,

I have managed to easily reproduce the behavior with the same setup. Investigating the UWP layout at runtime, I have noticed that indeed the HorizontalContentAlignment is reset to "Center"(which is its default value) for some reason. I have logged the behavior as a bug at our end so we can review it in more details. You can track its progress on the following link from our Ideas & Feedback portal - Button: [UWP]HorizontalContentAlignment is reset to its default value in Release mode. I have added some points to your account for reporting the undesired behavior. Please subscribe to the public item in order to receive automatic notifications once there is any progress on the matter.

In the meantime, as a workaround, I have managed to avoid the behavior by subscribing to the Loaded event of the native element in UWP and setting the HorizontalContentAlignment of the Button there:

[assembly: ExportRenderer(typeof(TestButtons.MyRadButton), typeof(CustomButtonRenderer))]
namespace TestButtons.UWP.CustomRenderers
{
    class CustomButtonRenderer : Telerik.XamarinForms.InputRenderer.UWP.ButtonRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
        {
            base.OnElementChanged(e);
            this.Control.Loaded += Control_Loaded;
        }
        private void Control_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)
        {
            (this.Element as RadButton).HorizontalContentAlignment = TextAlignment.Start;
        }
    }
}

Note that, in order to use a custom renderer for the RadButton, you need to create a custom class that inherits the RadButton one and eventually target this class in the custom renderer. This is a small limitation of the control as it inherits from the default Button class. Please have a look at the attached sample for more reference.

Would such approach work for you?

Have a great week.

Regards,
Stefan Nenchev
Progress Telerik

[Daniel]

Hi Stefan,

your workaround is working for us. We will track the progress of the bug report.

Thank you very much and best regards,

Daniel