question

nnovalbos-6961 avatar image
0 Votes"
nnovalbos-6961 asked LeonLu-MSFT commented

CustomControl - Label Text Error

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

dotnet-xamarinforms
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Please share your custom control's code, Please changet another device to make a test.

0 Votes 0 ·

1 Answer

nnovalbos-6961 avatar image
0 Votes"
nnovalbos-6961 answered LeonLu-MSFT commented

Hi @LeonLu-MSFT ,

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.

· 3
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

I put your code in my project, the text is worked as normal like following screenshot, And you backgroud code's control name is wrong, for example, flPriceBtn, but in your xaml this name is fPriceBtn.Are there many characters in the text you tested?

135438-image.png


0 Votes 0 ·
image.png (56.0 KiB)

I also took control to a separate project and put a new view as modal to reproduce the error.

I wasn't able to reproduce it ... I don't know if it could be a prism or FODY thing that we also use to simplify the properties of the view models.

I was wondering if anyone had the same problem

In your test have you shown a modal view that hides the control? I get the error when closing that modal, that the text is lost or changed

Thanks

0 Votes 0 ·

I just put this control to the contentpage directly

0 Votes 0 ·