Skinnable Control Library

Topics: Cross Platform, Deployment, Editor UI
Nov 16, 2015 at 3:47 AM
Edited Nov 16, 2015 at 3:49 AM
I'm guessing that many Vst developers out there would have come across this.

Is there a good control library out there that's skinnable?

I'd really like to be able to get graphic artists to design knobs, faders, etc. etc. but most of the controls I've come across are all tied to styling within the UI platform.

Some control toolkits are Telerik, Infragistics, Actipro, and so on. But, are any of these skinnable?

Here's an example of the stuff I want to be able to do.
http://www.vstskins.com/

PS: I'm still not sure if I will be using WPF, or UWP. It was hard enough to find a single WPF knob on the web that works let alone a skinnable one.
Nov 16, 2015 at 11:34 PM
Edited Nov 16, 2015 at 11:34 PM
most of the controls I've come across are all tied to styling within the UI platform.
  • How could it not be the case? My understanding is that most if not all plugins are created using VSTGUI (free and craptacular) or JUCE (commercial and meh). I get the idea that VstSkins is a theme repository but what is the file formats of these themes? Aren't they VSTGUI and JUCE theme files? Besides VSTGUI, JUCE and QT there isn't many choice for cross platform GUI libraries.
Some control toolkits are Telerik, Infragistics, Actipro, and so on. But, are any of these skinnable?
  • Sure, at least for Telerik and Infragistics I know they have a WinForms theme system and a WPF XAML system for theme support. You'll find it great for switching between preset themes like Office 2K Blue/WinClassics and for some custom color choices. These controls from big vendors are meant to be localizable, accessible and customizable by the user through the operating system so you shouldn't expect the same photoshop approach to UI that JUCE does. As far as I'm concerned I have written a lot of controls in code behind without XAML so I just built my custom theming system on top of it. That would seem like a huge undertaking but WPF makes it very easy to build custom controls in code behind by composition of many simpler controls into a more complex one.
Nov 16, 2015 at 11:40 PM
Some control toolkits are Telerik, Infragistics, Actipro, and so on. But, are any of these skinnable?
  • I should add that standard WPF Windows controls are themable pretty much the same way as Telerik and Infragistics. You just have to get the style for the control, most of them are available if you dig around a little bit.
Nov 16, 2015 at 11:43 PM
It was hard enough to find a single WPF knob on the web that works let alone a skinnable one.
  • lol I can feel your pain. Remember CodeProject.com is your enemy ;)
Nov 17, 2015 at 1:06 AM
Edited Nov 17, 2015 at 1:10 AM
Yury, I'm a bit confused. I would love to use VSTGUI. It looks perfect! It's exactly what I want. But that's a C++ library. How would I leverage that in WPF, or UWP for that matter?

Telerik and Infragistics I know they have a WinForms theme system and a WPF XAML system for theme support.

I don't think I'm looking for a "themed" set of controls. When I hear the word "theme", I think Xaml based styling and perhaps templating. I need something that's as simple as replacing a bitmap image like VSTGUI. Or, if you know of a good tutorial on templating a WPF control with images...

I have done a bit of templating in Silverlight, but none of that would really allow me to easily do what I want to do without writing shitloads of Xaml and overriding the core functionality of the Sivlerlight/WPF controls.

I just built my custom theming system on top of it. That would seem like a huge undertaking but WPF makes it very easy to build custom controls in code behind by composition of many simpler controls into a more complex one.

I have been tossing around the idea of building my own controls, but it seems like massive overkill! I'm focused on synthesis, not controls. Surely, someone out there would have wanted to build something like this in the past. If not, it's going to be a matter of building something like VSTGUI for WPF/UWP.
•lol I can feel your pain. Remember CodeProject.com is your enemy ;)
Half the issue is that Microsoft have chopped and changed their technologies like diapers. Someone builds some cool stuff on a platform, and next week Microsoft says "Ah, too bad, that shit's going in the bin next week". So what's the incentive for someone to build something cool?
Nov 17, 2015 at 1:48 AM
Edited Nov 17, 2015 at 1:52 AM
The core issue with bitmap based GUI is that they perform poorly on high pixel density screens. I believe the way of the future is in GPU powered vector graphics. Whatever the technology it needs to provide that to render efficient 2D graphics. XAML is slow and a mess when bindings are involved... but it is a totally optional part of WPF. I'd contrast XAML with HTML/CSS which is an even bigger mess. A designer will not code, that is a failed concept. Otherwise WPF is silky smooth without any double buffering trickery and has amazing high level functionality. If I were to adopt a new technology, I'd have to find alternatives for my base WPF classes like 'border', 'grid', 'textbox', 'scrollviewer', 'path'... I wouldn't need to find a new knob control for instance.
Coordinator
Nov 17, 2015 at 5:09 AM
WPF is the ultimate skinning and styling machine that is out there IMHO.
So if you have a knob that works it should be fairly easy to put another picture on it...

But you have to dig into the xaml...
Nov 17, 2015 at 6:03 AM
While skinning existing WPF controls, or creating new ones would of course be possible, it's no trivial matter at all. I'd rather pay someone else to do this work for me. I sure don't have enough time to do it.
Nov 17, 2015 at 8:12 AM
Actually, I say this with all seriousness, I'd pay to have these controls built! Make me an offer!
Coordinator
Nov 17, 2015 at 8:26 AM
Sorry, no time ;-)

In my limited experience I was able to make skinned controls with Blend and VS (and some samples from the internet) for an LCARS (Star Trek UI) project I was working on... It is definitely a learning curve but it is doable and very rewarding -and next time you wont be intimidated to try it again...
Nov 17, 2015 at 8:51 PM
Just for the record, I thought I'd give templating a go with the simplest of controls - Checkbox. So, I grabbed an example template from here: https://msdn.microsoft.com/library/ms752319(v=vs.100).aspx. I've previously done this before in Silverlight, so it's not particularly new to me. But, after an hour of playing around, I couldn't get the images to display correctly.

The conclusion that I came to was that it would be far easier to create a control from scratch that I could write with code rather than trying to play with WPF's StoryBoard system, and manipulating properties with animation. The fact of the matter is that VSTs need to be skinned with images. If you download some skins from vst skins, you can see exactly how commercial VSTs are skinned. It's very simple. It seems that many of the controls (for example, dials and gauges), are literally just a collection of images with the needle or whatever at different angles. This is how its done in the VST world. Trying to achieve this with existing WPF controls would be perilous.

https://www.google.com.au/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&sqi=2&ved=0CBsQFjAAahUKEwiLsKTvt5jJAhUjH6YKHZJ1BHw&url=http%3A%2F%2Fwww.vstskins.com%2F&usg=AFQjCNEa61bMTsodnXKj_I7kBoGigWTBKg&bvm=bv.107763241,d.dGY
Nov 17, 2015 at 9:18 PM
The conclusion that I came to was that it would be far easier to create a control from scratch that I could write with code rather than trying to play with WPF's StoryBoard system, and manipulating properties with animation.
  • Pretty much the same conclusion I came to.
Trying to achieve this with existing WPF controls would be perilous.
  • I believe I'd still be far easier than with something like GDI or DirectX. An existing WPF control doesn't need to be a full template. For instance BitmapImage is a WPF control. You could derive a class from that, handle the events like mouse clicks and use mouse capture to create a simple button.
Nov 17, 2015 at 9:21 PM
Yes. Of course this is possible, but I'd be recreating all the controls from scratch. It would take months.
Nov 17, 2015 at 11:40 PM
Yes. Of course this is possible, but I'd be recreating all the controls from scratch. It would take months.
  • Well maybe I'll consider your other solution especially since it falls into my area of expertise. What are the specific controls you need? Knob, slider, button, push button and image; would that be sufficient? Do you need any kind of keyboard support for these controls? Do you need to set the properties of the control (value, min, max...) inside XAML? Could you provide a complete set of images for theming and a simple mock up of the end product?
Actually, I say this with all seriousness, I'd pay to have these controls built! Make me an offer!
  • It obviously depends on requirements. Could take days or a week, that ain't cheap in my book. Although it would be easy to work incrementally one control at a time. You can send me a private message through CodePlex if you want to discuss about it.
Nov 17, 2015 at 11:55 PM
Awesome!

I'll put together a proposal and send it to you soon.