net maui I have custom view Button how to add animation like fade hide or show and add selected event change color or hide each element , any help ? thanks

Question

contentview........

   <?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 RowDefinitions="*,*,*" HorizontalOptions="Center">  
               <BoxView x:Name="boxView"  HeightRequest="6" WidthRequest="6" CornerRadius="50" HorizontalOptions="Center"  />  
               <Button  x:Name="btnView" Grid.Row="1" FontSize="20" HeightRequest="50" FontFamily="Fontello" BackgroundColor="Transparent"/>  
               <Label x:Name="lblView" Grid.Row="2" FontSize="12"  HorizontalOptions="Center" />  
           </Grid>  
       </ContentView.Content>  

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,  
   propertyChanged:DotColorChanged);  
     
       public Color DotColor  
       {  
           get => (Color)GetValue(DotColorProperty);  
           set => SetValue(DotColorProperty, value);  
       }  
     
       private static void DotColorChanged(BindableObject bindable, object oldValue, object newValue)  
       {  
           TabBarButton control = bindable as TabBarButton;  
           control.boxView.Color = newValue as Color;  
       }  
     
     
     
       public static readonly BindableProperty TabBarTextColorProperty = BindableProperty.Create(  
   nameof(TabBarTextColor),  
   typeof(Color),  
   typeof(TabBarButton),  
   null,  
   BindingMode.OneWay,  
   propertyChanged: TabBarTextColorChanged);  
     
       public Color TabBarTextColor  
       {  
           get => (Color)GetValue(TabBarTextColorProperty);  
           set => SetValue(TabBarTextColorProperty, value);  
       }  
       private static void TabBarTextColorChanged(BindableObject bindable, object oldValue, object newValue)  
       {  
           TabBarButton control = bindable as TabBarButton;  
           control.btnView.TextColor = newValue as Color;  
           control.lblView.TextColor = newValue as Color;  
       }  
     
     
     
       public static readonly BindableProperty TabBarTextProperty = BindableProperty.Create(  
   nameof(TabBarText),  
   typeof(string),  
   typeof(TabBarButton),  
   null,  
   BindingMode.OneWay,  
   propertyChanged: TabBarTextChanged);  
     
       public string TabBarText  
       {  
           get => (string)GetValue(TabBarTextProperty);  
           set => SetValue(TabBarTextProperty, value);  
       }  
       private static void TabBarTextChanged(BindableObject bindable, object oldValue, object newValue)  
       {  
           TabBarButton control = bindable as TabBarButton;  
           control.lblView.Text = newValue as string;  
       }  
     
     
     
       public static readonly BindableProperty TabIconProperty = BindableProperty.Create(  
   nameof(TabIcon),  
   typeof(string),  
   typeof(TabBarButton),  
   null,  
   BindingMode.OneWay,  
   propertyChanged: TabIconChanged);  
     
       public string TabIcon  
       {  
           get => (string)GetValue(TabIconProperty);  
           set => SetValue(TabIconProperty, value);  
       }  
       private static void TabIconChanged(BindableObject bindable, object oldValue, object newValue)  
       {  
           TabBarButton control = bindable as TabBarButton;  
           control.btnView.Text = newValue as string;  
       }  
     
       public event EventHandler<SelectedPositionChangedEventArgs> TabBarButtonEventChanged;  
       public event EventHandler<EventArgs> TabBarButtonEvent;  
       public static readonly BindableProperty TabBarCommandProperty = BindableProperty.Create(  
         propertyName: nameof(TabBarCommand),  
         returnType: typeof(ICommand),  
         declaringType: typeof(TabBarButton),  
         null,  
         defaultBindingMode: BindingMode.TwoWay,  
         propertyChanged: TabBarCommandChanged);  
     
       public ICommand TabBarCommand  
       {  
           get => (ICommand)GetValue(TabBarCommandProperty);  
           set => SetValue(TabBarCommandProperty, value);  
       }  
       private static void TabBarCommandChanged(BindableObject bindable, object oldValue, object newValue)  
       {  
           TabBarButton control = bindable as TabBarButton;  
           control.btnView.Command = (ICommand)newValue;  
       }  
        
   }  

Contentpage.....

   <Grid  ColumnDefinitions="*,*,*,*" VerticalOptions="Start" >  
                           <c:TabBarButton Grid.Column="0" x:Name="btnExplore"  Style="{StaticResource tabButton}" TabBarCommand="{Binding .}"  TabIcon="{StaticResource icon-explore}" TabBarText="{DynamicResource Key=explore}" TabBarButtonEvent="TabButton_Click"/>  
                           <c:TabBarButton Grid.Column="1" x:Name="btnCategory" Style="{StaticResource tabButton}" TabBarCommand="{Binding .}"  TabIcon="{StaticResource icon-category}" TabBarText="{DynamicResource Key=categories}" TabBarButtonEvent="TabButton_Click" />  
                                             <c:TabBarButton Grid.Column="2"  Style="{StaticResource tabButton}" TabBarCommand="{Binding .}"  TabIcon="{StaticResource icon-star}" TabBarText="{DynamicResource Key=my-favorites}" />  
                           <c:TabBarButton Grid.Column="3"  Style="{StaticResource tabButton}" TabBarCommand="{Binding .}"  TabIcon="{StaticResource icon-events}" TabBarText="{DynamicResource Key=my-events}" />  
                       </Grid>  

App Style.....

   <Style x:Key="tabButton"   TargetType="c:TabBarButton">  
               <Setter Property="TabBarTextColor" Value="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}" />  
               <Setter Property="DotColor" Value="{StaticResource Home}" />  
           </Style>  

Answer 1

Hello,

If you want to add animation like fade hide or show, you can use fade animation for your ButtonTabBar.
https://learn.microsoft.com/en-us/dotnet/maui/user-interface/animation/basic?view=net-maui-7.0#fading

If you want to hide each element in the ButtonTabBar, you can set IsVisible=false for your ContentView.

For example, I want to add fade animation and hide each element in ButtonTabBar when Button clicked.

Firstly, you add the button click event for btnView.

   <Button x:Name="btnView" Grid.Row="1" FontSize="20" HeightRequest="50" FontFamily="Fontello" BackgroundColor="Transparent"   Clicked="Button_Clicked" />  

Then you can add fade animation and hide each element in the custom controls background code.

   private void Button_Clicked(object sender, EventArgs e)  
       {  
          // add fade animation for 2 seconds  
           this.FadeTo(0, 2000);  
           Task.Run(hideTabButton);  
       }  
       private async void hideTabButton()  
       {  
           await Task.Delay(2000);  
           //After 2 seconds, hide the each element  
           MainThread.BeginInvokeOnMainThread(() =>  
           {  
               // Code to run on the main thread, hide the each element  
               this.IsVisible = false;  
          });  
      }  

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.