Fluent UX: Settings

[crutkas]

PowerToys should do its best to look like a system level integration. The current settings screen is a close but needs to be refine a bit more. It looks close but little differences in both look and animations make it clearly not native.

Status

• - General Settings
• - Power Rename
• - Power Launcher
• - File Explorer Preview
• - Fancy Zones
• - Image Resizer
• - Shortcut Guide
• - Keyboard Remapper 

[niels9001]

Here's a mock-up using WinUI 3.0

Light theme:

It tries to mimic the default Windows OS settings as much as possible. Respects the selected theme (light/dark) and using the new WinUI 2.3 NumberBox.

Source code in this repo: https://github.com/niels9001/PowerToysUXWinUI3Alpha

[crutkas]

Some items will have to be adjusted here but yes, that is awesome!

[crutkas]

Here is my thought. We can do what a bunch of apps do. Have a “new look” toggle so we can start migrating new stuff over.

Use WinUI 3, wpf and a xaml island to just start working. @enricogior any reason why win32 would be a must or would wpf be good enough?

[crutkas]

• the new setting app would be a new app too so we don’t take a hit for the entire app to move to 19h1 min version.

[enricogior]

Use WinUI 3, wpf and a xaml island to just start working. @enricogior any reason why win32 would be a must or would wpf be good enough?

Do we still want the settings to be a standalone app? If not Win32 is a must.
If we keep it standalone we may have to redesign the way the app exchange data with the runner.
Some investigation is needed before giving a cost estimate.

[crutkas]

Why wouldn’t we want to keep it a stand-alone app? How would that work if it wasn’t?

[enricogior]

Why wouldn’t we want to keep it a stand-alone app?

The only reason why it was a standalone app, was because we didn't know how to run the WebView control in an elevated process. There weren't other reasons.

We may decide to keep it standalone, if that is beneficial, but since we haven't had that discussion yet, I asked.

Currently the runner creates two named pipes that are passed to a class called TwoWayPipeMessageIPC and used to communicate between the runner and the settings app.
When the settings app starts, it calls the runner to get the general settings and each module settings.
When the settings are changed and sent back to the runner, the runner processes the general settings and dispatches the modules settings to each module.

EDIT: need to investigate if the WPF app can leverage TwoWayPipeMessageIPC or if we have to write a C# version.

How would that work if it wasn’t?

The runner would open directly the Settings window and not have to use the two-way pipe channel to exchange data and control commands.

[crutkas]

• Couldn't the WPF app just consume a Win32 dll that has that implemented? That way the logic for that stays in a single DLL for both runner and settings.
• What would the settings app then be run out of? The Runner?

[enricogior]

Couldn't the WPF app just consume a Win32 dll that has that implemented?

Yes, but there is work to be done to make it callable from C#. We should factor the cost of the code implementation and of the testing for this work. Also test the performance impact of opening the settings as a standalone WPF app.

What would the settings app then be run out of? The Runner?

Yes, similarly to how is done now, it's the runner that starts the Settings app.

[crutkas]

Looking at @zeealeid's mock

This is functional XAML.

needs more padding on the left but i'm digging it.

[crutkas]

Code is from a basic Windows Template Studio generated app but here is the current XAML so it isn't lost

<winui:NavigationView
    x:Name="navigationView"
    IsBackButtonVisible="Collapsed"
    IsBackEnabled="{x:Bind IsBackEnabled, Mode=OneWay}"
    SelectedItem="{x:Bind Selected, Mode=OneWay}"
    ItemInvoked="OnItemInvoked"
    IsSettingsVisible="True"
    IsPaneToggleButtonVisible="False" 
    Background="{ThemeResource SystemControlBackgroundAltHighBrush}">

    <winui:NavigationView.PaneHeader>
        <TextBlock Margin="12, 24, 0, 6" Style="{StaticResource SubheaderTextBlockStyle}" FontWeight="Bold">PowerToys</TextBlock>
    </winui:NavigationView.PaneHeader>
    <winui:NavigationView.MenuItems>
        <!--
        TODO WTS: Change the symbols for each item as appropriate for your app
        More on Segoe UI Symbol icons: https://docs.microsoft.com/windows/uwp/style/segoe-ui-symbol-font
        Or to use an IconElement instead of a Symbol see https://github.com/Microsoft/WindowsTemplateStudio/blob/master/docs/projectTypes/navigationpane.md
        Edit String/en-US/Resources.resw: Add a menu item title for each page
        -->
        <winui:NavigationViewItem x:Uid="Shell_Main" Icon="Document" helpers:NavHelper.NavigateTo="views:MainPage" />
        <winui:NavigationViewItem x:Uid="Shell_Main" Icon="Document" helpers:NavHelper.NavigateTo="views:MainPage" />
        <winui:NavigationViewItem x:Uid="Shell_Main" Icon="Document" helpers:NavHelper.NavigateTo="views:MainPage" />
        <winui:NavigationViewItem x:Uid="Shell_Main" Icon="Document" helpers:NavHelper.NavigateTo="views:MainPage" />
    </winui:NavigationView.MenuItems>
    <i:Interaction.Behaviors>
        <behaviors:NavigationViewHeaderBehavior
            DefaultHeader="{x:Bind Selected.Content, Mode=OneWay}">
            <behaviors:NavigationViewHeaderBehavior.DefaultHeaderTemplate>
                <DataTemplate>
                    <Grid Margin="0,24,0, 6">
                        <TextBlock
                            Text="{Binding}"
                            Style="{ThemeResource TitleTextBlockStyle}"
                            FontWeight="Bold"
                            Margin="{StaticResource SmallLeftRightMargin}" />
                    </Grid>
                </DataTemplate>
            </behaviors:NavigationViewHeaderBehavior.DefaultHeaderTemplate>
        </behaviors:NavigationViewHeaderBehavior>
    </i:Interaction.Behaviors>
    <Grid>
        <Frame x:Name="shellFrame" />
    </Grid>
</winui:NavigationView>

[mdtauk]

Windows 10 X is altering the font styles used in it's settings app - so hopefully those changes come to Windows 10 and can be coordinated with the Powertoys UI

[crutkas]

Dependence: WinUI 3

[crutkas]

Moved status to the top

[niels9001]

@crutkas Do we have a list of contributors per module somewhere? We could start adding those I guess.

[crutkas]

I was planning to start adding those in Friday but the feature branch now is slightly busted after we merged KBM and setting v2.

[Poopooracoocoo]

@mdtauk hopefully they start using WinUI for the Windows shell. They've missed so many opportunities. Maybe they're waiting for WinUI 3.0.

[ghost]

Mildly unrelated, but i don't see an issue for Launcher Fluent UX - is this not on the cards for this release, or are we just not there yet?

[crutkas]

Mildly unrelated, but i don't see an issue for Launcher Fluent UX - is this not on the cards for this release, or are we just not there yet?

Being designed out of the box like that :)

[ghost]

Awesome! Can’t wait to use it! 

[enricogior]

The new Settings are now available in 0.18 https://github.com/microsoft/PowerToys/releases on Windows 10 version 1903 and higher.