Wallpaper page UI changes

[Jay-o-Way]

Trying to follow Windows 11 Settings.

Changes

• Added a preview image
• Used an SettingsExpander with SetttingCard for better width control
• Couple of strings
• set Stretch on DesktopPreviewImage

To do

• Hide Border when setting == Spotlight, or fill with Spotlight image?
• Improve the preview image quality ❓
  • Get system display size (aspect ratio) and apply it to the image (width)
  • But which display??

Screenshot

[Jay-o-Way]

@ChenYiLins I think I broke something, selecting different Radio buttons doesn't have immediate effect. Can you point me where it gone wrong? I'll try to fix it then.

[ChenYiLins]

@ChenYiLins I think I broke something, selecting different Radio buttons doesn't have immediate effect. Can you point me where it gone wrong? I'll try to fix it then.

@Jay-o-Way Oh, I'm sorry, if nothing unexpected happens, there should be a problem with the event of removing ConfigWatcher. I have improved StateUpdateHandler in this PR, but only the code of TimeViewModel has been corrected after improvement. I'll test it right away, which should be the reason.

[ChenYiLins]

@Jay-o-Way Yep. That's the problem, and the solution is simple. You just need to find the last part of the code in TimeViewModel and delete StopConfigWacher().

    internal void OnViewModelNavigatedFrom(NavigationEventArgs e)
    {
        StateUpdateHandler.OnConfigUpdate -= HandleConfigUpdate;

        // Delete
        StateUpdateHandler.StopConfigWatcher();
    }

This means that when you navigate from TimePage to other pages, Watcher will work normally. Similarly, if you need to navigate from other pages, just delete the code in the corresponding ViewModel. At the same time, this is a temporary solution, and I will deal with this problem in the new PR immediately.

[Jay-o-Way]

@Armin2208 @Spiritreader I think PictureMode should also have ShowFillingWaySettings and ShowColorSettings. WDYT?

        None = 0,
        ShowImageSettings = 1,
        ShowMonitorSettings = 2,
        ShowFillingWaySettings = 4,
        ShowColorSettings = 8,
        ShowSpotlight = 16,

        // Predefined combinations
        PictureMode = ShowImageSettings, // add Fill and Color to handle empty desktop area?
        PictureMMMode = ShowImageSettings | ShowMonitorSettings | ShowFillingWaySettings,
        SolidColorMode = ShowColorSettings,
        SpotlightMode = ShowSpotlight

[Spiritreader]

@Armin2208 @Spiritreader I think PictureMode should also have ShowFillingWaySettings and ShowColorSettings. WDYT?

        None = 0,
        ShowImageSettings = 1,
        ShowMonitorSettings = 2,
        ShowFillingWaySettings = 4,
        ShowColorSettings = 8,
        ShowSpotlight = 16,

        // Predefined combinations
        PictureMode = ShowImageSettings, // add Fill and Color to handle empty desktop area?
        PictureMMMode = ShowImageSettings | ShowMonitorSettings | ShowFillingWaySettings,
        SolidColorMode = ShowColorSettings,
        SpotlightMode = ShowSpotlight

Windows has two wallpaper APIs.

The first one corresponds to the "Picture" setting in the current UI, and the other one is "Picture - Multiple Monitors".
The single monitor picture API is deprecated for use with Auto Dark Mode, because it will never work with Virtual Desktops, which we plan on eventually supporting. As such new features should also not be added to the old API and users are advised to use the new API.

You may expose the "Center" option as well to the PicureMMMode, as that also works with the MultiMonitor API.

    public enum WallpaperPosition
    {
        Center = 0,
        Tile = 1,
        Stretch = 2,
        Fit = 3,
        Fill = 4,
        Span = 5,
    }

These are all of the options in the backend. PictureMMMode supports Stretch, Fit, Fill, Center. Setting anything else with MM mode active will break the entire wallpaper setup.

[Jay-o-Way]

The single monitor picture API is deprecated for use with Auto Dark Mode

Oh, good to know! 😆 Looks like this PR is going to get bigger. I already know I need your help with changing those things.

[Spiritreader]

The single monitor picture API is deprecated for use with Auto Dark Mode

Oh, good to know! 😆 Looks like this PR is going to get bigger. I already know I need your help with changing those things.

The previous wallpaper page in the old Pre-WinUi3 build was one of the biggest grievances @Armin2208 and I had on the UI,
If you have any questions feel free to reach out, I'll do what I can.

---

Some more info on the Wallpaper thing:

The main problem with the old API is that it's incredibly well documented

BOOL SystemParametersInfoA(
  [in]      UINT  uiAction,
  [in]      UINT  uiParam,
  [in, out] PVOID pvParam,
  [in]      UINT  fWinIni
);

SPI_SETDESKWALLPAPER 0x0014
Note  When the SPI_SETDESKWALLPAPER flag is used, 
SystemParametersInfo returns TRUE unless there is an error (like when the specified file doesn't exist).

so one of dem flags may set the picture mode, but who knows ¯\(ツ)/¯

Whereas the new API is very nice to us

Windows-Auto-Night-Mode/AutoDarkModeSvc/Handlers/WallpaperHandler.cs

Line 233 in 8daffc4

void SetPosition([MarshalAs(UnmanagedType.I4)] WallpaperPosition position);

In order to realize the feature, it might be necessary to call the new API while using the old API OR set it in the theme file separately in a post-sync, which again is a codepath nightmare, But I digress.

The reason why we left it in is because some people prefer to use the old API, as it keeps the wallpaper consistent with things like RDP sessions.
It's also set differently in the Windows theme file

If you look at this, then the old API sets Wallpaper and changes MultimonBackground to 0, whereas the new API sets it to 1 and then configured Wallpaper1, Wallpaper2 and so on for each monitor.

[Control Panel\Desktop]
Wallpaper=%USERPROFILE%\Pictures\Wallhaven\rainmeter-discord\5e2c7080-b9e9-11e9-94ab-28449fe27218.gif
Pattern=
MultimonBackgrounds=1
WindowsSpotlight=0
PicturePosition=4
Wallpaper1=%USERPROFILE%\Pictures\Wallhaven\wallhaven-530433.jpg
Wallpaper2=%USERPROFILE%\Pictures\Wallhaven\wallhaven-x1xlmv.jpg
Wallpaper3=%USERPROFILE%\Pictures\Wallhaven\wallhaven-545158.png
Wallpaper4=%USERPROFILE%\Pictures\Wallhaven\wallhaven-545158.png

Virtual Desktops work different again, I haven't looked too closely into it due to roadblocks for supported nuget packages.

But yeah, that's the short story of how those options came to be.

[Jay-o-Way]

I have no idea what all these things mean, but the important thing is that you do 😆 That's why it's good that you (plural) have write-acces to PRs of mine, so you can add/change things I don't know about. (please do)

[Spiritreader]

I have no idea what all these things mean, but the important thing is that you do 😆

The reason why i explained this is because you asked

@Armin2208 @Spiritreader I think PictureMode should also have ShowFillingWaySettings and ShowColorSettings. WDYT?

and I wanted to give you a bit more context about why things are the way they are.

The gist of it is:
Any option in the frontend that exposes something that wasn't possible before in the old UI is a new feature that most likely requires vertical integration.

The same applies for ColorSettings, SolidColor Mode is separate from both Wallpaper modes and does not mix with them.

[Jay-o-Way]

off-topic

Design choice: at this moment there are two different results when a setting is Off. On the Background page, all the settings (in the expander) are hidden, but on the Cursors page they are disabled. Which is better?

[Spiritreader]

Design choice: at this moment there are two different results when a setting is Off. On the Background page, all the settings (in the expander) are hidden, but on the Cursors page they are disabled. Which is better?

Good question. I agree it should be consistent. Will ping @Armin2208

[ChenYiLins]

Design choice: at this moment there are two different results when a setting is Off. On the Background page, all the settings (in the expander) are hidden, but on the Cursors page they are disabled. Which is better?

This should be that I forgot to change it. My suggestion is to hide it. Because when the software runs for the first time, Cursors will not get any display.

[Armin2208]

Design choice: at this moment there are two different results when a setting is Off. On the Background page, all the settings (in the expander) are hidden, but on the Cursors page they are disabled. Which is better?

Auto Dark Mode v10 only hides the mentioned personalization pages when they are off. If no cursor is selected, you just don't see the cursor previews, as seen in the two cursor page screenshots I took.

I have the following thoughts:

• These pages are dedicated to one feature, without many options.
• Normally you only hide elements in user interfaces, if you want to declutter (like we did in Switch Modes), or if you want to hide currently not usable / irritating options.
• For the rest, you normally just disable it.
• In that scenario, I support only hiding. Because again - these are not cluttered pages. They only serve one purpose, and the user can see what to expect before activating.
• But I need to say, for me these two things are irritating:
  • Seeing the currently selected wallpaper in the disabled state is irritating. Especially because it does not have any "hide" effect. You just see the wallpaper without grayish tone.
  • Maybe also seeing the mouse cursor could irritate a little bit.

I would still say that hiding is better than disabling on these clear pages.

[ChenYiLins]

Code quality: Partial change

Description

• The normal display of wallpaper, ImageSource can solve this problem.
• Add more fill patterns.
• Fixed EnumToStretchConverter, the original code didn't seem to work properly.

Supplement

The filling mode of Image control needs more research, and the goal is to be consistent with Windows Setting. Settings about padding may need to be matched with the backend. Things related to virtual desktop are a bit complicated now, which is a bit of a headache. Including the new API, more research is needed.

[ChenYiLins]

Some questions

• In Windows settings, when you have a virtual desktop, you can't set wallpaper for other monitors.
• ShowColorSettings should be available in PictureMode, but it depends on the choice of FillingWay.
• Should we add separate settings for the virtual desktop? Not radiobutton, it should be a settingscard in PictureMode.

[Spiritreader]

Should we add separate settings for the virtual desktop? Not radiobutton, it should be a settingscard in PictureMode.

No new features please. The UI redesign should focus on the UI user experience. Wallpaper support for virtual desktop is not easy to implement and requires a complete rewrite of all of the wallpaper logic including the configuration. We don't offer this at the moment in ADM.

Also, changing the solid color settings at the moment will switch the wallpaper type to solid colors completely.
As such, supporting the change of colors while having a picture mode active is also a new feature.

[ChenYiLins]

Hide Border when setting == Spotlight, or fill with Spotlight image?

Need help getting Spotlight image. The image is here:
C:\Users\User name\AppData\Roaming\Microsoft\Windows\Themes\TranscodedWallpaper

However, when switching to Spotlight mode, there is a certain delay in updating this file, otherwise it will still be an image of Photo mode.

[ChenYiLins]

In fact, the change of UI part has almost been completed, and the function update is waiting for the follow-up.