Xamarin Forms: Facing weird issues after installing the Xamarin.CommunityToolkit

Question

Recently I have installed Xamarin.CommunityToolkit (Version: 1.3.1) for implementing the BadgeView. Also updated the Xamarin.Forms (Version: 5.0.0.2291) to the latest version. After that, I am facing some weird issues on my project. After the login the app is not opening the home page, scroll view is not working, collectionview scroll is not working, even some icon taps are also not firing.

All these features are working fine before installing Xamarin.CommunityToolkit. I have only installed CommunityToolkit and XF latest version. Are there any other packages or initialization required for the proper working of CommunityToolkit?

Other Nuget Packages in the Project

Which package has compatibility issue with Xamarin.CommunityToolkit?

Accepted Answer

Hello,

Welcome to our Microsoft Q&A platform!

I need to show the count on badgeview itself. Is there any way to show the count on badgeview itself

I write a new badgeview.

Firstly, create CircleView.cs

   using System;  
   using System.Collections.Generic;  
   using System.Text;  
   using Xamarin.Forms;  
     
   namespace CatholicBrain  
   {  
       public partial class CircleView : BoxView  
       {  
           public static readonly BindableProperty CornerRadiusProperty = BindableProperty.Create(nameof(CornerRadius), typeof(double), typeof(CircleView), 0.0);  
     
           public double CornerRadius  
           {  
               get { return (double)GetValue(CornerRadiusProperty); }  
               set { SetValue(CornerRadiusProperty, value); }  
           }  
     
           public CircleView()  
           {  
              // InitializeComponent();  
           }  
       }  
   }

Then create contentview called BadgeView.xaml . edit it to the Grid.

Here is BadgeView.xaml.cs.

   using System;  
   using System.Collections.Generic;  
   using System.Linq;  
   using System.Text;  
   using System.Threading.Tasks;  
     
   using Xamarin.Forms;  
   using Xamarin.Forms.Xaml;  
     
   namespace CatholicBrain  
   {  
       [XamlCompilation(XamlCompilationOptions.Compile)]  
       public partial class BadgeView : Grid  
       {  
           public static BindableProperty TextProperty = BindableProperty.Create("Text", typeof(string), typeof(BadgeView), "0", propertyChanged: (bindable, oldVal, newVal) =>  
           {  
               var view = (BadgeView)bindable;  
               view.BadgeLabel.Text = (string)newVal;  
           });  
     
           public static BindableProperty BadgeColorProperty = BindableProperty.Create("BadgeColor", typeof(Color), typeof(BadgeView), Color.Blue, propertyChanged: (bindable, oldVal, newVal) =>  
           {  
               var view = (BadgeView)bindable;  
               view.BadgeCircle.BackgroundColor = (Color)newVal;  
           });  
     
           public string Text  
           {  
               get  
               {  
                   return (string)GetValue(TextProperty);  
               }  
               set  
               {  
                   SetValue(TextProperty, value);  
               }  
           }  
           public Color BadgeColor  
           {  
               get  
               {  
                   return (Color)GetValue(BadgeColorProperty);  
               }  
               set  
               {  
                   SetValue(BadgeColorProperty, value);  
               }  
           }  
           public BadgeView()  
           {  
               InitializeComponent();  
               BadgeLabel.Text = Text;  
               BadgeCircle.BackgroundColor = BadgeColor;  
           }  
       }  
   }

Then you need to create a custom renderer for this CircleView in android.

   using Android.App;  
   using Android.Content;  
   using Android.Graphics;  
   using Android.OS;  
   using Android.Runtime;  
   using Android.Util;  
   using Android.Views;  
   using Android.Widget;  
   using CatholicBrain;  
   using CatholicBrain.Droid;  
   using System;  
   using System.Collections.Generic;  
   using System.Linq;  
   using System.Text;  
   using Xamarin.Forms;  
   using Xamarin.Forms.Platform.Android;  
     
   [assembly: ExportRenderer(typeof(CircleView), typeof(CircleViewRenderer))]  
   namespace CatholicBrain.Droid  
   {  
       public class CircleViewRenderer : BoxRenderer  
       {  
           private float _cornerRadius;  
           private RectF _bounds;  
           private Path _path;  
     
           public CircleViewRenderer(Context context) : base(context)  
           {  
           }  
     
           protected override void OnElementChanged(ElementChangedEventArgs e)  
           {  
               base.OnElementChanged(e);  
     
               if (Element == null)  
               {  
                   return;  
               }  
               var element = (CircleView)Element;  
     
               _cornerRadius = TypedValue.ApplyDimension(ComplexUnitType.Dip, (float)element.CornerRadius, Context.Resources.DisplayMetrics);  
     
           }  
     
           protected override void OnSizeChanged(int w, int h, int oldw, int oldh)  
           {  
               base.OnSizeChanged(w, h, oldw, oldh);  
               if (w != oldw && h != oldh)  
               {  
                   _bounds = new RectF(0, 0, w, h);  
               }  
     
               _path = new Path();  
               _path.Reset();  
               _path.AddRoundRect(_bounds, _cornerRadius, _cornerRadius, Path.Direction.Cw);  
               _path.Close();  
           }  
     
           public override void Draw(Canvas canvas)  
           {  
               canvas.Save();  
               canvas.ClipPath(_path);  
               base.Draw(canvas);  
               canvas.Restore();  
           }  
       }  
   }

For iOS renderer.

   [assembly: ExportRenderer(typeof(CircleView), typeof(CircleViewRenderer))]  
   namespace CatholicBrain.iOS  
   {  
       public class CircleViewRenderer : BoxRenderer  
       {  
           protected override void OnElementChanged(ElementChangedEventArgs e)  
           {  
               base.OnElementChanged(e);  
      
               if (Element == null)  
                   return;  
      
               Layer.MasksToBounds = true;  
               Layer.CornerRadius = (float)((CircleView)Element).CornerRadius / 2.0f;  
           }  
      
       }  
   }

In the end, we can use it in your HomePage1.cs Find the tag copy following code

In the end, open your layout background code, you can find the GetUserMedals method. Set it directly.

   Medals_label.Text = "Medals: " + urlDetails.medals;  
                       Badges_label.Text = "Badges: " + urlDetails.badges;  
                       Stars_label.Text = "Stars: " + urlDetails.stars;  
     
     
                       //Issue is on this part, if we comment the below code everything will work fine like collectionview,scrollview  
                       medals_badge.Text = urlDetails.medals;  
                       badges_badge.Text = urlDetails.badges;  
                       star_badge.Text = urlDetails.stars;

Best Regards,

Leon Lu

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer

Hello,

Welcome to our Microsoft Q&A platform!

I test with Xamarin.Forms 5.0.0.2291 and Xamarin.CommunityToolkit 1.3.1 With following code. ScrollView could scroll normally. And I test with CollectionView, it worked as well. You need put your Scrollview ro CollectionView in the tag. You can create a new project. copy my code to it, if it worked.

==================
Update======================

I test your project, I find this issue is related to the BadgeView's width, if you set the star_badge.Text = "1"; directly, Your project could normally without issue. But in your demo, you get the value is 33, the width is bigger. BadgeView cannot get the enough width, so we can get this behaviror. Based on your Gird's ColumnDefinitions like following code

and if you want to meet the width of BadgeView, If the value(urlDetails.medals, urlDetails.badges,urlDetails.stars) is bigger than 10, we can use "*" to replace it. Here is simiple code add to the GetUserMedals method, Please notice: For protect your private information. I

   Medals_label.Text = "Medals: " + urlDetails.medals;  
                       Badges_label.Text = "Badges: " + urlDetails.badges;  
                       Stars_label.Text = "Stars: " + urlDetails.stars;  
     
     
                       //Issue is on this part, if we comment the below code everything will work fine like collectionview,scrollview  
     
                       if (int.Parse(urlDetails.medals)>10)  
                       {  
                           medals_badge.Text = "*";  
                       }  
                       else  
                       {  
                           medals_badge.Text = urlDetails.medals;  
                       }  
                       if (int.Parse(urlDetails.badges) > 10)  
                       {  
                           badges_badge.Text = "*";  
                       }  
                       else  
                       {  
                           badges_badge.Text = urlDetails.badges;  
                       }  
                       if (int.Parse(urlDetails.stars) > 10)  
                       {  
                           star_badge.Text = "*";  
                       }  
                       else  
                       {  
                           star_badge.Text = urlDetails.stars;  
                       }  
                   }

Best Regards,

Leon Lu

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Xamarin Forms: Facing weird issues after installing the Xamarin.CommunityToolkit

1 additional answer