A Simple Gradient Editor for WPF in C#

• Download source - 18.45 KB

Introduction

GradEditWPF is an extremely simple gradient editor for WPF. It outputs XAML code and allows easy selection of the common system colors.

Background

The Windows Presentation Framework (WPF) has impressive capabilities, but I could not find an easy to edit or play with the gradients possible. To scratch that particular itch, I wrote this extremely simple editor.

There are certain useful features that do not exist in this project such as the ability to arbitrarily set any RGB value and to change the size of each GradientStop.

Using the Code

GradEditWPF is intended to be run as a standalone application to help developers/designers create gradients for their WPF applications.

Application Interface

The top third of the application contains all the functionality for editing the gradients.

• The bands drop down allows the user to set the number of GradientStop to use.
• The System.Windows.Media.Color combo enables easy selection of the system colors.
• The slider allows the user to quickly go to the appropriate GradientStop to edit.

Basic XAML for LinearGradientBrush

<LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
  <GradientStop Color="Black" Offset="0.0" />
  <GradientStop Color="White" Offset="0.5" />
  <GradientStop Color="Black" Offset="1.0" />
</LinearGradientBrush> 

The above code will generate three GradientStop (color band) black-to-white-to-black gradient as a LinearGradientBrush. The XAML output of the software is intended to match this.

The System Color enumerations (stored in the Dictionary.xaml file) are borrowed from http://stackoverflow.com/questions/562682/how-can-i-list-colors-with-wpf.

The C# code has two notable methods:

1. The gradient preview logic via direct WPF manipulation
2. The XAML output via simple XML generation

Gradient Preview Logic

private void SetGradient()
{
    if (gradrect == null)
        return;
    LinearGradientBrush lgbrush = (LinearGradientBrush)gradrect.Fill;
    GradientStopCollection gscollection = lgbrush.GradientStops;
    
    GradientStop g;
    gscollection.Clear();
    for (int i = 0; i < currentPaletteSize; i++)
    {
        g = new GradientStop();
        g.Color = (Color)ColorConverter.ConvertFromString(colorNames[i]);
        g.Offset = (float)i / (float)(currentPaletteSize - 1);
        gscollection.Add(g);
    }
    Report();
} 

The above logic obtains the current LinearGradientBrush from the gradient rectangle specified in the application's XAML file.

Next it obtains the collection of GradientStop, clears it, and proceeds to set each GradientStop to the colors contained in the colorNames array. The names are the same as the System.Windows.Media.Colors entries.

XAML Output

private void Report()
{
    String report;
    report = "";
    
    double offset = 0;
    report = "<LinearGradientBrush StartPoint=\"0,0.5\" EndPoint=\"1,0.5\">\n";
    for (int i = 0; i < currentPaletteSize; i++)
    {
        if (currentPaletteSize > 0)
            offset = (double)i / (double)(currentPaletteSize - 1);
        else offset = 0;
        report += "\t<GradientStop Color=\"#" + colorNames[i] 
            + "\" Offset=\"" + offset + "\" />\n";
    }
    report += "</LinearGradientBrush>\n";
    if (textBoxGradXML!=null)
        textBoxGradXML.Text = report;
} 

The XAML output code is extremely simple. It creates a single string with each GradientStop color name pulled from the colorNames array and finally sets the text box to the string.

Points of Interest

As an introductory project to the world of WPF, I found it very entertaining to write a simple tool that I could use to bootstrap even further WPF development. I hope at least one other developer finds either the tool or techniques useful.

History

Removed one single character in initial upload - A single letter (extraneous # in the XAML output code) really can make a piece of software misbehave badly.