Toggle ToolbarItem

LeloLelo Member ✭✭✭

I am looking to have toggleable buttons in my toolbar - is there anyway I can implement this?

So far I have considered changing the color of the toolbar item, and/or adding a badge with 1 to indicate it is selected. Any other way of doing this?

Answers

  • stemadostemado Member ✭✭✭
    edited November 2018

    Yes, you can create a ToolbarItem that can be toggled.

    If you are using PRISM then you can do the below (if you are not using Prism, then you will need to implement OnPropertyChanged so your view can be updated with the correct toggled icon.

    1. View (XAML) - This utilizes the ToolbarItem Command to bind to the DelegateCommand in the ViewModel to perform our toggling actions.

      <ContentPage.ToolbarItems>
      <ToolbarItem Icon="{Binding CurrentImage}" Command="{Binding ToolbarItemClicked"/>
      </ContentPage.ToolbarItems>

    2. ViewModel (PRISM)

      public DelegateCommand ToolbarItemClicked { get; }
      
      private bool _toolbarClick;
      
      public string CurrentImage
      {
          get => _currentImage;
          set => SetProperty(ref _currentImage, value);
      }
      
      
      public MainPageViewModel(INavigationService navigationService)
         : base(navigationService)
      {
      
          CurrentImage = "like.png"; //This will be the default image you want shown when the page loads
      
          this.ToolbarItemClicked = new DelegateCommand(MakeImageUpdate);
      }
      
      //This method will be called every time the ToolbarItem is clicked. Be sure to set the value of _toolbarClick after each 
      //CurrentImage is set so you can cycle through the images correctly.
      private void MakeImageUpdate()
      {
          if (_toolbarClick)
          {
              CurrentImage = "like.png";
              _toolbarClick = false;
      
          }
          else
          {
              CurrentImage = "nope.png";
              _toolbarClick = true;
          }
      }
      

    3.ViewModel (OnPropertyChanged has to be implemented)

        private bool _toolbarClick;
        private string _currentImage;
    
        public Command ToolbarItemClicked { get; }
        public event PropertyChangedEventHandler PropertyChanged;
    
        public MyPageViewModel()
        {
            CurrentImage = "like.png"; //This will be the default image you want shown when the page loads
    
            this.ToolbarItemClicked = new Command(MakeImageUpdate);
        }
    
    
        public string CurrentImage
        {
            get => _currentImage;
            set
            {
                _currentImage = value;
                OnPropertyChanged();
            }
        }
    
    
        //This method will be called every time the ToolbarItem is clicked. Be sure to set the value of _toolbarClick after each 
        //CurrentImage is set so you can cycle through the images correctly.
    
        private void MakeImageUpdate()
        {
            if (_toolbarClick)
            {
                CurrentImage = "like.png";
                _toolbarClick = false;
    
            }
            else
            {
                CurrentImage = "nope.png";
                _toolbarClick = true;
            }
        }
    
    
        //Will notify the view that the property has changed 
        protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    

    I tested this and it worked successfully for both PRISM and non-PRISM implementations.

    Note: Be sure you set your BindingContext to the ViewModel you create for the view so the View knows where to call the DelegateCommand/Command from

  • LeloLelo Member ✭✭✭

    @stemado said:
    Yes, you can create a ToolbarItem that can be toggled.

    If you are using PRISM then you can do the below (if you are not using Prism, then you will need to implement OnPropertyChanged so your view can be updated with the correct toggled icon.

    1. View (XAML) - This utilizes the ToolbarItem Command to bind to the DelegateCommand in the ViewModel to perform our toggling actions.

      <ContentPage.ToolbarItems>
      <ToolbarItem Icon="{Binding CurrentImage}" Command="{Binding ToolbarItemClicked"/>
      </ContentPage.ToolbarItems>

    2. ViewModel (PRISM)

      public DelegateCommand ToolbarItemClicked { get; }
      
      private bool _toolbarClick;
      
      public string CurrentImage
      {
          get => _currentImage;
          set => SetProperty(ref _currentImage, value);
      }
      
      
      public MainPageViewModel(INavigationService navigationService)
         : base(navigationService)
      {
      
          CurrentImage = "like.png"; //This will be the default image you want shown when the page loads
      
          this.ToolbarItemClicked = new DelegateCommand(MakeImageUpdate);
      }
      
      //This method will be called every time the ToolbarItem is clicked. Be sure to set the value of _toolbarClick after each 
      //CurrentImage is set so you can cycle through the images correctly.
      private void MakeImageUpdate()
      {
          if (_toolbarClick)
          {
              CurrentImage = "like.png";
              _toolbarClick = false;
      
          }
          else
          {
              CurrentImage = "nope.png";
              _toolbarClick = true;
          }
      }
      

    3.ViewModel (OnPropertyChanged has to be implemented)

        private bool _toolbarClick;
        private string _currentImage;
    
        public Command ToolbarItemClicked { get; }
        public event PropertyChangedEventHandler PropertyChanged;
    
        public MyPageViewModel()
        {
            CurrentImage = "like.png"; //This will be the default image you want shown when the page loads
    
            this.ToolbarItemClicked = new Command(MakeImageUpdate);
        }
    
    
        public string CurrentImage
        {
            get => _currentImage;
            set
            {
                _currentImage = value;
                OnPropertyChanged();
            }
        }
    
    
        //This method will be called every time the ToolbarItem is clicked. Be sure to set the value of _toolbarClick after each 
        //CurrentImage is set so you can cycle through the images correctly.
    
        private void MakeImageUpdate()
        {
            if (_toolbarClick)
            {
                CurrentImage = "like.png";
                _toolbarClick = false;
    
            }
            else
            {
                CurrentImage = "nope.png";
                _toolbarClick = true;
            }
        }
    
    
        //Will notify the view that the property has changed 
        protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    

    I tested this and it worked successfully for both PRISM and non-PRISM implementations.

    Note: Be sure you set your BindingContext to the ViewModel you create for the view so the View knows where to call the DelegateCommand/Command from

    In this solution I have two images and change it depending on the state (pressed or not) right?

  • stemadostemado Member ✭✭✭
    @Lelo yes, that is correct.
  • LeloLelo Member ✭✭✭

    On iOS I could change the icons to filled icons from icons8 website. It worked great. On Android I am unable to use the same icons because I also have to change the color of the icons. In navigation page I can set the color with BarTextColor but it only works in iOS. Not in Android. https://forums.xamarin.com/discussion/139133/changing-tint-of-toolbar-item-icon

Sign In or Register to comment.