CustomControl - Label Text Error

Question

Hello,

I am having a problem with a custom control in Xamarin.forms.

I have created a control that consists of a Grid, which inside has several elements. One of those elements is a Frame.

The frame has a label inside, whose text is with a bindable property and has implemented in onPropertyChange to update the label.

The behavior that I have is strange since the text comes out wrong, it does not usually put everything and it is not a problem of space. Sometimes he even begins by putting some letters and others come out as time passes. It

What could it be?? I have observed this behavior in android, in ios I have not reproduced it

Thanks!!

Answer 1

Hi @Leon Lu (Shanghai Wicresoft Co,.Ltd.) ,

thanks for answering. The Xaml code:

<Grid  
    xmlns="http://xamarin.com/schemas/2014/forms"  
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
    xmlns:ffimageloadingsvg="clr-namespace:FFImageLoading.Svg.Forms;assembly=FFImageLoading.Svg.Forms"  
    xmlns:xct="http://xamarin.com/schemas/2020/toolkit"  
    x:Name="flPriceButtonControlGrid"  
    ColumnDefinitions="*, 50"  
    RowDefinitions="Auto, Auto"  
    PropertyChanged="fPriceButtonControlGrid_PropertyChanged"  
    RowSpacing="0"  
    x:Class="CustomsRenderExamples.Controls.GridImageCornerButton">  
  
    <Frame  
                x:Name="fPriceBtn"  
                Grid.RowSpan="2"  
                Grid.ColumnSpan="2"  
                Padding="10"  
                xct:TouchEffect.PressedOpacity="0.6"  
                BackgroundColor="CadetBlue"  
                BorderColor="CadetBlue"  
                CornerRadius="22">  
  
                <Label  
                    x:Name="fPriceBtnLabel"  
                    Margin="20,0"  
                    FontAttributes="Bold"  
                    FontSize="17"  
                    HorizontalTextAlignment="Center"  
                    LineBreakMode="WordWrap"  
                    Text=""  
                    TextColor="White"  
                    VerticalOptions="CenterAndExpand"  
                    VerticalTextAlignment="Center" />  
  
                <Frame.GestureRecognizers>  
                    <TapGestureRecognizer NumberOfTapsRequired="1" Tapped="FlPriceBtn_Clicked" />  
                </Frame.GestureRecognizers>  
  
  
            </Frame>  
  
        <Grid  
                x:Name="fPriceGrid"  
                Grid.Column="1"  
                Margin="0,-25,-20,0"  
                IsVisible="false"  
                RowDefinitions="Auto, 35"  
                RowSpacing="0">  
  
                <ffimageloadingsvg:SvgCachedImage  
                    x:Name="fPriceIcon"  
                    Grid.Row="1"  
                    Margin="10,0"  
                    HorizontalOptions="Center"  
                    Source="image.svg" />  
  
                <Label  
                    x:Name="fPriceLabel"  
                    Margin="0,0,5,0"  
                    HorizontalOptions="End"  
                      
                    VerticalOptions="Start">  
                    <Label.FormattedText>  
                        <FormattedString>  
                            <Span Text="x " />  
                            <Span Text="5" />  
                        </FormattedString>  
                    </Label.FormattedText>  
                </Label>  
            </Grid>  
     
</Grid>  

Code behind:

public partial class GridImageCornerButton : Grid   
    {  
        public GridImageCornerButton()  
        {  
            InitializeComponent();  
        }  
  
        public static readonly BindableProperty FPriceButtonHeightProperty = BindableProperty.Create(  
         nameof(FPriceButtonHeight),  
         typeof(int),  
         typeof(GridImageCornerButton),  
         propertyChanged: OnFPriceButtonHeightChanged  
     );  
  
        public static readonly BindableProperty PriceProperty = BindableProperty.Create(  
            nameof(Price),  
            typeof(int),  
            typeof(GridImageCornerButton),  
            propertyChanged: OnPriceChanged  
        );  
  
        public static readonly BindableProperty IsVisiblePriceProperty = BindableProperty.Create(  
            nameof(IsVisiblePrice),  
            typeof(bool),  
            typeof(GridImageCornerButton),  
             defaultValue: false,  
            propertyChanged: OnIsVisiblePriceChanged  
        );  
  
        public static readonly BindableProperty TitleButtonProperty = BindableProperty.Create(  
           nameof(TitleButton),  
           typeof(string),  
           typeof(GridImageCornerButton),  
           defaultValue: string.Empty,  
           propertyChanged: OnTitleButtonChanged  
       );  
  
        public static readonly BindableProperty BackgroundColorButtonProperty = BindableProperty.Create(  
           nameof(BackgroundColorButton),  
           typeof(Color),  
           typeof(GridImageCornerButton),  
           propertyChanged: OnBackgroundColorButtonChanged  
       );  
  
        public static readonly BindableProperty BorderColorButtonProperty = BindableProperty.Create(  
           nameof(BorderColorButton),  
           typeof(Color),  
           typeof(GridImageCornerButton),  
           propertyChanged: OnBorderColorButtonChanged  
       );  
  
        public static readonly BindableProperty ColorTextButtonProperty = BindableProperty.Create(  
         nameof(ColorTextButton),  
         typeof(Color),  
         typeof(GridImageCornerButton),  
         propertyChanged: OnColorTextButtonChanged  
     );  
  
        public static readonly BindableProperty ClickCommandProperty = BindableProperty.Create(  
            nameof(Command),  
            typeof(ICommand),  
            typeof(GridImageCornerButton));  
  
        public bool IsVisiblePrice  
        {  
            get => (bool)GetValue(IsVisiblePriceProperty);  
            set => SetValue(IsVisiblePriceProperty, value);  
        }  
  
        public int Price  
        {  
            get => (int)GetValue(PriceProperty);  
            set => SetValue(PriceProperty, value);  
        }  
  
        public int FPriceButtonHeight  
        {  
            get => (int)GetValue(FPriceButtonHeightProperty);  
            set => SetValue(FPriceButtonHeightProperty, value);  
        }  
  
  
        public string TitleButton  
        {  
            get => (string)GetValue(TitleButtonProperty);  
            set => SetValue(TitleButtonProperty, value);  
        }  
  
        public Color BackgroundColorButton  
        {  
            get => (Color)GetValue(BackgroundColorButtonProperty);  
            set => SetValue(BackgroundColorButtonProperty, value);  
        }  
  
        public Color BorderColorButton  
        {  
            get => (Color)GetValue(BorderColorButtonProperty);  
            set => SetValue(BorderColorButtonProperty, value);  
        }  
  
        public Color ColorTextButton  
        {  
            get => (Color)GetValue(ColorTextButtonProperty);  
            set => SetValue(ColorTextButtonProperty, value);  
        }  
  
        public ICommand ClickCommand  
        {  
            get { return (ICommand)GetValue(ClickCommandProperty); }  
            set { SetValue(ClickCommandProperty, value); }  
        }  
  
        private static void OnPriceChanged(BindableObject bindable, object oldValue, object newValue)  
        {  
            if (bindable is GridImageCornerButton control &&  
                newValue is int intValue)  
            {  
                var fs = new FormattedString();  
                fs.Spans.Add(new Span { Text = "x " });  
                fs.Spans.Add(new Span { Text = $"{intValue}" });  
                control.flPriceLabel.FormattedText = fs;  
            }  
        }  
  
        private static void OnIsVisiblePriceChanged(BindableObject bindable, object oldValue, object newValue)  
        {  
            if (bindable is GridImageCornerButton control &&  
                newValue is bool boolValue)  
            {  
                control.flPriceGrid.IsVisible = boolValue;  
            }  
        }  
  
        private static void OnTitleButtonChanged(BindableObject bindable, object oldValue, object newValue)  
        {  
            if (bindable is GridImageCornerButton control &&  
                newValue is string strValue)  
            {  
                control.flPriceBtnLabel.Text = strValue.ToUpperInvariant();  
            }  
        }  
  
        private static void OnBackgroundColorButtonChanged(BindableObject bindable, object oldValue, object newValue)  
        {  
            if (bindable is GridImageCornerButton control &&  
                newValue is Color colorValue)  
            {  
                control.flPriceBtn.BackgroundColor = colorValue;  
            }  
        }  
  
        private static void OnBorderColorButtonChanged(BindableObject bindable, object oldValue, object newValue)  
        {  
            if (bindable is GridImageCornerButton control &&  
               newValue is Color colorValue)  
            {  
                control.flPriceBtn.BorderColor = colorValue;  
            }  
        }  
  
        private static void OnColorTextButtonChanged(BindableObject bindable, object oldValue, object newValue)  
        {  
            if (bindable is GridImageCornerButton control &&  
               newValue is Color colorValue)  
            {  
                control.flPriceBtnLabel.TextColor = colorValue;  
            }  
        }  
  
        private static void OnFPriceButtonHeightChanged(BindableObject bindable, object oldValue, object newValue)  
        {  
            if (bindable is GridImageCornerButton control &&  
                newValue is int intValue)  
            {  
                control.flPriceBtn.HeightRequest = intValue;  
            }  
        }  
  
        private void FlPriceBtn_Clicked(object sender, EventArgs e)  
        {  
            if (ClickCommand is ICommand command && command.CanExecute(null))  
            {  
                command.Execute(null);  
            }  
        }  
          
  
          
        void fPriceButtonControlGrid_PropertyChanged(System.Object sender, System.ComponentModel.PropertyChangedEventArgs e)  
        {  
              
            if (e.PropertyName.EndsWith(nameof(VisualElement.HeightRequest)))  
            {  
                fPriceBtn.HeightRequest = flPriceButtonControlGrid.HeightRequest;  
            }  
        }  
          
    }  

The project makes use of prism for navigation.