Details to remember as I implement Windows Phone-style themes and design Retiled's UI.

[DrewNaylor]

Update 3 (the other two were deleted due to being outdated): I ran the PySide6 Qt Quick Controls gallery and found that, with some changes, the progress bar, progress ring (called "BusyIndicator" here), SwipeView, and TabBar controls will probably work well just going from the Universal style.

• Most buttons have their background color changed to the accent color when pressed.
• Some buttons such as the "All Apps" button have the fill color as white instead of the accent color.
• Support for accent colors other than Cobalt needs to be added.
  • While not yet available in a released build, it is available on main and you just have to edit "RetiledSettings/configs/themes.config" in the repo or "~/.config/Retiled/RetiledSettings/configs/themes.config" if it's copied there whether by you to prepare for the next version (it'll support Accent colors; changing them in a UI will take longer), or by an unofficial tweaks program that makes it easier to change stuff that doesn't have a GUI available for yet.
  • Please note that apps don't listen for Accent color changes yet, and as such must be restarted for your changes to take effect.
• Custom accent color support as seen on desktop Windows 10 needs to exist.
  • Again, this must be done by editing the config file for now.
  • Qt has a QML color picker now that should work.
• Support for the light theme.
  • Light/dark is an option in the config file, but it's not yet implemented. You can change it to light now if you want to have the light theme as soon as a version with support for it is installed.
• "Light Cobalt" should be added as an option in case people prefer the lighter variation from some phones (#3e65ff instead of #0050ef according to WindowSpy)
• Apparently there's another variant of Cobalt that the Visual Studio Designer displays in the Device pane, that being #0B6CF8. In case it's necessary, the full code is #FF0B6CF8, but GitHub doesn't display a preview for that one. This color may be the real "Light Cobalt" that some devices displayed instead of the real Cobalt, as it looks less purple to me.
• Here's a full list of the colors as defined/displayed by Visual Studio. I don't know if people will want to use these, or the colors in the other list I have somewhere.
  
• There needs to be a way to reference the styles for controls from multiple applications.
  • Should be possible by referencing a library and specifying the assembly when adding the styles to the page.
  • I guess this is technically supported due to how QML classes work.
• Toggle switches have padding inside them so the accent color doesn't fill the entire thing:
  
• Toggle switches also slide over and can even be dragged over manually.
• Progress bars are really thin and use the accent color as their fill color.
• Opening the appbar has a nice transition for the buttons in it to slide into place.
• A common page transition is the "barndoor swing", for lack of a better phrase. I may have mentioned these two transitions in the long document with what features there'll be.
• The "Unpin Tile" button has a black (or white, if using the light theme) outline when pressed, while the "Resize Tile" button doesn't:
  
• Apps with really long names just show whatever can fit in the tile:
  
• Items in the All Apps list go behind the statusbar, which appears to have reserved space, unlike on the Start screen:
  
  
• While there is a gap at the top of the All Apps list, items go above it but stop at a point. This is related to the "reserved space" thing above.
  
  • I think the "reserved space" thing should be handled by creating either an extension for Wayland or something with D-bus that apps that support it can use to specify how the status bar area should act, whether it should automatically reserve space like a LayerShell component (for compatibility with basically everything that's not designed for Retiled, but also apps that can just have space at the top; the only concern is if an app needs to have a loading indicator at the top, there needs to be a D-bus thing to specify that the status bar icons need to hide and something else like the "Loading..." dots needs to be shown [maybe there can be a way to have the status bar be in LayerShell mode and also change what's displayed up there, so app developers don't have to manually do spacing if they don't want to, but they can also do manual spacing and the "loading..." dots if they want]) or if the app can handle it so it's more immersive. Hiding the status bar is also important, but I think that's already been discussed in the large document in /docs.
• As shown in the screenshots above, the All Apps list has headers for the first letter of each item. Microsoft has an example on how to do that with a ListView here, which will need to be altered to work with Avalonia: https://docs.microsoft.com/en-us/windows/apps/design/controls/lists#examples-1
  
  This SO page may help point me in the right direction for doing this under QML:
  https://stackoverflow.com/questions/48923148/qml-creating-a-re-usable-listview-header-component
• WP buttons will turn toward where the user pressed them. This issue is being tracked here, though I figured that it would be a good idea to add it to this list, too: Look into how WinUI buttons act like WP buttons and rotate/transform toward the mouse when pressed. #37
• Most phones had different positions for their navigation buttons, so there should be a way to allow the user to customize the spacing between them if desired.
• There's a gap below the "uninstall" button in the All Apps List app context menu and unless I said this somewhere else, context menus have a black outline on the top and bottom and are the width of the screen.
• They also "push" the rest of the apps into the "background" with an animation when they open.
  
• Location services has an icon in the statusbar when it's active that looks like a big dot with a circle around it.
• App bar buttons rotate when the screen is rotated:
  
• Not sure if I wrote this somewhere else, but the statusbar icons are grey and slightly transparent as shown below comparing the statusbar when the Action Center is closed and open. You can see where the battery icon overlaps with the IE logo that the fill color isn't opaque. This may be different in different applications though, so I don't know how to handle that yet. Maybe it'll just be slightly transparent for everything.
  
• Dropdown boxes usually have black backgrounds and white outlines in the dark theme, but pressing them changes them to a white background and an accent color outline. When open, they show the currently-selected item with an accent color highlight and the outline remains the accent color as well. In the light theme, the dropdown box always has a white background, and a black outline unless pressed or open.
  
• I was just messing around in the Windows Phone emulator, and found out that the "Loading..." dots are squares, not circles (perhaps there should be an option to toggle between circles and squares, in case someone prefers the appearance of real circles over squares despite squares being more authentic and true-to-form for Windows Phone?):
  
• Not sure where to put this, but at 100% scale, the 720p emulator image doesn't have borders on tiles, which is good to know because I thought they did so I just didn't keep them on the buttons back when I was making them into tiles (except the OneNote icon, for some reason, has a border, which I guess it just has its own background with its own specific border color; sorry these are so large):
  
  Here's the All Apps list too, for reference:
  
  Those screenshots just above this are also available in ./docs/images/reference if you need to look at them in an image editor more easily.

[TheMobilizer]

Not sure if this is the right place but I would like to point out a few things you should NOT do (Android, iOS and some linux mobile environments do these all the time in the name of "Modern Design"):

• Rounded corners: They are overused . Almost every Android ROM does this and let's not talk about iOS. Also every linux mobile environment is implementing this. I don't like them . I don't mean to say these are bad or anything but it just won't feel like windows phone 8x if you round each and every corner. I liked windows phones for their sharp corners .Look how cool those toggle switches look. Also I think it would be extra work , at least at this stage.
• Blur: Again, it is "modern design" and every one seems to want to blur every thing out of focus but I'd rather much prefer the way WP8x did things.

I also want to say that live tiles are an absolute necessity . I tried to make Manjaro KDE's application launcher like windows 8 (the start screen which people so hated) by using a plasmoid . I pinned whatever I wanted to the start screen and got the tiled windows 8 styled menu. But , as you stated, it is complicated to implement live tiles , there was no support for that and my start screen looked terrible. Without the tiles being lively they are more like colorful square shortcuts pinned in a grid. Their 'liveliness' is what makes the whole start screen (and consequently , the whole windows phone experience) awesome. It's what makes them tick. Not saying you implement them right now but a way should be thought of when this project reaches ,say, beta (whatever beta might mean in this project's context).

I don't mean to dictate anything. Please consider the above as a humble request.

I also want to add that I am a big fan of your work (just fished out my github account to comment this). I would help but as of now I have neither time nor relevant skills (I hope to get some free time after a few months ).

[DrewNaylor]

Thank you for taking the time to comment this, it's nice to hear someone else's opinion on things and I didn't expect anyone to notice so soon!

Regarding the rounded corners, the only way that's ever happening is if people other than myself decide to create a third-party theme that looks different from the Windows Phone 8.x aesthetic, and that's only if I figure out a way to let people use third-party themes to begin with (which I want to do because I know my theming won't be perfect to everyone's tastes). For example, maybe someone wants a Windows XP-styled Windows Phone UI for some reason. One goal of this project is to go beyond what Microsoft allowed, and custom themes fits that.

With blur, I don't plan on adding it, but third-party themes might be able to add it if people wanted Aero Metro or something. I don't even know how to use XAML blur effects and I'd probably do a bad job compared to someone who knows what they're doing, so it would turn out even worse. If it turns out that there are major issues with blurred themes, the most I'll do is fix those issues so people can use blurred themes if they want to, but the light and dark WP8.x themes will be the only built-in ones (with accent colors, of course). One thing I do plan on adding is the parallax Start screen wallpaper scrolling effect that WP8.1 had since it was really cool, but fortunately there's no blur involved. Probably should add a way to turn off the parallax scrolling if people don't like it while I'm at it.

With regards to live tiles, the best solution I can think of right now is Python scripts that somehow interact with tile data. Read that from somewhere else online and thought it would be a good idea. Tiles in general are going to have a lot of properties like position, size, and color (if the user doesn't want it to use the accent color or a toggleable "color from icon" feature doesn't get the color they want), so adding a field for Python scripts makes sense. There should probably be a way for people to turn off the script for a tile if it runs too much or bothers them but they don't want it to be small, just like on Windows 10 (one of the few planned features from 10). Some live tiles like the calendar showing the day should probably still work in small view, so maybe there can be a "works in small view" variable to allow that. Not exactly sure how the Python scripts will exist. Maybe there'll be a folder path that RetiledStart looks for and if it finds a script that corresponds to a .desktop file, it'll meld the two into the live tile. As an example, perhaps there's a script named thunderbird.py that gets the number of new emails from Thunderbird (thunderbird.desktop, I assume is the name) somehow.

[TheMobilizer]

Thanks for replying. I actually watched your pinephone video .

Regarding the rounded corners, the only way that's ever happening is if people other than myself decide to create a third-party theme that looks different from the Windows Phone 8.x aesthetic, and that's only if I figure out a way to let people use third-party themes to begin with (which I want to do because I know my theming won't be perfect to everyone's tastes). For example, maybe someone wants a Windows XP-styled Windows Phone UI for some reason. One goal of this project is to go beyond what Microsoft allowed, and custom themes fits that.

With blur, I don't plan on adding it, but third-party themes might be able to add it if people wanted Aero Metro or something. I don't even know how to use XAML blur effects and I'd probably do a bad job compared to someone who knows what they're doing, so it would turn out even worse. If it turns out that there are major issues with blurred themes, the most I'll do is fix those issues so people can use blurred themes if they want to, but the light and dark WP8.x themes will be the only built-in ones (with accent colors, of course). One thing I do plan on adding is the parallax Start screen wallpaper scrolling effect that WP8.1 had since it was really cool, but fortunately there's no blur involved. Probably should add a way to turn off the parallax scrolling if people don't like it while I'm at it.

I second this approach to rounded corners and I think we should not be thinking about blur at this point.

With regards to live tiles, the best solution I can think of right now is Python scripts that somehow interact with tile data. Read that from somewhere else online and thought it would be a good idea. Tiles in general are going to have a lot of properties like position, size, and color (if the user doesn't want it to use the accent color or a toggleable "color from icon" feature doesn't get the color they want), so adding a field for Python scripts makes sense. There should probably be a way for people to turn off the script for a tile if it runs too much or bothers them but they don't want it to be small, just like on Windows 10 (one of the few planned features from 10). Some live tiles like the calendar showing the day should probably still work in small view, so maybe there can be a "works in small view" variable to allow that. Not exactly sure how the Python scripts will exist. Maybe there'll be a folder path that RetiledStart looks for and if it finds a script that corresponds to a .desktop file, it'll meld the two into the live tile. As an example, perhaps there's a script named thunderbird.py that gets the number of new emails from Thunderbird (thunderbird.desktop, I assume is the name) somehow.

I think focus should first be on implementing a static , non-live start ( the kind you state in readme ) and then when we have a start screen ( one which scrolls while dragging on the tiles ), app list , action center and navigation bar , we should try to add some rudimentary support for the live part of the tiles. Maybe we will have a better idea then .
Oh , and by the way I set up C# and Avalonia on my linux machine. I also compiled retiled and ran the start. As someone who has never touched C# on linux ( the last time I used C# was 3-4 years ago on windows 10 ) is it viable to program using it and Avalonia on linux ?

[DrewNaylor]

You're welcome! Yeah, a static Start screen is my current focus just to make things simple for now. So far I've just been developing it in Visual Studio on Windows, but it may be possible to do some development things on Linux considering Avalon Studio is a cross-platform IDE for it (haven't used it and it hasn't been updated since 2019 according to the repo I found, so it might not work; VS Code might be a better idea as Avalonia's readme says it can open cross-platform projects on Linux). Something that may be an issue with developing on Linux but I'm not sure if it would be is that some code is VB.NET, and I don't know if VS Code has support for it.

[DrewNaylor]

An update on blur: As stated in the readme, at some point in the future, tiles will have an option to use blur behind the icon when combined with a Start screen wallpaper. Some people may want their lockscreen to be consistent with their tiles, so there will eventually be an option to blur the lockscreen wallpaper. Blurring intensity will be configurable and will be off by default. Any blur aside from tile and lockscreen background blur will need to be implemented by third-party themes.

[TheMobilizer]

An update on blur: As stated in the readme, at some point in the future, tiles will have an option to use blur behind the icon when combined with a Start screen wallpaper. Some people may want their lockscreen to be consistent with their tiles, so there will eventually be an option to blur the lockscreen wallpaper. Blurring intensity will be configurable and will be off by default. Any blur aside from tile and lockscreen background blur will need to be implemented by third-party themes.

That's an awesome idea! I'm all in for this kind of blur!

[DrewNaylor]

Thank you, glad you think the same!

[DrewNaylor]

This page on Windows Phone theme resources will probably be very helpful in figuring out what values to use for various items:
https://docs.microsoft.com/en-us/previous-versions/windows/apps/ff769552(v=vs.105)

[DrewNaylor]

From that link, textboxes are supposed to have a border outline of 3, not 2. I'll see if I like how 3 looks and change it, otherwise it'll stay 2.
Edit: nah, I'm keeping it at 2, because 3 feels cramped and I might have not even read the page correctly.