Window Styling

[banksio]

Hi Hyrules, Trying to work on the window styling a bit as I'm much better at that than developing new features! Hadn't checked WinHue in a while (apart from GH pages) and I really like the changes.

I saw your notes in the changelog that the fluent.ribbon does not currently support themes used with the new metro window in v5. I tried updating to the v6 preview and it appears to work fine, apart from a few tweaks required. Maybe it would be OK to use the preview version for WinHue as it allows the new theming?

Just wondering what you thought.

[Hyrules]

I think I already tried the preview and I had some issues with it so I decided to stick with version 5 until I was ready but newer version might be better. I'll see what I can do.

[banksio]

Ah that's fair enough, I did have an issue with the text colour in the menu actually as it would stay white and become invisible. Thought I knew how to fix it but I couldn't reference the text colour from the theme so it would switch to white in dark mode and black in light mode, so may be good to wait a bit.

[Hyrules]

If you feel like it there would be something to do with the sliders. Try to style them in WPF. I find them kinda ugly right now. I also need some LIFX bulb icon if you want to make them. There are a few types : https://www.lifx.com/collections/featured-products#lights

[banksio]

Sure, I will check those out. Sorry for not replying, haven't checked here for a few days. I was experimenting with some new icons like the ones from Office 2013/16 that would fit the new ribbon style better - would this be something you'd like or should I leave them for now (will take some time)? Also the new ribbon version I'm trying to get working.

[Hyrules]

Go ahead. There is no hurry i starting to implement LIFX i can use hue bulb for the moment. I'm curious for those icon you are working on.

[Hyrules]

By the way you might want to take a look at blend for the styling it might help

[Hyrules]

hmmm i`ve been looking at the github of fluent ribbon and it's more or less developped. I'm unsure on if I should still use it or revert to the old ribbon and make custom home made styles. You could still style the app manually in the app settings but not by fluent ribbon. Might get rid of mahapp as well. I don't like the metro app as much as I would like. It's too bland for my taste. Don't hesitate to redo the ribbon button anyway it would be nice to have a fitting set of icons.

[banksio]

@Hyrules Will check out blend, can't remember if I've got it installed. I kind of agree about mahapp, I think the problem is it kinda feels fake just because of its nature of styling, and it feels kinda "generic". A new ribbon is probably better than the old ribbon, maybe styles could be made for the old one but might be too much work for not much return. I think fluent would be the one to stick with - maybe keep that and remove mahapps as fluent actually has a fully fledged ribbon window I believe? Or remove the ribbon and rethink the controls completely - it's a tricky one 🤔 I have been having scaling issues with the icons at the moment which might be due to the ribbon control of the new icons, so I will carry on trying different versions and seeing what happens.

[Hyrules]

Roger that I will work at removing mahapp from the app. Revert to the old styling so we can implement some custom styling at some point.

[banksio]

OK, so this is a reaallly quick mock-up of a different sort of design for WinHue. I have some other ideas too but I think this is a good start. It would have to include an Advanced Mode I think that returns to something similar of the current design otherwise it would be dumbing down too much.

All of the creators would be probably under a tab, as with the settings and searching for new bulbs.

And with some fancy transparency:

[Hyrules]

Interesting concept more "à la windows metro". I was wondering if it is better to have all objects in the same window or do like you made and split them in tabs. Do you keep the ribbon in your idea or do I add another way of creating rules and sensors ? Maybe add the button under the tab name to add rules and sensors as well as scenes. Keep going on this is a nice concept. I like it it's cleaner and less old school window with buttons.

[banksio]

@Hyrules Ah yes that is what I was aiming for. I am also wondering about the objects, I thought it might be a good idea to have a toggle in settings for this - maybe then basic users can easily set scenes and stuff, and power users can have all the controls easily accessible. In this concept the ribbon would be gone, but any main functions would be moved into the panel on the right and any lesser frequently used functions would move to their own tab on the left (you've got the idea!) I'm glad you like it, some people hate Metro and some love it lol. I'll make a few more concepts over the week and maybe we can cumulate ideas from each into a design.

[Hyrules]

I was also wondering if we should keep the context menu in the main window... maybe move the commands to the control panel to the left.

[banksio]

@Hyrules You mean like the right click menu? Yeah that could be a good idea, I'll add a bit more detail to the concept tomorrow so we can see how all the functions would be placed.

[banksio]

OK so another couple of mock-ups from the last design:

• Creators built into MainWindow:

• Or maybe continue using dialogs as before (may be easier):

• And a gif of one way it could work (starts a few seconds in):

[Hyrules]

I don't know about making everything in the same window without dialog. I would have to take a look at how to do this. Although I prefer dialogs at this point I really don't know maybe i would have to try it at some point.

[banksio]

@Hyrules I reckon you are right and dialogs are the way to go, in case anything needs changing it is much easier to not have to dig through lots of code on one form. I'm trying to think of a way to modernise the window as it is now with the commands all accessible and not hidden under a tab, it is quite tricky without a ribbon.

[Hyrules]

for the creators maybe just add a circled + button beside the name that would open the creator. Also if you have the time, i would need some more buttons images. An edit button, a rename button and delete button. I have taken some temporary icon but a matching set would be nice. For finding the lights I could add a creator that finds the lights instead of doing it in the main window directly thus removing all the creators. Hotkeys could be moved to the settings. I also can move the property grid to it's own window. leaving more space for controls.

[banksio]

@Hyrules That's a good idea. I will get round to those icons as soon as I can, is it for the ones you added in the commit earlier? Moving the properties is also a good idea I think, that would probably be handy. Do you like the idea of having an "advanced mode" that can be turned on/off in the settings? So by default some things are hidden until advanced is ticked? Or maybe it is good to make everything available by default.

[Hyrules]

for the icons yes I added some earlier to fill in the blank. For the advanced mode it could be interesting to implement. I'll see what I can do. We have to identify what is considered advanced.

[Hyrules]

I'm currently thinking on how we should handle the display of the object in the main view. I'm torn between the tabs and the listview. I don't want to have both. it's would be a mess to handle in the code. If we go one direction it's all in. I'm still unsure on which though. I have started implementing the tab control and it's working but it adds a lot of code. I also had an idea on how we could move some functions from the ribbon to the tabs header. When you click an header like light the header take more place and you see all the functions under to header name specific to each object type. That could get rid of the ribbon. We could also do the same in the list view and remove completely the ribbon but do we want to remove it ? We still need some kind of menu.

[banksio]

Ah yes I just fetched your changes actually, looking good! I am having the same trouble as you trying to decide, the tabs sacrifice functionality for layout and looks, and the listview is more powerful but doesn't look as good.

With regards to your idea about the headers, I think it's great! Here's a quick mockup (if this is what you mean) - obviously the groups tab would shift down rather than just be hidden. also the control panel is gone but ignore that lol

And as for the ribbon, I think it would be possible to completely remove it - a lot of the lesser used functions don't need to be constantly exposed. - We would have to have a main menu as in my images above that could house infrequently used things such as the bridge settings and program settings, maybe searching for new lights as this isn't done too often. The creators could have their own tab.

It might not work and ribbon may need to be re-added but I suppose there's no harm in trying. Do you overall like the style by the way, or is there anything you would change?

[Hyrules]

Style is good. Thanks exactly what I was meaning with the tabs. Now implementing the style is another thing. I'm wondering if we should add icons beside the tabs name and commands ?

[banksio]

Cool, I'm experimenting with styling right now on a blank WPF project. Will report back as I find/complete stuff. Also i just had an idea - we could have a tab for the basic objects like lights, groups and scenes, and a tab for the advanced controls - rules, sensors (schedules?) and resourcelinks. Could work and is sort of the best of both worlds.

Edit: Just noticed you have added a toggle - would that be too complex to keep in and have as like an 'Advanced Mode'? Then there is the choice.

Edit 2: Just noticed you edited your comment! - I think icons would be good - maybe white ones similar to the icons in the system tray as they will work with any accent colour

[banksio]

OK I have been researching how to make a custom window chrome for a while now and I haven't been able to reproduce one without a few NuGet plugins and custom code samples from the web. None of the solutions work properly with Windows 10's maximising animations and such either. Maybe it would be easier to leave the window chrome as is, but this would produce a bit of an ugly effect on older OSs.

[Hyrules]

for the chrome yes. I`ve also been testing the tabcontrol and at this point it's more a pain to handle that using a listview. I might be able to reproduce the same effect without actually using a tab and by using a single list view. This might actually do the best of both world.

[Hyrules]

if you want to take a look at what it looks like you can pull the latest dev. Not all working yet.

[banksio]

Looking good, it is starting to take shape! I am looking up how to style controls and hopefully will be able to style a few soon.

Also, I've got the LIFX bulb images done! What naming scheme are you using or would you like me to just attach them?

[Hyrules]

theres is not really a naming scheme you can just attach them here thanks.

[banksio]

Sure. That's the main ones, I haven't done the LIFX+ bulbs as I think the little '+' on the bulb is insignificant, I can do them though if needs be.

[Hyrules]

Nice icons exactly what I needed thanks !

[Hyrules]

hmmm. the more I play with the expanders in the mainview the less I like them. here i'm talking about the side menu not the grouping in the listview. I'm not sure I will keep this that way. I did not have time to continue working on this lately but if you have more idea about the menu they are welcomed. I'm torn between keeping the ribbon and going another way. I like the theme but i'm not to hot about the side menu. If I remove the ribbon I have to have another way of controlling in the window. there is always the toolbar which would take less place. Having a tab control only causes more code and validation. I have to split the list of objects into specific types. Highlighting group /scene membres lights is more complex.

[banksio]

@Hyrules I see what you mean. I also have been a little busy lately so never got around to playing with styling, apologies. I will try to think of another method for storing the commands and report back, maybe a simple toolbar on the top of the view would suffice and they could change depending on the view you're in. - I'll draw that tomorrow if I get a chance so you can see what I mean. Nevermind just read that you suggested that lol! So yeah toolbar might be the way to go - I think the main aim is to reduce the number of commands visible at once because it can get a bit cluttered I think. Not too sure about the code, which way would be the easiest?

Edit: Also I think there must be a way to restyle the window chrome since so many programs do it like word and excel but I still haven't found a reliable method.

[Hyrules]

Like i've said in the past there is no string attached. You don't need to do anything and take the time you need to do it. If you cannot do anything because you are busy with your life that normal. I've not really coded for a couple of days lately because I just don't feel like it. I've been playing some games and building a mining rig. There is absolutely no strings attached here. Since I don't charge for the program basically there is absolutely no reason to absolutely work on WinHue. If I wanted I could drop everything tomorrow and stop coding it. I don't because I like programming but every now and then I do something else just for my mental health sake.

[banksio]

Thanks yeah, I haven't felt like coding much this week - probably because I did a lot last week. I apologised because I think I said I would try out the new styling but never got around to it, I don't like to not do stuff I said I would but thanks for clarifying. 👍 Anyway I will at some point try it out, I've got some free time at the moment. To be fair I have also been thinking about the style but haven't really had any great ideas - did you decide which way you would go in terms of the tabs/listview?

[Hyrules]

not yet. I'm leaning toward the toolbar but i'm still thinking about this.

[Hyrules]

If you want to see what the toolbar looks like you can pull the latest dev version. I have almost finished it. I think I prefer that but for the menu on top I will have to find a way to have it scale with fonts. I'm using a 2k screen and 4k and if I don't set it to a specific font it's rather small. I'm really leaning toward the toolbar.

[banksio]

I like that! Yes that's looking good, I think having a smaller top menu means not having the tabs is fine as there are less things on the screen overall - a little decluttering goes a long way. Would it be possible to dynamically change what's visible on the toolbar depending on what's clicked? I will try to think of a way to style this and the right side control panel.

Also this code has been giving me problems for a while now and I'm not too sure why; I usually just change it to a static string but there's probably a file not synced right or something. <MenuItem Header="{x:Static resx:GUI.MainForm_Menu_File}" FontSize="17" >

[Hyrules]

I'll take a look for the sync. For the visibility things take a look at the view menu.

[banksio]

Right, I missed that! That's great. Personally I think this is the best way to move forward after seeing it in action. Will have to think of styling it, although it looks pretty good as you've done it already.

[banksio]

So I've been fiddling with styles a bit more with RC5, and I managed to get it to use the Windows accent colour, which looks quite nice as it blends in. I'm not too sure how I did it though and the methods I used are probably wrong.

I'll send a screenshot at some point.

[banksio]

OK, so here is how it looks!

It is very rudimentary because I just used this code with this gist:

var accentColor = new SolidColorBrush(AccentColorSet.ActiveSet["SystemAccent"]);
this.Background = accentColor;

I tried to link it into the XAML but couldn't figure it out. What do you think?

[Hyrules]

I'll try to see what I can do. Thanks for looking into this. I don't know how this will look. I'll have to make some test. There will also be a need to change the fonts color.

[banksio]

@Hyrules Cool, no problem. I forgot the font colour will need changing if the accent is darker. There's probably a system parameter for it somewhere, I'll look into it.

[Hyrules]

For future reference here is the naming scheme of the LIFX light bulbs : https://lan.developer.lifx.com/v2.0/docs/lifx-products [PRODUCT NAME_on.png] (including the space)

[banksio]

Thanks. Funnily enough I was about to comment here as I've been doing a lot of work today in Blend. Also modified the sliders a bit.

Here is what I've got so far (all colours are/will be customisable with different themes):

What do you think?

[Hyrules]

Seems good to me. I don't know if you are working with the lifx branch of the dev but the X Color Space label and Y are fixed in the latest version. you can bind the color if you want.

[banksio]

I'm not at the moment. I could try to merge into that branch but I don't know if stuff might break. Thanks for the heads up though.

[Hyrules]

When you are ready just pull the latest dev and merge your code with it. When I'll be ready I will merge the lifx branch with the dev branch. So if there is any conflict I will handle it so everything end up working.

[banksio]

OK. I'm currently in my fork, should I pull request into your dev or just merge with it and commit?