title: UWP/VB.Net - Change Bound Button Color Dependent on Variable
body: <p>I'm a little new to UWP.  I've spent two days looking for this answer and haven't come across the answer yet.  I know I could be approaching this completely wrong.  All help is appreciated!</p>
  
  <p>I have a <code>SolidColorBrush</code>  <code>StaticResource</code> I've created in my App.xaml file:  </p>
  
  <pre><code>    &lt;Application.Resources&gt;
           &lt;SolidColorBrush x:Key="colorClockStatus" Color="#cae0d5" /&gt;
      &lt;/Application.Resources&gt;`
  </code></pre>
  
  <p>I've bound this brush to the Background property of a few buttons on a few pages.  For example, I bound the buttons it like this:</p>
  
  <pre><code>    &lt;Button Background="{StaticResource colorClockStatus}"/&gt;
  </code></pre>
  
  <p>That works great, the button backgrounds are the desired red. The problem comes in when I change the color of the <code>StaticResource</code>. The button color doesn't change.  If I open another page after the color change, the buttons on the new page will be green as desired, but I can't get a button on an already opened page to change color.</p>
  
  <p>So here's the scenario.  When the user is 'ClockedIn', the bound buttons need to be green, and when the user clocks out, the bound buttons need to turn red and vise versa.  Here's the backend code in the App.xaml.vb file:</p>
  
  <pre><code>    Public Shared ClockedIn As Boolean = False
  
      Public Shared Sub SetClockedStatus(ByVal bClockedIn As Boolean)
          ClockedIn = bClockedIn
          With Application.Current
              If bClockedIn Then
                  .Resources("colorClockStatus") = Color.FromArgb(255, 202, 224, 213) 'Green
              Else
                  .Resources("colorClockStatus") = Color.FromArgb(255, 227, 184, 179) 'Red
              End If
          End With
      End Sub
  </code></pre>
  
  <p>When the user taps the 'ClockIn' button, the above code is called.  I think I need a <code>INotifyPropertyChanged</code> event to let the UI know the <code>colorClockStatus</code> property changed and therefore needs to redraw the buttons, but I don't know how to do this with a <code>StaticResource</code>.  I've also have tried implementing a <code>VisualStateManager</code>, and create two <code>SaticResources</code> the button switches between (which seems like a better way), but I couldn't figure out how to set the trigger dependent on the Boolean 'ClockIn' variable, and then to implement the manager globally.</p>
  
  <p>So how can I get the UI to change colors dependent on a Boolean variable?</p>
  
  <p>Thank you!</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I've been working on this some more and found an example using a <code>StateTriggerBase</code> class <a href="https://ulrichbodentien.com/2015/11/21/inputmodetrigger-for-uwp-apps/#more-93" rel="nofollow noreferrer">here</a>.  I adapted this code to work for a Boolean property.  Below is my adapted class: </p>
  
  <pre><code>    Public Class ClockedInTrigger
          Inherits StateTriggerBase
          Private _ClockedIn As Boolean = False
  
          Public Property ClockedIn As Boolean
              Get
                  Return _ClockedIn
              End Get
              Set
                  If Not Value.Equals(_ClockedIn) Then
                      _ClockedIn = _ClockedIn
                      SetActive(ClockedIn = _ClockedIn)
                  End If
              End Set
          End Property
      End Class
  </code></pre>
  
  <p>Then, instead of having just one <code>StaticResource</code>, I made two:</p>
  
  <pre><code>    &lt;Application.Resources&gt;
           &lt;SolidColorBrush x:Key="colorClockInLight" Color="#cae0d5" /&gt;
           &lt;SolidColorBrush x:Key="colorClockOutLight" Color="#e3b8b3" /&gt;
      &lt;/Application.Resources&gt;
  </code></pre>
  
  <p>Then I added a <code>VisualStateManager</code> to my MainPage to test it:</p>
  
  <pre><code>    &lt;VisualStateManager.VisualStateGroups&gt;
         &lt;VisualStateGroup x:Name="ClockInStates"&gt;                
              &lt;VisualState x:Name="vsClockedOut"&gt;
                  &lt;VisualState.StateTriggers&gt;
                      &lt;local:ClockedInTrigger ClockedIn="False" /&gt;
                  &lt;/VisualState.StateTriggers&gt;
                  &lt;VisualState.Setters&gt;
                      &lt;Setter Target="HamburgerButton.Background" Value="{StaticResource colorClockOutLight}" /&gt;
                  &lt;/VisualState.Setters&gt;
              &lt;/VisualState&gt;
              &lt;VisualState x:Name="vsClockedIn"&gt;
                  &lt;VisualState.StateTriggers&gt;
                      &lt;local:ClockedInTrigger ClockedIn="True" /&gt;
                  &lt;/VisualState.StateTriggers&gt;
                  &lt;VisualState.Setters&gt;
                      &lt;Setter Target="HamburgerButton.Background" Value="{StaticResource colorClockInLight}" /&gt;
                  &lt;/VisualState.Setters&gt;
              &lt;/VisualState&gt;
          &lt;/VisualStateGroup&gt;
      &lt;/VisualStateManager.VisualStateGroups&gt;
  </code></pre>
  
  <p>I was really excited when I opened the program and the button was green! (By default, the button is red)   But to my disappointment, the button did not turn back red when I clocked out.  I used the debugger and the <code>SetActive(ClockedIn = _ClockedIn)</code> method is being called, but the UI doesn't change.  Do I have something wrong with my binding?  Is there some method I need to call to refresh the UI?</p>