Click here to Skip to main content
13,502,010 members
Click here to Skip to main content
Add your own
alternative version

Tagged as


29 bookmarked
Posted 31 Jan 2010

A Simple Gradient Editor for WPF in C#

, 31 Jan 2010
Rate this:
Please Sign up or sign in to vote.
A simple gradient editor for WPF in C#


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


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" />

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

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)
    LinearGradientBrush lgbrush = (LinearGradientBrush)gradrect.Fill;
    GradientStopCollection gscollection = lgbrush.GradientStops;
    GradientStop g;
    for (int i = 0; i < currentPaletteSize; i++)
        g = new GradientStop();
        g.Color = (Color)ColorConverter.ConvertFromString(colorNames[i]);
        g.Offset = (float)i / (float)(currentPaletteSize - 1);

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.


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.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Software Developer
United States United States
I am a developer recently moved to Seattle, Washington from Huntsville, Alabama where I developed cross-platform software and Supervisory Control and Data Acquisition systems for Water/Wastewater treatment plants and Gas pipelines.

With over 10 years professional C++ experience, I nevertheless am finding WPF in C# extremely fascinating.

You may also be interested in...

Comments and Discussions

GeneralWorked Nice! Pin
Cosmic Coder6-Apr-14 4:32
memberCosmic Coder6-Apr-14 4:32 
GeneralI think it's a nice start Pin
pleaseleaveme17-Sep-10 13:29
memberpleaseleaveme17-Sep-10 13:29 
GeneralRe: I think it's a nice start Pin
LayneThomas1-Oct-10 15:37
memberLayneThomas1-Oct-10 15:37 
GeneralGood Job Pin
Bob Ranck18-Mar-10 3:34
memberBob Ranck18-Mar-10 3:34 
GeneralMy vote of 5 Pin
Charles Cox1-Feb-10 20:00
memberCharles Cox1-Feb-10 20:00 
QuestionGradient along? Why not using InkScape? Pin
SAKryukov1-Feb-10 8:04
memberSAKryukov1-Feb-10 8:04 
AnswerRe: Gradient along? Why not using InkScape? Pin
LayneThomas1-Feb-10 8:41
memberLayneThomas1-Feb-10 8:41 
AnswerRe: Gradient along? Why not using InkScape? Pin
Andy Missico3-Apr-12 11:47
memberAndy Missico3-Apr-12 11:47 
GeneralRe: Gradient along? Why not using InkScape? Pin
SAKryukov3-Apr-12 13:07
mvpSAKryukov3-Apr-12 13:07 
GeneralRe: Gradient along? Why not using InkScape? Pin
Andy Missico3-Apr-12 18:17
memberAndy Missico3-Apr-12 18:17 
GeneralRe: Gradient along? Why not using InkScape? Pin
SAKryukov4-Apr-12 20:33
mvpSAKryukov4-Apr-12 20:33 
GeneralRe: Gradient along? Why not using InkScape? Pin
Andy Missico5-Apr-12 3:08
memberAndy Missico5-Apr-12 3:08 
GeneralRe: Gradient along? Why not using InkScape? Pin
SAKryukov5-Apr-12 19:07
mvpSAKryukov5-Apr-12 19:07 
General[My vote of 2] Sorry to give you a 2, but... Pin
SledgeHammer011-Feb-10 4:49
memberSledgeHammer011-Feb-10 4:49 
GeneralRe: [My vote of 2] Sorry to give you a 2, but... Pin
Erlend Robaye9-Feb-10 0:13
memberErlend Robaye9-Feb-10 0:13 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.180417.1 | Last Updated 1 Feb 2010
Article Copyright 2010 by LayneThomas
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid