Change Button Text

PKPhooPKPhoo Member ✭✭✭

I'm using Xamarin Forms to develop a Cross-Platform app.
I want to change the Text of the button "Start Job" to something like "Finish".
When clicking StartJob and then change to Finish Job.

Tagged:

Answers

  • AlexPAlexP Member ✭✭

    Depending on the way you write your code,
    This can be achieved in several different ways.

    If you write your code in the code behind of the XAML file,
    Then in the handler of your tap event, you can change the button text.
    Note
    You will need to cast the sender parameter from object to Button.

    If you are using the standard MVVM approach,
    Than on the ViewModel, you can create yourself a property and bind it to your button text.

    Let me know if you need a code sample,
    I'll be glad to provide you with one.

  • KSTeixeiraKSTeixeira USMember ✭✭
    edited January 30

    Which approach are you following? Mvvm? Directly in code behind?

    In case you are doing it in code behind, you'll need to assign a event to the button's "Clicked" property and then set the desired value in the page's code behind.

    For Mvvm approach, in the other hand, you'll need to have a command assigned to the "Command" property of your button and a string property binded to the text property of you button. Whenever you click on button, you just need to change the binded string property in the command execution block.

  • PKPhooPKPhoo Member ✭✭✭

    I use MVVM approach. Can I get some code simple Please
    @KSTeixeira @AlexP

  • AlexPAlexP Member ✭✭

    Sure.
    Let's assume you have a button in your XAML:

    <Button Text="{Binding CommandText}" Command="{Binding MyCoolCommand}"/>
    

    In your VM, you'll have to create the command, with a handler, and change the text:

    public class MyCoolViewModel : INotifyPropertyChanged
    {
        private string _commandText;
        public string CommandText
        {
            get => _commandText;
            set
            {
                _commandText = value;
                NotifyPropertyChanged(nameof(CommandText));
            }
        }
    
        public ICommand MyCoolCommand { get; }
    
        public MyCoolViewModel()
        {
            MyCoolCommand = new Command(DoWork);
        }
    
        private void DoWork()
        {
            // ***
            // Do some work here
            // ***
            CommandText = "Finish";
        }
    }
    

    I didn't have the time to test run it, so you might have some errors here and there,
    But this is the general direction.

  • KSTeixeiraKSTeixeira USMember ✭✭
    edited January 30

    In the XAML piece, you'd have something like:

    <Button Text="{Binding MyText}" Command="{Binding MyCommand}"/>

    In your ViewModel:

    using System.ComponentModel;
    using System.Windows.Input;
    using Xamarin.Forms;
    
    public class MyViewModel : INotifyPropertyChanged
    {
        private string myText;
    
        public event PropertyChangedEventHandler PropertyChanged;
    
        public string MyText
        {
            get => this.myText;
    
            set
            {
                this.myText = value;
                this.PropertyChanged(this, new PropertyChangedEventArgs(nameof(this.MyText)));
            }
        }
    
        public ICommand MyCommand => new Command(() => { this.MyText = "WhatEverTheTextYouWant"; });
    }
    

    In the command block execution, remember checking for the status of which text should be set.

    I did the code on VS Code so i wasn't able to test, but let me know whether you were able to make it work :)

  • umairnkumairnk Member

    Just give your button a name in the XAML, and associate a click event for it.

        <Button x:Name="JobProgressButton"
                        Clicked="OnClickJobProgressButton"/>
    

    Then in the C#, use a code similar to the one below

    void OnClickJobProgressButton(object sender, EventArgs e)
    {
            Button button = sender as Button;
            if (JobFinished == True)
           {
            button.Text = "Finish";
           }
          else
          {
            button.Text = "Start Job";
          }
    }
    
  • NMackayNMackay GBInsider, University mod

    @PKPhoo said:
    I use MVVM approach. Can I get some code simple Please
    @KSTeixeira @AlexP

    Use a value converter. That's why it's there to convert business logic into a visual state or in this case, a sinmple data trigger will suffice.

    https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/triggers#data

    Code behind should only be for setting UI specific behavior like focus, platform specific etc.

  • KSTeixeiraKSTeixeira USMember ✭✭

    @NMackay said:

    @PKPhoo said:
    I use MVVM approach. Can I get some code simple Please
    @KSTeixeira @AlexP

    Use a value converter. That's why it's there to convert business logic into a visual state or in this case, a sinmple data trigger will suffice.

    https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/triggers#data

    Code behind should only be for setting UI specific behavior like focus, platform specific etc.

    For sure the way to go :smile:

Sign In or Register to comment.