title: WPF: Change Progress-Bar color according its value and View Model property
body: <p>Ok so i have this property in my <code>View Model</code>:</p>
  
  <pre><code>public bool IsChecked
  {
      get { return _isChecked; }
      set
      {
          _isChecked = value;
          OnPropertyChanged(); // I also try OnPropertyChanged("IsChecked");
      }
  }
  </code></pre>
  
  <p>And as you can see this implement <code>INotifyPropertyChanged</code>.</p>
  
  <p>When this <code>property</code> is changing i can see the it notify and get the correct value.</p>
  
  <p>This is my <code>Progress-Bar</code>:</p>
  
  <pre><code>&lt;ProgressBar Name="progressBarColumn"
               Value="{Binding Progress, UpdateSourceTrigger=PropertyChanged}" 
               Width="{Binding Path=Width, ElementName=ProgressCell}" 
               Style="{StaticResource CustomProgressBar}" /&gt;
  </code></pre>
  
  <p>And my <code>Progress-Bar style</code>:</p>
  
  <pre><code>&lt;Style x:Key="CustomProgressBar" TargetType="ProgressBar"&gt;
      &lt;Setter Property="Template"&gt;
          &lt;Setter.Value&gt;
              &lt;ControlTemplate TargetType="ProgressBar" &gt;
                  &lt;Grid x:Name="Root"&gt;
                      &lt;Border Name="PART_Track" 
                              CornerRadius="0" 
                              Background="{DynamicResource ProgressBackgroundColor}"
                              BorderBrush="{DynamicResource ProgressBackgroundColor}"
                              BorderThickness="1" /&gt;
                      &lt;Border Name="PART_Indicator" 
                              CornerRadius="0" 
                              Background="{DynamicResource ProgressBarFillColor}" 
                              BorderBrush="{DynamicResource ProgressBarFillColor}" 
                              BorderThickness="1" 
                              HorizontalAlignment="Left" /&gt;
                  &lt;/Grid&gt;
                  &lt;ControlTemplate.Triggers&gt;
  
                      &lt;DataTrigger Value="100" Binding="{Binding Path=Value, RelativeSource={RelativeSource AncestorType=ProgressBar}}"&gt;
                          &lt;Setter Property="Background" Value="Green"/&gt;
                      &lt;/DataTrigger&gt;
  
                      &lt;DataTrigger Value="False" Binding="{Binding IsChecked}"&gt;
                          &lt;Setter Property="Background" Value="Red"/&gt;
                      &lt;/DataTrigger&gt;
  
                      &lt;Trigger Property="Orientation" Value="Vertical"&gt;
                          &lt;Setter TargetName="Root" Property="LayoutTransform"&gt;
                              &lt;Setter.Value&gt;
                                  &lt;RotateTransform Angle="270" /&gt;
                              &lt;/Setter.Value&gt;
                          &lt;/Setter&gt;
                          &lt;Setter TargetName="Root" Property="Width" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Height}"/&gt;
                          &lt;Setter TargetName="Root" Property="Height" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Width}"/&gt;
                      &lt;/Trigger&gt;
  
                  &lt;/ControlTemplate.Triggers&gt;
              &lt;/ControlTemplate&gt;
          &lt;/Setter.Value&gt;
      &lt;/Setter&gt;
  &lt;/Style&gt;
  </code></pre>
  
  <p>So this is the things that  currently not working:</p>
  
  <ol>
  <li><p>When my <code>Progress-Bar</code> reach the <code>value</code> of <code>100%</code> i want its <code>Background</code> color will change so i add this <code>DataTrigger</code>:</p>
  
  <pre><code>&lt;DataTrigger Value="100" Binding="{Binding Path=Value, RelativeSource={RelativeSource AncestorType=ProgressBar}}"&gt;
      &lt;Setter Property="Background" Value="Green"/&gt;
  &lt;/DataTrigger&gt;
  </code></pre></li>
  </ol>
  
  <p>So this not effect at all over my <code>Pregress-Bar</code> color when its reach <code>100%</code>.</p>
  
  <p>I even also try:</p>
  
  <pre><code>&lt;DataTrigger Value="100" Binding="{Binding Path=Value, RelativeSource={RelativeSource Self}}"&gt;
      &lt;Setter Property="Background" Value="Red"/&gt;
  &lt;/DataTrigger&gt;
  </code></pre>
  
  <ol start="2">
  <li>When my <code>View Model</code> <code>IsChecked</code> <code>property</code> is set to <code>false</code> i want that my <code>Progress-Bar</code> <code>Background</code> color will change to <code>Red</code> - also this is not working.</li>
  </ol>
  
  <p>I try to search many solutions but again and again same results - my <code>Progress-Bar``color</code> not changing at all.</p>
  
  <p>EDIT:</p>
  
  <pre><code>&lt;Style x:Key="CustomProgressBar2" TargetType="ProgressBar"&gt;
      &lt;Style.Triggers&gt;
          &lt;Trigger Value="100" Property="Value"&gt;
              &lt;Setter Property="Background" Value="{DynamicResource ProgressBarFillCompleteColor}"/&gt;
              &lt;Setter Property="Foreground" Value="Transparent"/&gt;
          &lt;/Trigger&gt;
  
          &lt;DataTrigger Value="False" Binding="{Binding IsChecked}"&gt;
              &lt;Setter Property="Background" Value="Red"/&gt;
          &lt;/DataTrigger&gt;
      &lt;/Style.Triggers&gt;
      &lt;Setter Property="Template"&gt;
          &lt;Setter.Value&gt;
              &lt;ControlTemplate TargetType="ProgressBar" &gt;
                  &lt;Grid x:Name="Root"&gt;
                      &lt;Border Name="PART_Track" 
                              CornerRadius="0" 
                              Background="{DynamicResource ProgressBorderBrushColor}"
                              BorderBrush="{DynamicResource ProgressBorderBrushColor}"
                              BorderThickness="1" /&gt;
                      &lt;Border Name="PART_Indicator" 
                              CornerRadius="0" 
                              Background="{TemplateBinding  Background}" 
                              BorderBrush="{TemplateBinding  Background}" 
                              BorderThickness="1" 
                              HorizontalAlignment="Left" /&gt;
                  &lt;/Grid&gt;
              &lt;/ControlTemplate&gt;
          &lt;/Setter.Value&gt;
      &lt;/Setter&gt;
  &lt;/Style&gt;
  </code></pre>