I have been working on a custom Hue Slider, when you drag the knob the color of it changes to its hue value. (ex 0 is red). I added a little gloss to the knob, I feel its not done, I Just don't have any Ideas as to how to give it finishing touches...

any ideas people?
I would like it to look a little more professional.

image attached:

serkan sendur commented: good question +9

Recommended Answers

All 15 Replies

I see it's very simple in design and this is good, if it does its functionality well so you don't over care about its design.

Nice work, Diamonddrake

Thanks Ramy I have put a lot of work into it so far. I added a little gloss to the top of the color spectrum. I think maybe now its complete... In the final product I think I will put a property to disable the gloss effects.

Still open to suggestions.

Pretty :)

The top one looks a little funny on the far left. It looks like the area to the left of the slider knob is a "stop" of some sort. It looks like a block to me.

Pretty :)

The top one looks a little funny on the far left. It looks like the area to the left of the slider knob is a "stop" of some sort. It looks like a block to me.

I'm not 100% sure what you are referring to.
but if you mean how the top of the slider knob covers a pixel of the spectrum in the backcolor on either side, then yeah. I couldn't figure out how to stop that from happening.

if the control is on an image, then a pixel of the image shows through there. but an easy fix was to keep the control sized where the hue image doesn't extend above the knob at the point where it has a curve.

but when the control is too tall it happens anyhow. because the knob is currently a fixed size.

also if you drag the knob to 0 there is a ugly blocky explosion of pixels behind the knob I can't see any reason or solution of that.

any ideas would be great.
also, if any one knows how to give a control a fixed height, that would help here, or maybe attach it to an enum that only allows like 3 variations like (short, normal, tall).

and thanks for the compliments. I have worked hard on it.
I have plans for a more compact version as well, and eventually an entire library of custom drawn controls.

The button's height/size aren't marked virtual in this case but you would want to declare the properties yourself. Hiding members like I have done here isn't a good solution, but it is a good example:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;

namespace daniweb
{
  public partial class frmButton : Form
  {
    public frmButton()
    {
      InitializeComponent();
    }

    private void button1_Click(object sender, EventArgs e)
    {
      button1.Height = 800;
    }
  }
  public class ButtonEx2 : Button
  {
    public const int MAX_SIZE = 50;

    public ButtonEx2()
      : base()
    {
      
    }
    public new Size Size
    {
      get { return base.Size; }
      set
      {
        base.Size = new Size(value.Width, Math.Min(value.Height, MAX_SIZE));
      }
    }
    public new int Height
    {
      get { return base.Height; }
      set
      {
        base.Height = Math.Min(value, MAX_SIZE);
      }
    }
  }
}

I like the idea, but I would like to see an enum for the height. could that be done?

so the height property would no longer be a int, but an emum.

pubic enum ControlHeight
{
    short = 18,
    normal = 25,
    tall = 40
}

public enum ControlHeight new height  --?
{
  get??

set
{
//I know this is wrong, but idk what to do.
   base.height = ControlHeight.Value;
}

}

any Ideas how this could be done, I realize all this code is BS, but how could I achieve this?

That depends on how your control is implemented, ie if you descended from a .NET implemented control (panel, progress bar) or did you build everything from the Control class and up?

If you want your own custom controls you are better off starting at "Control", making your own "BaseControl", and then create your custom controls from there. The controls provided for .NET don't have all members marked as virtual (such as my example) and so you can never fully customize them.

Do you mind posting code or uploading a project with one of your controls?

Im hesitant to release the code... I kinda want it to be unique to my application for a while, before I release it upon the world, that and the code's current state is horrible, I use a lot of hacky looking code, and I probably have 800 lines commented out. not really ready to be shared.

I can post a sample exe with the control in it. so you can see that it does infact work. I'm headed out to the movies now, I will do it when I get back. I just don't want all my messy code out right now.

It inherits from UserControl. which seems to cause some problems, I can't acually use new Height. it gives a compiler error and doesn't show up in intellisense.

should I not inherit from UserControl? but instead Control? or completely from scratch???

I would love to hear more about your system of custom user controls sknake.

also, I currently have an extra property called ctrlheight that is bound to an enum. so when you set it it jumps to the predefined heights, but when you just set the height, or drag it in the designer, it stays whatever size you set it too. and I don't like it.

also, just a little tid bit of knowledge on the control, the hue spectrum is drawn in GDI+ as well, so the control is all code and do binary images or resources of anykind.

You know if you release an .exe we can use the reflector and decompile it, right? :)

You should inherit from control and do your control from scratch. Again you can use the reflector to decompile the .NET framework and rip the code off for standard controls and customize it from there.

Stay away from user controls for new controls like buttons and stuff. They're handy if you have a "custom search drop down box" that has complicated databinding etc etc then you could defined a usercontrol for the single project and drop it on forms. But you shouldn't use a user control to make new controls for a toolbox item.

commented: Great tips +4

Yeah, I haven't yet learned the art of obfuscation yet... so maybe not.

I changed the inherit from UserControl to Control and and it still worked fine. I then was able to override the Height property successfully.

I could then even easily just set it as a type of my enum. but that led to the problem that all my code that does calculations will have to be changed to cast the enum to an int. and I think I use the height in calculations 20 or 30 times.

and I have no idea what effect it will have on the designer, I will have to look into it. but that is after the movie, thanks for all your help sknake!

OK! overriding the height works fine when bound to an enum so long as you do some checking to make sure the values set to it follow the values in the enum. Here is an example of how I did it.

//create height enum
        public enum ContorlHeight
        {
            Short = 36,
            Normal = 40,
            Tall = 50
        }

        [Bindable(true), Category("Appearance"),
        DefaultValue(typeof(ContorlHeight), "Normal"), 
        public new ContorlHeight Height
        {
            get
            {
                if (base.Height < 38)
                    return ContorlHeight.Short;
                else if (base.Height >= 38 && base.Height < 46)
                    return ContorlHeight.Normal;
                else
                    return ContorlHeight.Tall;
            }
            set
            {
                if ((int)value < 38)
                    base.Height = (int)ContorlHeight.Short;
                else if ((int)value >= 38 && (int)value < 46)
                    base.Height = (int)ContorlHeight.Normal;
                else
                    base.Height =  (int)ContorlHeight.Tall;

            }
        }

now when I drag the resize handles in visual studio, it jumps to the closest setting.

thanks for all the help sknake. Lots to do before its officially finished. but I am well on my way. Just lots of cleaning up to do.

You should also validate the enum in the Setter property of your application. In this case it will handle an "invalid" enum properly since it tests lengths but it will help smoke out bugs if you ever have an enum parse improperly.

IE this code will work and in my opinion shouldn't:

private void button2_Click(object sender, EventArgs e)
    {
      SomeCtrl ctrl = new SomeCtrl();
      SomeCtrl.ContorlHeight height = (SomeCtrl.ContorlHeight)600; //This line
      ctrl.Height = height;
    }
  }

  public class SomeCtrl : Control
  {

        //create height enum
        public enum ContorlHeight
        {
            Short = 36,
            Normal = 40,
            Tall = 50
        }

        public new ContorlHeight Height
        {
            get
            {
                if (base.Height < 38)
                    return ContorlHeight.Short;
                else if (base.Height >= 38 && base.Height < 46)
                    return ContorlHeight.Normal;
                else
                    return ContorlHeight.Tall;
            }
            set
            {
                if ((int)value < 38)
                    base.Height = (int)ContorlHeight.Short;
                else if ((int)value >= 38 && (int)value < 46)
                    base.Height = (int)ContorlHeight.Normal;
                else
                    base.Height =  (int)ContorlHeight.Tall;

            }
        }

    public SomeCtrl()
      : base()
    {
      
    }

  }

What I do with enums like that:

public new ContorlHeight Height
        {
            get
            {
                if (base.Height < 38)
                    return ContorlHeight.Short;
                else if (base.Height >= 38 && base.Height < 46)
                    return ContorlHeight.Normal;
                else
                    return ContorlHeight.Tall;
            }
            set
            {
              if (!Enum.IsDefined(typeof(ContorlHeight), value))
                throw new InvalidEnumArgumentException("Height", (int)value, typeof(ContorlHeight));

                if ((int)value < 38)
                    base.Height = (int)ContorlHeight.Short;
                else if ((int)value >= 38 && (int)value < 46)
                    base.Height = (int)ContorlHeight.Normal;
                else
                    base.Height =  (int)ContorlHeight.Tall;

            }
        }

I just finished another Hue Slider control. This time it is a custom drawn Photoshop Hue slider clone, the only difference was I intentionally made the arrow a little bit larger, It always frustrated me how small the arrow was, I like a larger click region.

I am working on the Saturation and luminance clones as well, and when I have completed them, i will release them with code under a noncommercial license.

Tell me what you think :)
included in photo, My custom hue slider control, and the photoshop clone slider control.

I like the idea, but I would like to see an enum for the height. could that be done?

so the height property would no longer be a int, but an emum.


any Ideas how this could be done, I realize all this code is BS, but how could I achieve this?

Your code is almost there for using an enum:

namespace Slider
{
    public enum ControlHeight
    {
        //short is a keyword so changed it small/large
        small = 18,
        normal = 25,
        large = 40
    }
    public class SliderControl : Control
    {
        public new ControlHeight Height
        {
            get
            {
                return (ControlHeight) Enum.Parse(typeof(ControlHeight), base.Height);
            }

            set
            {
                base.Height = (int)value;
            }

        }
    }
}

Is that kinda what you were going for?

Thanks Ryshad, I didn't think about using enum.parse, that is a better solution than what I come up with, of course the real take for me was the set method, witch I figured out a good solution for, my goal was to only allow setting specific heights, so even in VS if you drag to resize the control it jumps to the closest compatible height.

Thanks again for the suggestion.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.