How to add animation to custom button ?

Question

when the button is selected as above like this

this.boxView.FadeTo(1, 300);
this.lblView.FadeTo(1, 300);

the other button s elements opacity must be 0
and also double clicked problem that only one click must be
Also first button when opening the app must be selected

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>

contentpage....

<Grid ColumnDefinitions=",,," VerticalOptions="Start" >
<c:TabBarButton Grid.Column="0" Style="{StaticResource tabButton}" TabBarCommand="{Binding .}" TabIcon="{StaticResource icon-explore}" TabBarText="{DynamicResource Key=explore}" TabBarButtonEvent="TabButton_Click"/>
<c:TabBarButton Grid.Column="1" 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>

Answer 1

I have done like this is working fine but when the navigate to pages (TabBarCommand) breaks the my codes without navigation is fine working any solution that you can help me thanks...

xml... custom

<?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" Opacity="0" />
<Button x:Name="btnView" Grid.Row="1" FontSize="20" HeightRequest="50" FontFamily="Fontello" BackgroundColor="Transparent" Margin="0,5,0,-5" Clicked="Animate_Click" />
<Label x:Name="lblView" Grid.Row="2" FontSize="12" HorizontalOptions="Center" Opacity="0" />
</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,
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<EventArgs> TabBarButtonClickEvent;  
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;  
  

}  


public void AnimatedShow()  
{  
    boxView.FadeTo(1, 300);  
    lblView.FadeTo(1, 300);  

}  

public void AnimatedHide()  
{  
    boxView.Opacity=0;  
    lblView.Opacity=0;  
}  




private void Animate_Click(object sender, EventArgs e)  
{  
    if (TabBarButtonClickEvent != null)  
        this.TabBarButtonClickEvent(this, new EventArgs());  


}  

}

xml.....

<Grid x:Name="gridTabBar" ColumnDefinitions=",,,,*" VerticalOptions="Start" >
<c:TabBarButton x:Name="btnExplore" ClassId="btnExplore" Grid.Column="0" Style="{StaticResource tabButton}" TabBarCommand="{Binding ExploreCommand, Source={x:Reference BaseTabBar}}" TabIcon="{StaticResource icon-explore}" TabBarText="Explore" />
<c:TabBarButton x:Name="btnCategory" ClassId="btnCategory" Grid.Column="1" Style="{StaticResource tabButton}" TabBarCommand="{Binding CategoriesCommand, Source={x:Reference BaseTabBar}}" TabIcon="{StaticResource icon-category}" TabBarText="Categories" />
<c:TabBarButton x:Name="btnFavorite" ClassId="btnFavorite" Grid.Column="3" Style="{StaticResource tabButton}" TabBarCommand="{Binding FavoritesCommand, Source={x:Reference BaseTabBar}}" TabIcon="{StaticResource icon-star}" TabBarText="My Favorites" />
<c:TabBarButton x:Name="btnEvent" ClassId="btnEvent" Grid.Column="4" Style="{StaticResource tabButton}" TabBarCommand="{Binding EventsCommand, Source={x:Reference BaseTabBar}}" TabIcon="{StaticResource icon-events}" TabBarText="My Events" />
</Grid>

c#.....

public CustomTabBar()
{
InitializeComponent();

    btnExplore.TabBarButtonClickEvent += Btn_TabBarButtonClickEvent;  
    btnCategory.TabBarButtonClickEvent += Btn_TabBarButtonClickEvent;  
    btnFavorite.TabBarButtonClickEvent += Btn_TabBarButtonClickEvent;  
    btnEvent.TabBarButtonClickEvent += Btn_TabBarButtonClickEvent;  

}

private void Btn_TabBarButtonClickEvent(object sender, EventArgs e)  
{  
    var name = ((TabBarButton)sender).ClassId;  

    foreach (var item in gridTabBar.Children)  
    {  
        if (item.GetType() == typeof(TabBarButton))  
        {  
            var btn = (TabBarButton)item;  
            if (btn.ClassId == name)  
            {  
             
                btn.AnimatedShow();  

            }  
            else  
            {  
                
                btn.AnimatedHide();  
            }  
        }  
    }  

}

Answer 2

Hello,

Thanks for your feedback.

You could use singleton mode to work around not preserving state every time you navigate to this page.

Firstly, you need to add the following code into your CustomTabBar page:

   private static NewPage1 instance = null;   
   private static readonly object obj = new object();  
   public NewPage1 Instance  
   {  
       get  
       {  
           lock (obj)  
           {  
               if (instance == null)  
               {  
                   instance = new NewPage1();  
               }  
               return instance;  
           }  
       }  
   }  

Then, when you used the navigation method, please use the following code:

   private async void Button_Clicked(object sender, EventArgs e)  
   {  
       await App.Current.MainPage.Navigation.PushAsync(new NewPage1().Instance);  
   }  

After you rerun it, you'll find that your state of buttons in the page is well saved.

Best Regards,

Alec Liu.

---

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.