Change maui button background color at runtime

Question

Change maui button background color at runtime

Haviv Elbsz 2,071

Hi All

I have a lengthy method in my application

when the application start I want to change
the run button background color to red background color
and when the lengthy method finished
I change it to it's original background color.

but that's only works if I change the textcolor
but when I change the background color
that have no effect.

thank you for any help

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,436 Reputation points Microsoft External Staff

2022-08-30T07:59:21.447+00:00

Hi @Haviv Elbsz , could you please describe more information in your "lengthy method" and how did you change the background color? Which platform is not working when running code? As noted in the Q&A FAQ: How to write a quality question

In addition, UI updates should be in the main thread, you could check it.

Haviv Elbsz 2,071

on android platform . in code I marked the
statements which works and non works

This is a shorten of the method
Thank you very much

    private async void RunButton_Clicked(object sender, EventArgs e)  
    {  
  
       . .. ....... ....  
  
      progressBar.Progress = 0.0;  
  
    if (!IsAppRunning)  
      {  
        IsAppRunning = true;  
        RunButton.Text = "Cancel";  
        RunButton.TextColor = Colors.Red;     <======= This works         
        RunButton.BackgroundColor = Colors.Red;        <======= This not works  
  
        m_cancelTokenSource = new CancellationTokenSource();  
  
        try  
        {  
  
              await alfaStarsMul(m_cancelTokenSource.Token);  
                
              .............  
        }  
        catch (OperationCanceledException)  
        {  
          //  
        }  
        finally  
        {  
          RunButton.Text = "Start";  
          RunButton.TextColor = Colors.White;     <======= This works  
          RunButton.BackgroundColor = Colors.Green;       <======= This not works  
          IsAppRunning = false;  
          m_cancelTokenSource = null;  
          progressBar.Progress = 0.0;  
           
        }  
      }  
      else  
      {  
        m_cancelTokenSource.Cancel();  
      }  
  
      return;  
  
    }

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,436 Reputation points Microsoft External Staff

2022-09-05T08:31:54.637+00:00

Hi @Haviv Elbsz , Since I still can't reproduce your issue, it is recommended to open a support ticket for this. Please contact our paid phone support at MS Support. You will get 1:1 support on that.

2 answers

Your answer

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,436 Reputation points Microsoft External Staff

2022-08-30T07:59:21.447+00:00

Hi @Haviv Elbsz , could you please describe more information in your "lengthy method" and how did you change the background color? Which platform is not working when running code? As noted in the Q&A FAQ: How to write a quality question

In addition, UI updates should be in the main thread, you could check it.
Haviv Elbsz 2,071 Reputation points

2022-08-31T17:53:46.627+00:00

on android platform . in code I marked the
statements which works and non works

This is a shorten of the method
Thank you very much

private async void RunButton_Clicked(object sender, EventArgs e) { . .. ....... .... progressBar.Progress = 0.0; if (!IsAppRunning) { IsAppRunning = true; RunButton.Text = "Cancel"; RunButton.TextColor = Colors.Red; <======= This works RunButton.BackgroundColor = Colors.Red; <======= This not works m_cancelTokenSource = new CancellationTokenSource(); try { await alfaStarsMul(m_cancelTokenSource.Token); ............. } catch (OperationCanceledException) { // } finally { RunButton.Text = "Start"; RunButton.TextColor = Colors.White; <======= This works RunButton.BackgroundColor = Colors.Green; <======= This not works IsAppRunning = false; m_cancelTokenSource = null; progressBar.Progress = 0.0; } } else { m_cancelTokenSource.Cancel(); } return; }
Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,436 Reputation points Microsoft External Staff

2022-09-05T08:31:54.637+00:00

Hi @Haviv Elbsz , Since I still can't reproduce your issue, it is recommended to open a support ticket for this. Please contact our paid phone support at MS Support. You will get 1:1 support on that.

Answer 1

@Haviv Elbsz - Put a line of code:

await Task.Delay(timeout);

after:

RunButton.BackgroundColor = Colors.Green;

Use a suitable value for timeout, say start from 100 to about 500. This gives the update time for UI.
I think your busy loop may not allow the UI to update the Button color setting and awaited Task.Delay() may do the trick to give the UI to update itself.

UPDATE:
The difference between Background and BackgroundColor is:

Background is a Brush
BackgroundColor is a Color

There is a subtle difference between a Brush and Color (Color is a property of Brush but not another way round).

But on Maui (and Xamarin) you can use either Background or BackgroundColor on elements like Buttons and layouts and the necessary conversion is done for us internally.

Sometimes Button color setting could appear problematic if there are App-wide style definitions (possibly automatically generated on App creation) do overriding. Worth checking if this applies to your App.

Answer 2

Haviv Elbsz 2,071

I got it by using background instead
of backgroundcolor

I don't know why this works
I'll appreciate it if someone can explain

thank you

dg2k 1,416 Reputation points

2022-09-30T09:59:32.233+00:00

I've updated the reply above.

Share via

Change maui button background color at runtime

2 answers

Your answer