Filling in a shape with another color
This article will show you how to fill in a graphic with another color using two separate graphics. This can be useful when creating controls such as progress bars. The technique will use blending settings so that you can fill in non-rectangular shaped controls.
The default engine behavior
If graphic "ProgressThumb" is placed over the top of graphic "ProgressBar" notice that the rounded edges of "ProgressBar" disappear.
At first you might be tempted to make "ProgressThumb" a rounded rectangle as well. The problem is that the rounded corners will draw at different sizes depending on the width of the graphic. In addition, you don't want the right side of "ProgressThumb" to have rounded corners.
Using blend modes to get the desired result
What we really want is for the "ProgressThumb" graphic color to overlay the "ProgressBar" graphic while maintaining the shape of the "ProgressBar" graphic. For that we need to set the ink property from the Blending property pane.
- Select the graphic "ProgressThumb" and set the ink to blendSrcAtop. You won't see a noticeable change yet.