I have created custom view but now i can build project but not shown in the page any idea ?

Sami 861 Reputation points
2022-11-07T22:20:57.167+00:00

I have created custom view but now i can build project but not shown in the page any idea ?

xml....

   <?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.TabBarButton"  
                x:Name="ButtonTabBar ">  
       <ContentView.Content>  
           <Grid  HorizontalOptions="Center">  
               <BoxView   HeightRequest="6" WidthRequest="6" CornerRadius="50" Color="{Binding Source={x:Reference ButtonTabBar}, Path=DotColor, Mode=OneWay}"  VerticalOptions="Start"  />  
               <Button   FontSize="20" FontFamily="Fontello" BackgroundColor="Transparent" Command="{Binding Source={x:Reference ButtonTabBar}, Path=TabBarCommand, Mode=TwoWay}" TextColor="{Binding Source={x:Reference ButtonTabBar}, Path=TabBarTextColor, Mode=OneWay}" Text="{Binding Source={x:Reference ButtonTabBar}, Path=TabIcon, Mode=OneWay}"  Clicked="TabButton_Click" />  
               <Label  FontSize="12" TextColor="{Binding Source={x:Reference ButtonTabBar}, Path=TabBarTextColor, Mode=OneWay}" Text="{Binding Source={x:Reference ButtonTabBar}, Path=TabBarText, Mode=OneWay}" VerticalOptions="EndAndExpand"  />  
           </Grid>  
       </ContentView.Content>  
   </ContentView>  

c# ......

   public partial class TabBarButton : ContentView  
   {  
   public TabBarButton()  
   {  
   InitializeComponent();  
   }  
     
       public static readonly BindableProperty DotColorProperty = BindableProperty.Create(  
   nameof(DotColor),  
   typeof(Color),  
   typeof(TabBarButton),  
   null,  
   BindingMode.OneWay);  
     
       public Color DotColor  
       {  
           get => (Color)GetValue(DotColorProperty);  
           set => SetValue(DotColorProperty, value);  
       }  
     
       public static readonly BindableProperty TabBarTextColorProperty = BindableProperty.Create(  
   nameof(TabBarTextColor),  
   typeof(Color),  
   typeof(TabBarButton),  
   null,  
   BindingMode.OneWay);  
     
       public Color TabBarTextColor  
       {  
           get => (Color)GetValue(TabBarTextColorProperty);  
           set => SetValue(TabBarTextColorProperty, value);  
       }  
     
       public static readonly BindableProperty TabBarTextProperty = BindableProperty.Create(  
   nameof(TabBarText),  
   typeof(string),  
   typeof(TabBarButton),  
   null,  
   BindingMode.OneWay);  
     
       public string TabBarText  
       {  
           get => (string)GetValue(TabBarTextProperty);  
           set => SetValue(TabBarTextProperty, value);  
       }  
     
       public static readonly BindableProperty TabIconProperty = BindableProperty.Create(  
   nameof(TabIcon),  
   typeof(string),  
   typeof(TabBarButton),  
   null,  
   BindingMode.OneWay);  
     
       public string TabIcon  
       {  
           get => (string)GetValue(TabIconProperty);  
           set => SetValue(TabIconProperty, value);  
       }  
     
       public static readonly BindableProperty TabBarCommandProperty = BindableProperty.Create(  
         propertyName: nameof(TabBarCommand),  
         returnType: typeof(ICommand),  
         declaringType: typeof(TabBarButton),  
         null,  
         defaultBindingMode: BindingMode.TwoWay);  
     
       public ICommand TabBarCommand  
       {  
           get => (ICommand)GetValue(TabBarCommandProperty);  
           set => SetValue(TabBarCommandProperty, value);  
       }  

ContentPage but Customized if because of......

   referance ....    xmlns:control="clr-namespace:xxx.Controls"  
     
     
    <control:TabBarButton  Style="{StaticResource tabButton}" TabBarCommand="{Binding ACommand, Source={x:Reference BaseTabBar}}" TabIcon="{StaticResource icon-explore}" TabBarText="{DynamicResource Key=explore}" />  

App style......

   referance ....    xmlns:control="clr-namespace:xxx.Controls"  
     
           <Style x:Key="tabButton"   TargetType="control:TabBarButton">  
               <Setter Property="TabBarTextColor" Value="{AppThemeBinding Light={StaticResource Dark}, Dark={StaticResource White}}" />  
               <Setter Property="DotColor" Value="{StaticResource Home}" />  
           </Style>  
     
   }  
.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
3,057 questions
0 comments No comments
{count} votes

Accepted answer
  1. Leon Lu (Shanghai Wicresoft Co,.Ltd.) 70,646 Reputation points Microsoft Vendor
    2022-11-08T07:05:25.17+00:00

    Hello,

    I test your code, I get the same result. this issue should be bind issue. You can try to use this XAML data binding diagnostics - Visual Studio (Windows) tools in Visual Studio to detect and resolve data binding errors in XAML projects.

    Here is a solution about your issue, you can refer to it.

    If you want to bind the BindableProperty to your controls of contentView layout, you do not need to bind it in the XAML, you can add the x:Name, set the binding value in the background code directly with propertyChanged property and achieve propertyChanged method.

    Firstly, add the x:name for your controls in the XAML like the following code.

       <ContentView.Content>  
               <Grid>  
                   <BoxView  
                       x:Name="MyBoxView"  
                       HeightRequest="6"  
                       WidthRequest="6"  
                       CornerRadius="50"  
                       VerticalOptions="Start"                
                       />  
                   <Button          
                       x:Name="MyButton"  
                       FontSize="20"     
                       BackgroundColor="Transparent"  
                       FontFamily="Fontello"  
                       />  
                   <Label                    
                       x:Name="MyLabel"  
                       FontSize="12"                  
                       VerticalOptions="EndAndExpand"  />  
               </Grid>  
           </ContentView.Content>  
    

    Second, you can add propertyChanged: method for all the BindableProperties and set them.

    For example, I want to set MyBoxView.BackgroundColor, you can refer to the following code.

       public static readonly BindableProperty DotColorProperty = BindableProperty.Create(  
               nameof(DotColor),  
               typeof(Color),  
               typeof(TabBarButton),  
               null,  
               BindingMode.OneWay,  
               propertyChanged:DotColorChanged);  
           public Color DotColor  
           {  
               get => (Color)GetValue(DotColorProperty);  
               set => SetValue(DotColorProperty, value);  
           }  
         
          static void DotColorChanged(BindableObject bindable, object oldValue, object newValue)  
           {  
               TabBarButton control = bindable as TabBarButton;  
               control.MyBoxView.BackgroundColor = newValue as Color; // it is same that you set Color="{Binding Source={x:Reference ButtonTabBar}, Path=DotColor, Mode=OneWay}"  
           }  
    

    You have a BindableProperty with ICommand. It is different, you can set the command with control.MyButton.Command=(ICommand)newValue; in the TabBarCommandChanged method.

    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.


0 additional answers

Sort by: Most helpful