Introduction

This is a simple color tool (a full Silverlight application) that generates a xaml code for the gredient brushes for the Silverlight development.  This application contains four major sections: Color Picker, Color Container, Linear/Radial Gradient Creator, and Linear/Radial Display & XAML Code Generator.

Background

I was looking for a simple color tool that would provide much of useful color information for my Silverlight development needs.  Although VS2010 works great and generates xaml codes, I still couldn't visualize the full gradient brush before its xaml code got generated.  One day as I was going over a Silverlight SDK documentation, and as I was reading through the gradient section, something clicked...and the idea for this application was born. And this is how I come to develop this color tool "MyColorSprite."

Description

  1. Color Picker -  This is where you can compose any simple color using A/R/G/B color sliders.
  2. Color Container - Once a color is created, it can be saved in this container.  If you don't want to keep the color any longer, just click the color box.  The box is now available for another color.  Up to 44 simple colors can be saved & contained in this section.
  3. Linear/Radial Gradient Creator - Up to 9 color stops are allowed to build a gradient brush for different gradient types.  Here you can choose colors for the gradient brush and adjust each offset value of colors.  You can choose any of 44 simple colors you saved in the container and build a gradient brush. 
  4. Linear/Radial Gradient Display and XAML Code Generator - As you work on 3, you will see your gradient brush being created.  When you're ready, just press the button for either linear or radial gradient xaml code.  The xaml code is ready for your Silverlight development!

 Demo available at http://www.dbsoup.org/Life/MyColorSprite.html

 

C#
Edit|Remove
namespace MyColorSprite 
{ 
    public partial class MainPage : UserControl 
    { 
        /// <summary> 
        /// Linear or Radial 
        /// </summary> 
        /// <param name="sender"></param> 
        /// <param name="e"></param> 
        private void GradChoices_SelectionChanged(object sender, SelectionChangedEventArgs e) 
        { 
            int Idx = GradChoices.SelectedIndex; 
 
            _currentGradientType = Idx; 
            _isXamlCodeReady = false; 
            _isGradientTypeChanged = true; 
 
            codeViewer.Text = ""; 
            GradTypeChoices.Items.Clear(); 
 
            if (Idx == 0) 
            { 
                _isLinear = true; 
                _isRadial = false; 
                ActivateLinearGradTypeCombo(); 
                TypeProperties.Children.Clear(); 
                DisplayLinearProperties(0); 
            } 
            else if (Idx == 1) 
            { 
                _isLinear = false; 
                _isRadial = true; 
                ActivateRadialGradTypeCombo(); 
                TypeProperties.Children.Clear(); 
                DisplayRadialProperties(0); 
            } 
            else 
            { 
                DisableGradTypeCombo(); 
                DisableRadialType(); 
            } 
        } 
 
        /// <summary> 
        /// Diagonal(default), Horizontal, Vertical  
        /// </summary> 
        /// <param name="sender"></param> 
        /// <param name="e"></param> 
        private void GradTypeChoices_SelectionChanged(object sender, SelectionChangedEventArgs e) 
        { 
            int Idx = GradTypeChoices.SelectedIndex; 
 
            _isXamlCodeReady = false; 
            codeViewer.Text = string.Empty; 
 
            if (_isLinear == true) 
            { 
                switch (Idx) 
                { 
                    case 0: DisplayDiagonalProperties(); 
                        return; 
                    case 1: DisplayHorizontalProperties(); 
                        return; 
                    case 2: DisplayVerticalProperties(); 
                        return; 
                } 
            } 
            else if (_isRadial == true) 
            { 
                switch (Idx) 
                { 
                    case 0: _isBySide = false; DisplayCircleByCenter(); 
                        return; 
                    case 1: _isBySide = true; DisplayCircleBySide();  
                        return; 
                    case 2: _isBySide = false; DisplayEllipseByHight();  
                        return; 
                    case 3: _isBySide = false; DisplayEllipseByWidth();  
                        return; 
                } 
            } 
 
        } 
 
 
        /// <summary> 
        ///  
        /// </summary> 
        private void ActivateLinearGradTypeCombo() 
        { 
            GradTypeChoices.Height = 25; 
            GradTypeChoices.IsEnabled = true; 
            GradTypeChoices.Width = 150; 
 
            ComboBoxItem cbi1 = new ComboBoxItem(); 
            cbi1.Name = "LinearType1"; 
            cbi1.Content = "Diagonal"; 
            cbi1.Height = 25; 
            cbi1.Width = 150; 
            ComboBoxItem cbi2 = new ComboBoxItem(); 
            cbi2.Name = "LinearType2"; 
            cbi2.Content = "Horizontal"; 
            cbi2.Height = 25; 
            cbi2.Width = 150; 
            ComboBoxItem cbi3 = new ComboBoxItem(); 
            cbi3.Name = "LinearType3"; 
            cbi3.Content = "Vertical"; 
            cbi3.Height = 25; 
            cbi3.Width = 150; 
 
            GradTypeChoices.Items.Add(cbi1); 
            GradTypeChoices.Items.Add(cbi2); 
            GradTypeChoices.Items.Add(cbi3); 
 
            GradTypeChoices.SelectedIndex = 0; 
 
        } 
 
        /// <summary> 
        ///  
        /// </summary> 
        private void ActivateRadialGradTypeCombo() 
        { 
            GradTypeChoices.Height = 25; 
            GradTypeChoices.IsEnabled = true; 
            GradTypeChoices.Width = 150; 
 
            ComboBoxItem cbi1 = new ComboBoxItem(); 
            cbi1.Name = "RadialType1"; 
            cbi1.Content = "Circle by Center"; 
            cbi1.Height = 25; 
            cbi1.Width = 150; 
            ComboBoxItem cbi2 = new ComboBoxItem(); 
            cbi2.Name = "RadialType2"; 
            cbi2.Content = "Circle by Side"; 
            cbi2.Height = 25; 
            cbi2.Width = 150; 
            ComboBoxItem cbi3 = new ComboBoxItem(); 
            cbi3.Name = "RadialType3"; 
            cbi3.Content = "Ellipse by Hight"; 
            cbi3.Height = 25; 
            cbi3.Width = 150; 
            ComboBoxItem cbi4 = new ComboBoxItem(); 
            cbi4.Name = "RadialType4"; 
            cbi4.Content = "Ellipse by Width"; 
            cbi4.Height = 25; 
            cbi4.Width = 150; 
 
            GradTypeChoices.Items.Add(cbi1); 
            GradTypeChoices.Items.Add(cbi2); 
            GradTypeChoices.Items.Add(cbi3); 
            GradTypeChoices.Items.Add(cbi4); 
 
            GradTypeChoices.SelectedIndex = 0; 
 
        } 
 
 
    } 
}