WinForms - New CheckEdit Styles

Once upon a time in the distant past, when the grass was greener and the world was young (and all of us were, too!), our designers created sixteen styles for our CheckEdit control. Using the CheckStyle property a developer was able to select one of these styles, but as time moved on so did our aesthetic standards together with those of other Windows application designers. The styles started looking increasingly weird and outdated and we ended up making those enum values invisible …. but they are still around for those brave enough to look for them!

By setting CheckStyle to one of the old values you can create check edits that look like these:

Old Check Edit Styles

Times are a-changing

Now, I’m not telling this story to scare anybody. I thought it was worth a look back to point out our commitment to legacy functionality - we hate breaking your code! I’m sure there are applications around today that use these old styles, please feel free to comment and let us know if you maintain one of them!

Meanwhile, our designers and developers got their heads together and decided it was high time to introduce some pretty new vector based styles. Here’s what they came up with:

New SVG Check Edit Styles

These styles will be available starting with v18.2 (in addition to the old ones, I should add!), and of course they come with all the usual benefits of vector images: they scale up and down without loss of quality, and the can adapt their colors to skins or palettes.

Adaptive Styles

What do you think?

We are publishing this post early in the development cycle for v18.2 because we hope to receive some feedback from you! There are several questions and concerns we have. For a start: do you need additional styles? For instance, the old Style 15 was a light bulb. Do you need a replacement for that? Or do you have a completely different style in mind that we should introduce?

Another perhaps more important question has to do with the indeterminate state that indicates partly checked elements, often hierarchies or groups.

Indeterminate Check Box

Obviously simple check and radio styles need to support this indeterminate state. But we can’t figure out what this state should look like for, say, a star or a flag. We assume right now that indeterminate states don’t make sense for such styles. Please let us know your thoughts or approaches you have taken before and we will make sure to provide the best possible solutions for your real-world projects!

12 comment(s)

I'm sorry, this is nice but you may invest to much time in this.

I have my own "Design" made with individual icons as repository and editors. I think, you should invest more time, that scaling in multi monitor scenarios with different resolutions for each monitor within the same application works.

At the moment with 18.1.4 it works not and it is heavy to supress unwanted scaling!

26 July, 2018

Re. indeterminate state

The only thing I could thing of is to fill the shape with a bottom-left to top right diagonal stripe brush alternating between the main colour and Transparent.

26 July, 2018

The new check styles looking nice and are very welcome. Much better and much more usefull then the old ones. Personally I dont need bulbs, pins or switches (for some very rare usecases I can do this other way  for instance with a label and a few images). For the indeterminate style I second the idea from Simon Hewitt...

26 July, 2018

Heiko, just a quick tip here - even though you need those custom images very rarely, remember that you can still use a CheckEdit: set the "CheckStyle" property to "UserDefined" and assign your custom images for checked, unchecked and grayed-out states. That would be a bit longer than selecting a pre-defined style, but still much more convenient than using the label+image combo, which will require you to implement the check\uncheck functionality and manually switch images on clicks.

And since you and Simon both agree on the diagonal fill - are you saying you'd better have those indeterminate states for styled check-boxes? Or it's just an idea of how indeterminate states could look and you don't actually need them? :)

26 July, 2018

I like the new icons.  Modernizing the themes and things like this are important so the controls don't feel stale or on the verge of being abandoned.

I agree with the diagonal fill idea for indeterminate states, but I have yet to use an indeterminate state in our huge application.  I always convert null values to unchecked, too.  I find the indeterminate state to be too confusing for many users unless it is necessary for something like the "All" selection in your screenshot example.

26 July, 2018

Indeterminates are used in my app in quite a few places for custom filtering.

e.g. for a Library Book search, I have an IsFiction 3-way checkbox.

Checked -> Append IsFiction=True to built-up filter

Unchecked -> Append IsFiction=False to built-up filter

Indeterminate= (don't append to built-up filter - ie don't care)

Whilst a bog-standard Checkbox is fine for this use, I could add an IsFlagged property in future and rather than have a 3-way checkbox with "Is Flagged" as a caption, I could just show the new Filled Flag CheckStyle instead. Same with the star for a future "IsReviewed" filter.

A purist might deem it important to separate logic away from appearance concerns, and since CheckEdit supports indeterminate state, then the new appearances available should also support that state.

As a pragmatist (and since there are other more important things to work on **), why not give the diagonal fill a quick a try and if it looks OK then include it, and if not, leave it out.

** Go on, ask me... I dare you :-)

26 July, 2018

These are great. We should be able to create our own custom svg styles.

26 July, 2018

We do not use CheckStyle's at the moment. SVG counterparts could be, in another hand, somewhat useful (specially for read-only information - not sure about users clicking them).

26 July, 2018

This is a great improvement to keep the framework moving forward and looking modern.  Thanks!

27 July, 2018

Toggle aspect will be great ? ( Web is ruling the UI World ! )

27 July, 2018

Toggle look would be nice, but doesn't have an intermediate state. The "on-off-I don't care"-filter option is used a lot in our main application.

I'm all in for more 'web' look :).

30 July, 2018

Re. indeterminate state

Currently we use Style 4 when we need the indeterminate state (grayed out - similar to disabled).

Besides this, I'd appreciate a modernized version of Style 16 to represent physical switches.

10 August, 2018

Please login or register to post comments.