WPF color effect for UI element

Question

How do I add a color effect to a UI element?

For example, it should look more yellow, so pixels have a more yellow color. All I need is to make my black form a bit white, while it is inactive.

Answer 1

Based upon your clarifications, the effect you want to achieve is to place a translucent veneer over the client area, and adjust its appearance programmatically. The technique for this is to use the WPF Grid. This control allows for layering. Here's a Xaml fragment that sets up two layers...

<Window.Resources>
    <SolidColorBrush Color="Yellow" x:Key="MyVeneerBrush"/>
</Window.Resources>
<Grid>
    <Grid Background="{StaticResource MyVeneerBrush}" Opacity="{Binding VeneerOpacity}"/>
    <Grid>
        <DockPanel>
            <!--Layout goes here-->
            <TextBlock Text="Hello" FontSize="52"/>
        </DockPanel>
    </Grid>
</Grid>

The first layer contains the veneer and the second layer contains the content. Opacity on the first layer can be set from 0 (totally transparent) to 1 (totally visible), and in between values will give a translucent quality. You would need to write your ViewModel along these lines...

public class ViewModel :INotifyPropertyChanged
{
    public ViewModel()
    {
        TurnVeneerOn();
    }
    private void TurnVeneerOff()
    {
        VeneerOpacity = 0;
    }
    private void TurnVeneerOn()
    {
        VeneerOpacity = 0.4;
    }
    private double _veneerOpacity;
    public double VeneerOpacity
    {
        [DebuggerStepThrough]
        get { return _veneerOpacity; }
        [DebuggerStepThrough]
        set
        {
            if (value != _veneerOpacity)
            {
                _veneerOpacity = value;
                OnPropertyChanged("VeneerOpacity");
            }
        }
    }
    #region INotifyPropertyChanged Implementation
    public event PropertyChangedEventHandler PropertyChanged;
    protected virtual void OnPropertyChanged(string name)
    {
        var handler = System.Threading.Interlocked.CompareExchange(ref PropertyChanged, null, null);
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(name));
        }
    }
    #endregion
}

This VM exposes a property that binds to the View and controls the opacity of they first layer in the Xaml. There's two indicative methods thrown in to help get you started.

You will need to experiment with the window background and the brush and various levels of opacity to get the exact effect you are after, but there's enough here to get how it works.

The key is to use the Grid's layering capability.

Answer 2

I recently needed a gradient effect that would go from a specified color to a lighter version of that color. I came across this post which works very nicely.

Here is the code as an extension method

public static Color Interpolate(this Color color1, Color color2, float percentage)
    {
        double a1 = color1.A / 255.0, r1 = color1.R / 255.0, g1 = color1.G / 255.0, b1 = color1.B / 255.0;
        double a2 = color2.A / 255.0, r2 = color2.R / 255.0, g2 = color2.G / 255.0, b2 = color2.B / 255.0;
        byte a3 = Convert.ToByte((a1 + (a2 - a1) * percentage) * 255);
        byte r3 = Convert.ToByte((r1 + (r2 - r1) * percentage) * 255);
        byte g3 = Convert.ToByte((g1 + (g2 - g1) * percentage) * 255);
        byte b3 = Convert.ToByte((b1 + (b2 - b1) * percentage) * 255);
        return Color.FromArgb(a3, r3, g3, b3);
    }   

In my case I mix in 50 % white

BackgroundColor.Interpolate(Colors.White, .5f);

Answer 3

For enhancing your yellow pixels, you could blend in a colored layer Photoshop style. For Photoshop style blend modes, you could use Cory Plotts' library and experiment with different blend modes. However, this may be a bit overkill for what you want to do; in which case you should try the following:

If you want your element to have a simple faded look, simply add a semi-transparent layer on top of your element as keftmedei suggested. Here's an example:

<yourElement Width="100" Height="100" Canvas.Top="50" />

This would change to:

<Grid Width="100" Height="100" Canvas.Top="50">
    <yourElement />
    <Rectangle Fill="#60FFFFFF" />
</Grid>

Change the opacity level by changing the 60 in Fill="#60FFFFFF"