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

Sami 861 Reputation points
2022-11-08T15:09:25.283+00:00

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>  
.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
3,074 questions
0 comments No comments
{count} votes

Accepted answer
  1. Leon Lu (Shanghai Wicresoft Co,.Ltd.) 70,966 Reputation points Microsoft Vendor
    2022-11-09T08:53:00.78+00:00

    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.


0 additional answers

Sort by: Most helpful