CustomControl - Label Text Error

nnovalbos 371 Reputation points
2021-09-22T08:42:00.883+00:00

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!!

Xamarin
Xamarin
A Microsoft open-source app platform for building Android and iOS apps with .NET and C#.
5,325 questions
{count} votes

1 answer

Sort by: Most helpful
  1. nnovalbos 371 Reputation points
    2021-09-24T22:01:40.707+00:00

    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.