Click here to Skip to main content
Click here to Skip to main content
Go to top

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#

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.

License

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

Share

About the Author

LayneThomas
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.

Comments and Discussions

 
GeneralWorked Nice! PinmemberCosmic Coder6-Apr-14 4:32 
GeneralI think it's a nice start Pinmemberpleaseleaveme17-Sep-10 13:29 
GeneralRe: I think it's a nice start PinmemberLayneThomas1-Oct-10 15:37 
GeneralGood Job PinmemberBob Ranck18-Mar-10 3:34 
GeneralMy vote of 5 PinmemberCharles Cox1-Feb-10 20:00 
QuestionGradient along? Why not using InkScape? PinmemberSAKryukov1-Feb-10 8:04 
AnswerRe: Gradient along? Why not using InkScape? PinmemberLayneThomas1-Feb-10 8:41 
AnswerRe: Gradient along? Why not using InkScape? PinmemberAndy Missico3-Apr-12 11:47 
GeneralRe: Gradient along? Why not using InkScape? PinmvpSAKryukov3-Apr-12 13:07 
GeneralRe: Gradient along? Why not using InkScape? PinmemberAndy Missico3-Apr-12 18:17 
GeneralRe: Gradient along? Why not using InkScape? PinmvpSAKryukov4-Apr-12 20:33 
GeneralRe: Gradient along? Why not using InkScape? PinmemberAndy Missico5-Apr-12 3:08 
GeneralRe: Gradient along? Why not using InkScape? PinmvpSAKryukov5-Apr-12 19:07 
General[My vote of 2] Sorry to give you a 2, but... PinmemberSledgeHammer011-Feb-10 4:49 
GeneralRe: [My vote of 2] Sorry to give you a 2, but... PinmemberErlend Robaye9-Feb-10 0:13 

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

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

| Advertise | Privacy | Mobile
Web04 | 2.8.140916.1 | Last Updated 1 Feb 2010
Article Copyright 2010 by LayneThomas
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid