title: WPF Colorize Grayscale BitmapImage
body: <p>How do I colorize a grayscale <code>BitmapImage</code> in WPF (preferably) using the MVVM pattern?</p>
  
  <p>This is the <code>DataTemplate</code> that I use in my <code>ItemsControl</code></p>
  
  <pre><code>&lt;ItemsControl ItemsSource="{Binding Items}"&gt;
      &lt;ItemsControl.ItemsPanel&gt;
          &lt;ItemsPanelTemplate&gt;
              &lt;Canvas /&gt;
          &lt;/ItemsPanelTemplate&gt;
      &lt;/ItemsControl.ItemsPanel&gt;
      &lt;ItemsControl.ItemTemplate&gt;
          &lt;DataTemplate&gt;
              &lt;Image Source="{Binding Image}"&gt;
                  &lt;Image.RenderTransform&gt;
                      &lt;ScaleTransform RenderOptions.BitmapScalingMode="HighQuality" ScaleX="{Binding ScaleX}" ScaleY="{Binding ScaleY}" /&gt;
                  &lt;/Image.RenderTransform&gt;
              &lt;/Image&gt;
          &lt;/DataTemplate&gt;
      &lt;/ItemsControl.ItemTemplate&gt;
      &lt;ItemsControl.ItemContainerStyle&gt;
          &lt;Style&gt;
              &lt;Setter Property="Canvas.Left" Value="{Binding X}" /&gt;
              &lt;Setter Property="Canvas.Top" Value="{Binding Y}" /&gt;
              &lt;Setter Property="Canvas.ZIndex" Value="{Binding Z}" /&gt;
          &lt;/Style&gt;
      &lt;/ItemsControl.ItemContainerStyle&gt;
  &lt;/ItemsControl&gt;
  </code></pre>
  
  <p>I've looked at MatrixTransform but that seems to be only used for skewing / rotating the image?</p>
  
  <p>This is what I've used in Java to achieve the same:</p>
  
  <pre><code>public static void colorize(BufferedImage image, Color maskColor)
  {
      for (int x = 0; x &lt; image.getWidth(); x++)
      {
          for (int y = 0; y &lt; image.getHeight(); y++)
          {
              int pixel = image.getRGB(x, y);
              if( (pixel &gt;&gt; 24) == 0x00 )
                  continue;
  
              Color color = new Color(pixel);
              float red   = (color.getRed()   / 255.0F) * (maskColor.getRed()   / 255.0F);
              float green = (color.getGreen() / 255.0F) * (maskColor.getGreen()   / 255.0F);
              float blue  = (color.getBlue()  / 255.0F) * (maskColor.getBlue()   / 255.0F);
  
              color = new Color(red, green, blue);
              int rgb = color.getRGB();
              image.setRGB(x, y, rgb);
          }
      }
  }
  </code></pre>
  
  <p>What would be the best way to colorize a grayscale image? I am relatively new to WPF.</p>