I have created custom view but it is not working , is any idea to solve it ?

Question

I have created custom view but it is not working , is any idea to solve it ? there is no error, is not build project.

   <?xml version="1.0" encoding="utf-8" ?>  
   <ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"  
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
                x:Class="xxx.Controls.Badge"  
                x:Name="BadgeView">  
       <ContentView.Content>  
           <StackLayout  Orientation="Horizontal" VerticalOptions="Center" HorizontalOptions="Start" HeightRequest="{Binding Source={x:Reference BadgeView}, Path=BadgeHeight, Mode=OneWay}">  
               <StackLayout Orientation="Horizontal" BackgroundColor="{Binding Source={x:Reference BadgeView}, Path=BadgeBackgroundColor, Mode=OneWay}"  Padding="0,0,8,0">  
                   <Button  FontSize="15"  Command="{Binding Source={x:Reference BadgeView}, Path=BadgeCommand, Mode=TwoWay}" WidthRequest="32" BackgroundColor="{Binding Source={x:Reference BadgeView}, Path=BadgeBackgroundColor, Mode=OneWay}" Text="{Binding Source={x:Reference BadgeView}, Path=BadgeIcon, Mode=OneWay}"  Style="{StaticResource imgButton}" TextColor="{Binding Source={x:Reference BadgeView}, Path=BadgeTextColor, Mode=OneWay}"   />  
                   <Label Text="{Binding Source={x:Reference BadgeView}, Path=BadgeText, Mode=OneWay}" FontSize="10"  VerticalOptions="Center" TextColor="{Binding Source={x:Reference BadgeView}, Path=BadgeTextColor, Mode=OneWay}" />  
               </StackLayout>  
               <Polygon StrokeThickness="0" Points="100, 100 200, 200"  Fill="{Binding Source={x:Reference BadgeView}, Path=BadgeBackgroundColor, Mode=OneWay}" Aspect="UniformToFill" />  
           </StackLayout>  
       </ContentView.Content>  
   </ContentView>  

C # .....................

   public partial class Badge : ContentView  
   {  
     
       public Badge()  
       {  
           InitializeComponent();  
       }  
     
       public static readonly BindableProperty BadgeBackgroundColorProperty = BindableProperty.Create(  
   nameof(BadgeBackgroundColor),  
   typeof(Color),  
   typeof(Badge),  
   BindingMode.OneWay);  
     
       public Color BadgeBackgroundColor  
       {  
           get => (Color)GetValue(BadgeBackgroundColorProperty);  
           set => SetValue(BadgeBackgroundColorProperty, value);  
       }  
     
       public static readonly BindableProperty BadgeTextColorProperty = BindableProperty.Create(  
   nameof(BadgeTextColor),  
   typeof(Color),  
   typeof(Badge),  
   BindingMode.OneWay);  
     
       public Color BadgeTextColor  
       {  
           get => (Color)GetValue(BadgeTextColorProperty);  
           set => SetValue(BadgeTextColorProperty, value);  
       }  
     
       public static readonly BindableProperty BadgeIconProperty = BindableProperty.Create(  
   nameof(BadgeIcon),  
   typeof(string),  
   typeof(Badge),  
   BindingMode.OneWay);  
     
       public string BadgeIcon  
       {  
           get => (string)GetValue(BadgeIconProperty);  
           set => SetValue(BadgeIconProperty, value);  
       }  
     
       public static readonly BindableProperty BadgeTextProperty = BindableProperty.Create(  
      nameof(BadgeText),  
      typeof(string),  
      typeof(Badge),  
      BindingMode.OneWay);  
     
       public string BadgeText  
       {  
           get => (string)GetValue(BadgeTextProperty);  
           set => SetValue(BadgeTextProperty, value);  
       }  
     
       public static readonly BindableProperty BadgeHeightProperty = BindableProperty.Create(  
          nameof(BadgeHeight),  
          typeof(double),  
          typeof(Badge),  
          BindingMode.OneWay);  
     
       public double BadgeHeight  
       {  
           get => (double)GetValue(BadgeHeightProperty);  
           set => SetValue(BadgeHeightProperty, value);  
       }  
     
       //public event EventHandler<EventArgs> BadgeButtonEvent;  
       public static readonly BindableProperty BadgeCommandProperty = BindableProperty.Create(  
          propertyName: nameof(BadgeCommand),  
          returnType: typeof(ICommand),  
          declaringType: typeof(Badge),  
          defaultBindingMode: BindingMode.TwoWay);  
     
       public ICommand BadgeCommand  
       {  
           get => (ICommand)GetValue(BadgeCommandProperty);  
           set => SetValue(BadgeCommandProperty, value);  
       }  
     
   }  

Content Page ...............

Referance

   xmlns:control="clr-namespace:xxx.Controls"  
     
     
    <control:Badge BadgeText="aaaaa" BadgeHeight="30"  BadgeCommand="{Binding LocationCommand}" BadgeBackgroundColor="{StaticResource  Location}" BadgeTextColor="{StaticResource Black}" BadgeIcon="{StaticResource icon-location}" />  

Answer 1

Hello,

I copied your code in my demo, when I run it, I got the following error.

System.ArgumentException: 'Default value did not match return type. Property: Xamarin.Forms.Color Badge.BadgeBackgroundColor Default value type:BindingMode,Parameter name: defaultValue'

Because you do not set the default value for your BindableProperty Xamarin.Forms Bindable Properties - Xamarin | Microsoft Learn

You need to set a defaultValue for your BindableProperties like the following code. Note: if you do not want to set a default value, you can set a null value, you need to set the BadgeTextColorProperty, BadgeIconProperty, BadgeTextProperty, BadgeHeightProperty and BadgeCommandProperty as well.

   public static readonly BindableProperty BadgeBackgroundColorProperty = BindableProperty.Create(  
   nameof(BadgeBackgroundColor),  
   typeof(Color),  
   typeof(Badge),  
   null,  
   BindingMode.OneWay);  
           public Color BadgeBackgroundColor  
           {  
               get => (Color)GetValue(BadgeBackgroundColorProperty);  
               set => SetValue(BadgeBackgroundColorProperty, value);  
           }  

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.