PowerToys/doc/devdocs/settingsv2/ui-architecture.md
Stefan Markovic 27c4b1be0e
[settings-ui] Settings WinUI3 (#17797)
* Add Settings.WinUI3 project

* New namespace

* Activation and Services

* Assets and Behaviors

* Converters and Helpers

* Controls

* View and ViewModels

* Styles and Themes

* OOBE

* Strings

* Small App moves

* [check] Project files - publish profiles and launchSettings.json

* [using:Microsoft.UI.Xaml.Automation]AutomationProperties.Name workaround

* [WIP] Workarounds to make it work

* Fix suppressed warnings - naming

* Add code analysis

* Fix KBMPage and App dispatcher
Fix MessageBox - replace with MessageDialog

* Fix ImageResizerPage & mark ColorPickerButton with TODO

* Add icon to windows
Cleanup MainWindow.xaml.cs and OobeWindow.xaml.cs
MainWindows and OobeWindow management

* App Icon
No framework and runtime subdirs

* Remove PowerToys.Settings and Settings.UI from solution
Update output paths

* Installer work & publish.cmd

* Fix dispatcher crashes

* Fix crashes

* Add all dlls to installer
Cleanup installer
Add OpenOOBE and OpenScoobe logic
Fix minor issues
Fix update scenario - REINSTALLMODE

* Rename back namespaces, project name and project dir

* [wip] move to winappsdk 1.1

* Fix propagating isElevated & installer runtimes dlls

* Remove obsolete dir/file

* PowerToys.Interop to netstandard2.0

* Move everything to .Net6

* [Settings] Always launch settings process non-elevated (#17791)

* Move back to WinAppSdk 1.0.1

* Add Settings.WinUI3 project

* New namespace

* Activation and Services

* Assets and Behaviors

* Converters and Helpers

* Controls

* View and ViewModels

* Styles and Themes

* OOBE

* Strings

* Small App moves

* [check] Project files - publish profiles and launchSettings.json

* [using:Microsoft.UI.Xaml.Automation]AutomationProperties.Name workaround

* [WIP] Workarounds to make it work

* Fix suppressed warnings - naming

* Add code analysis

* Fix KBMPage and App dispatcher
Fix MessageBox - replace with MessageDialog

* Fix ImageResizerPage & mark ColorPickerButton with TODO

* Add icon to windows
Cleanup MainWindow.xaml.cs and OobeWindow.xaml.cs
MainWindows and OobeWindow management

* App Icon
No framework and runtime subdirs

* Remove PowerToys.Settings and Settings.UI from solution
Update output paths

* Installer work & publish.cmd

* Fix dispatcher crashes

* Fix crashes

* Add all dlls to installer
Cleanup installer
Add OpenOOBE and OpenScoobe logic
Fix minor issues
Fix update scenario - REINSTALLMODE

* Rename back namespaces, project name and project dir

* [wip] move to winappsdk 1.1

* Fix propagating isElevated & installer runtimes dlls

* Remove obsolete dir/file

* PowerToys.Interop to netstandard2.0

* Move everything to .Net6

* [Settings] Always launch settings process non-elevated (#17791)

* Move back to WinAppSdk 1.0.1

* Revert merge conflict ARM64 removal

* Fix KBM Browse overlay image button

* Bring back settings publish profile

* Update release.yml

* Change target frameworkd windows version

* [Setup] Add Windows Application Runtime SDK (#17809)

* Update requirements doc

* Update compiling docs

* Fix signing

* Fix Settings exe and dll versions

* Add exception for dlls that have version 1.0.0.0

* Fix powershell condition

Co-authored-by: Andrey Nekrasov <yuyoyuppe@users.noreply.github.com>
2022-04-19 21:00:28 +01:00

8 lines
957 B
Markdown

# UI Architecture
The UI code is distributed between two projects: [`PowerToys.Settings`](/src/settings-ui/Settings.UI) and [`Settings.UI`](/src/settings-ui/Settings.UI.Library). [`PowerToys.Settings`](/src/settings-ui/Settings.UI) is a Windows App Sdk .net Unpackaged application. It contains the views for base navigation and modules. Parent display window and corresponding code is present in [`MainWindow.xaml.`](/src/settings-ui/Settings.UI/MainWindow.xaml). Fig 1 provides a description of the UI controls hierarchy and each of the controls have been summarized below :
- [`ShellPage.xaml`](/src/settings-ui/Settings.UI/Views/ShellPage.xaml) is a WinUI control, consisting of a side navigation panel with an icon for each module. Clicking on a module icon loads the corresponding `setting.json` file and displays the data in the UI.
![Settings UI architecture](/doc/images/settingsv2/ui-architecture.png)
**Fig 1: UI Architecture for settingsv2**