Window Styling

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.

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.

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.

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

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.

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.

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

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.

@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.

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.

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:

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.

@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.

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.

@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.

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):

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.

@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.

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.

@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.

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.

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.

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?

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 ?

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

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.

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.

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

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?

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

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.