](https://www.microsoft.com/en-us/p/radiograph/9nh1p86h06cg?activetab=pivot:overviewtab)
-## 🛠️ Custom controls
-
-| Control | Namespace | Description |
-| ----------------------- | ------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **UiWindow** | [Wpf.Ui.Controls](https://github.com/lepoco/wpfui/blob/main/src/Wpf.Ui/Controls/UiWindow.cs) | WPF window with additional features. |
-| **UiPage** | [Wpf.Ui.Controls](https://github.com/lepoco/wpfui/blob/main/src/Wpf.Ui/Controls/UiPage.cs) | WPF page with additional features. |
-| **Anchor** | [Wpf.Ui.Controls](https://github.com/lepoco/wpfui/blob/main/src/Wpf.Ui/Controls/Anchor.cs) | Creates a hyperlink to web pages, files or anything else a URL can address. |
-| **Arc** | [Wpf.Ui.Controls](https://github.com/lepoco/wpfui/blob/main/src/Wpf.Ui/Controls/Arc.cs) | Draws a symmetrical arc with rounded edges. |
-| **AutoSuggestBox** | [Wpf.Ui.Controls](https://github.com/lepoco/wpfui/blob/main/src/Wpf.Ui/Controls/AutoSuggestBox.cs) | Represents a text control that makes suggestions to users as they enter text using a keyboard. |
-| **Badge** | [Wpf.Ui.Controls](https://github.com/lepoco/wpfui/blob/main/src/Wpf.Ui/Controls/Badge.cs) | Used to highlight an item, attract attention or flag status. |
-| **Breadcrumb** | [Wpf.Ui.Controls](https://github.com/lepoco/wpfui/blob/main/src/Wpf.Ui/Controls/Breadcrumb.cs) | Automatic display of the page title from the navigation in the application. |
-| **Button** | [Wpf.Ui.Controls](https://github.com/lepoco/wpfui/blob/main/src/Wpf.Ui/Controls/Button.cs) | Custom button with additional parameters like an icon. |
-| **Card** | [Wpf.Ui.Controls](https://github.com/lepoco/wpfui/blob/main/src/Wpf.Ui/Controls/Card.cs) | Simple card compatible with the theme for displaying other elements. |
-| **CardAction** | [Wpf.Ui.Controls](https://github.com/lepoco/wpfui/blob/main/src/Wpf.Ui/Controls/CardAction.cs) | Inherited from the Button interactive card styled according to Fluent Design. |
-| **CardControl** | [Wpf.Ui.Controls](https://github.com/lepoco/wpfui/blob/main/src/Wpf.Ui/Controls/CardControl.cs) | Inherited from the Button control which displays an additional control on the right side of the card. |
-| **CardExpander** | [Wpf.Ui.Controls](https://github.com/lepoco/wpfui/blob/main/src/Wpf.Ui/Controls/CardExpander.cs) | Inherited from the ContentControl control which can hide the collapsable content. |
-| **CodeBlock** | [Wpf.Ui.Controls](https://github.com/lepoco/wpfui/blob/main/src/Wpf.Ui/Controls/CodeBlock.cs) | Formats syntax and display a fragment of the source code. |
-| **Dialog** | [Wpf.Ui.Controls](https://github.com/lepoco/wpfui/blob/main/src/Wpf.Ui/Controls/Dialog.cs) | Displays a large card with a slightly transparent background and two action buttons. |
-| **FontIcon** | [Wpf.Ui.Controls](https://github.com/lepoco/wpfui/blob/main/src/Wpf.Ui/Controls/FontIcon.cs) | Represents a text element containing an icon glyph with selectable font family. |
-| **Hyperlink** | [Wpf.Ui.Controls](https://github.com/lepoco/wpfui/blob/main/src/Wpf.Ui/Controls/Hyperlink.cs) | Button that opens a URL in a web browser. |
-| **SymbolIcon** | [Wpf.Ui.Controls](https://github.com/lepoco/wpfui/blob/main/src/Wpf.Ui/Controls/SymbolIcon.cs) | Represents a text element containing an icon glyph. |
-| **MessageBox** | [Wpf.Ui.Controls](https://github.com/lepoco/wpfui/blob/main/src/Wpf.Ui/Controls/MessageBox.cs) | Custom window to display notifications outside the application. |
-| **Navigation** | [Wpf.Ui.Controls](https://github.com/lepoco/wpfui/blob/main/src/Wpf.Ui/Controls/Navigation.cs) | Navigation styled as UWP apps. |
-| **NavigationHeader** | [Wpf.Ui.Controls](https://github.com/lepoco/wpfui/blob/main/src/Wpf.Ui/Controls/NavigationHeader.cs) | Header for the navigation. |
-| **NavigationSeparator** | [Wpf.Ui.Controls](https://github.com/lepoco/wpfui/blob/main/src/Wpf.Ui/Controls/NavigationSeparator.cs) | Separator for the navigation. |
-| **NavigationItem** | [Wpf.Ui.Controls](https://github.com/lepoco/wpfui/blob/main/src/Wpf.Ui/Controls/NavigationItem.cs) | Element of the navigation. |
-| **NavigationStore** | [Wpf.Ui.Controls](https://github.com/lepoco/wpfui/blob/main/src/Wpf.Ui/Controls/NavigationStore.cs) | Navigation styled as Windows 11 Store app |
-| **NavigationFluent** | [Wpf.Ui.Controls](https://github.com/lepoco/wpfui/blob/main/src/Wpf.Ui/Controls/NavigationFluent.cs) | Navigation styled as Windows 11 Settings app. |
-| **NavigationCompact** | [Wpf.Ui.Controls](https://github.com/lepoco/wpfui/blob/main/src/Wpf.Ui/Controls/NavigationCompact.cs) | Compact navigation styled as Windows 11 Task Manager app. |
-| **NotifyIcon** | [Wpf.Ui.Controls](https://github.com/lepoco/wpfui/blob/main/src/Wpf.Ui/Controls/NotifyIcon.cs) | Icon with menu in the tray. |
-| **NumberBox** | [Wpf.Ui.Controls](https://github.com/lepoco/wpfui/blob/main/src/Wpf.Ui/Controls/NumberBox.cs) | Text field for entering numbers with the possibility of setting a mask. |
-| **ProgressRing** | [Wpf.Ui.Controls](https://github.com/lepoco/wpfui/blob/main/src/Wpf.Ui/Controls/ProgressRing.cs) | Rotating loading ring like in Windows 11. |
-| **ThumbRate** | [Wpf.Ui.Controls](https://github.com/lepoco/wpfui/blob/main/src/Wpf.Ui/Controls/ThumbRate.cs) | Buttons to leave positive or negative ratings. |
-| **Rating** | [Wpf.Ui.Controls](https://github.com/lepoco/wpfui/blob/main/src/Wpf.Ui/Controls/Rating.cs) | Stars to display the rating. |
-| **Snackbar** | [Wpf.Ui.Controls](https://github.com/lepoco/wpfui/blob/main/src/Wpf.Ui/Controls/Snackbar.cs) | Animated card with a notification displayed at the bottom of the application. |
-| **ToggleSwitch** | [Wpf.Ui.Controls](https://github.com/lepoco/wpfui/blob/main/src/Wpf.Ui/Controls/ToggleSwitch.cs) | Use ToggleSwitch to present users with two mutally exclusive options (like on/off). |
-| **TextBox** | [Wpf.Ui.Controls](https://github.com/lepoco/wpfui/blob/main/src/Wpf.Ui/Controls/TextBox.cs) | Text field for with placeholders and icons. |
-| **TitleBar** | [Wpf.Ui.Controls](https://github.com/lepoco/wpfui/blob/main/src/Wpf.Ui/Controls/TitleBar.cs) | A set of buttons that can replace the default window navigation, giving it a new, modern look with implemented [NotifyIcon](https://github.com/lepoco/wpfui/blob/main/src/Wpf.Ui/Tray/NotifyIcon.cs). |
-
-## 🧩 Custom classes and tools
-
-| Class | Namespace | Description |
-| -------------- | -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |
-| **Theme** | [Wpf.Ui.Appearance](https://github.com/lepoco/wpfui/blob/main/src/Wpf.Ui/Appearance/Theme.cs) | Allows to manage available color themes from the library. |
-| **Background** | [Wpf.Ui.Appearance](https://github.com/lepoco/wpfui/blob/main/src/Wpf.Ui/Appearance/Background.cs) | Allows to add background effects like Mica or Acrylic. |
-| **Accent** | [Wpf.Ui.Appearance](https://github.com/lepoco/wpfui/blob/main/src/Wpf.Ui/Appearance/Accent.cs) | Allows to change the application color accents. |
-| **Watcher** | [Wpf.Ui.Appearance](https://github.com/lepoco/wpfui/blob/main/src/Wpf.Ui/Appearance/Watcher.cs) | Listens for changes in system parameters, then switches theme with **Appearance.Theme.Set**. |
-| **Progress** | [Wpf.Ui.Taskbar](https://github.com/lepoco/wpfui/blob/main/src/Wpf.Ui/Taskbar/Progress.cs) | Allows to change the status of the displayed notification in the application icon on the TaskBar. |
-| **NotifyIcon** | [Wpf.Ui.Tray](https://github.com/lepoco/wpfui/blob/main/src/Wpf.Ui/Tray/NotifyIcon.cs) | Allows to create an icon and a menu in the tray. |
-
## 📖 Documentation
-Documentation can be found at https://wpfui.lepo.co/. We also have a [tutorial](https://wpfui.lepo.co/documentation/tutorial) over there for newcomers.
+Documentation can be found at https://wpfui.lepo.co/. We also have a [tutorial](https://wpfui.lepo.co/tutorial/) over there for newcomers.
## 🚧 Development
@@ -132,42 +95,29 @@ First, your application needs to load custom styles, add in the **MyApp\App.xaml
```xml
+ 
+
+
+# WPF UI
+
+[Created with ❤ in Poland by lepo.co](https://dev.lepo.co/)
+A simple way to make your application written in WPF keep up with modern design trends. Library changes the base elements like `Page`, `ToggleButton` or `List`, and also includes additional controls like `Navigation`, `NumberBox`, `Dialog` or `Snackbar`.
+
+[](https://github.com/lepoco/wpfui/blob/master/LICENSE) [](https://www.nuget.org/packages/WPF-UI/) [](https://www.nuget.org/packages/WPF-UI/) [](https://marketplace.visualstudio.com/items?itemName=lepo.WPF-UI) [](https://github.com/lepoco/wpfui) [](https://github.com/sponsors/lepoco)
+
+
+
+### Deliver humanitarian aid directly to Ukraine.
+
+https://bank.gov.ua/en/about/humanitarian-aid-to-ukraine
+
+### Refugees in Poland
+
+Many forms of support for refugees from Ukraine and organizations supporting them are available on the Polish government website
+https://pomagamukrainie.gov.pl/chce-pomoc/prywatnie/pomoc-finansowa
+
+
+
+## 🚀 Getting started
+
+For a starter guide see our [documentation](https://wpfui.lepo.co/documentation/).
+
+**WPF UI** is delivered via **NuGet** package manager. You can find the package here:
+https://www.nuget.org/packages/wpf-ui/
+
+**Visual Studio**
+The plugin for **Visual Studio 2022** let you easily create new projects using **WPF UI**.
+https://marketplace.visualstudio.com/items?itemName=lepo.wpf-ui
+
+## 📁 What's included?
+
+| Name | Framework |
+| ----------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Wpf.Ui**
+Library that allows you to use all features in your own application | [](https://github.com/lepoco/wpfui/blob/main/src/Wpf.Ui/WPFUI.csproj) [](https://github.com/lepoco/wpfui/blob/main/src/Wpf.Ui/WPFUI.csproj)
[](https://github.com/lepoco/wpfui/blob/main/src/Wpf.Ui/WPFUI.csproj)
[](https://github.com/lepoco/wpfui/blob/main/src/Wpf.Ui/WPFUI.csproj)
[](https://github.com/lepoco/wpfui/blob/main/src/Wpf.Ui/WPFUI.csproj)
[](https://github.com/lepoco/wpfui/blob/main/src/Wpf.Ui/WPFUI.csproj) | +| **Wpf.Ui.Demo**
An MVVM application written in WPF .NET 6 where you can test the features. | [](https://github.com/lepoco/wpfui/blob/main/WPFUI.Demo/WPFUI.Demo.csproj) | +| **Wpf.Ui.SimpleDemo**
Simple .NET 6 application with navigation. | [](https://github.com/lepoco/wpfui/blob/main/WPFUI.Demo/WPFUI.Demo.csproj) | +| **Wpf.Ui.FontMapper**
Console app for generating Fluent System Icons enums. | [](https://github.com/lepoco/wpfui/blob/main/WPFUI.Demo/WPFUI.Demo.csproj) | +| **Wpf.Ui.Extension**
Project for Visual Studio 2022 extension. | [](https://github.com/lepoco/wpfui/blob/main/WPFUI.Demo/WPFUI.Demo.csproj) | + +## 🏭 Branches + +| Branch | Status | +| ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| [**WPF UI - Main**](https://github.com/lepoco/wpfui/tree/main) | [](https://github.com/lepoco/wpfui/actions/workflows/CI.yml) | +| [**WPF UI - Development**](https://github.com/lepoco/wpfui/tree/development) | [](https://github.com/lepoco/wpfui/actions/workflows/DV.yml) | + +## 📷 Screenshots + + + + + + + +## 🏗️ Works with Visual Studio Designer + + + +## 🏁 Virtualized panels for displaying thousands controls + + + +## ❤️ Custom Tray icon and menu in pure WPF + + + +## ⚓ Custom Windows 11 SnapLayout available for TitleBar. + + + +## 🚧 Development + +If you want to propose a new functionality or submit a bugfix, create a [Pull Request](https://github.com/lepoco/wpfui/compare/development...development) for the branch [development](https://github.com/lepoco/wpfui/tree/development). + +## 📐 How to use? + +First, your application needs to load custom styles, add in the **MyApp\App.xaml** file: + +```xml +
+
+
+
+
+
+ {{#_enableSearch}}
+ {{>partials/searchResults}}
+ {{/_enableSearch}}
+
+
+
+
+
+
+
+ {{>partials/scripts}}
+
+
diff --git a/docs/templates/singulinkfx/partials/footer.tmpl.partial b/docs/templates/singulinkfx/partials/footer.tmpl.partial
new file mode 100644
index 000000000..1b92deef2
--- /dev/null
+++ b/docs/templates/singulinkfx/partials/footer.tmpl.partial
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/docs/templates/singulinkfx/partials/head.tmpl.partial b/docs/templates/singulinkfx/partials/head.tmpl.partial
new file mode 100644
index 000000000..16408b12f
--- /dev/null
+++ b/docs/templates/singulinkfx/partials/head.tmpl.partial
@@ -0,0 +1,39 @@
+{{!Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE file in the project root for full license information.}}
+
+
+
+
+ 
+ {{_appName}}
+
\ No newline at end of file
diff --git a/docs/templates/singulinkfx/partials/namespace.tmpl.partial b/docs/templates/singulinkfx/partials/namespace.tmpl.partial
new file mode 100644
index 000000000..42d64e69b
--- /dev/null
+++ b/docs/templates/singulinkfx/partials/namespace.tmpl.partial
@@ -0,0 +1,13 @@
+{{!Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE file in the project root for full license information.}}
+
+{{>partials/title}}
+{{{summary}}}
+{{{conceptual}}}
+{{{remarks}}}
+{{#children}}
+ {{>partials/namespaceSubtitle}}
+ {{#children}} +
+
\ No newline at end of file
diff --git a/docs/templates/singulinkfx/partials/scripts.tmpl.partial b/docs/templates/singulinkfx/partials/scripts.tmpl.partial
new file mode 100644
index 000000000..90fb7d576
--- /dev/null
+++ b/docs/templates/singulinkfx/partials/scripts.tmpl.partial
@@ -0,0 +1,12 @@
+{{!Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE file in the project root for full license information.}}
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/templates/singulinkfx/partials/searchResults.tmpl.partial b/docs/templates/singulinkfx/partials/searchResults.tmpl.partial
new file mode 100644
index 000000000..9f08c90e3
--- /dev/null
+++ b/docs/templates/singulinkfx/partials/searchResults.tmpl.partial
@@ -0,0 +1,9 @@
+{{!Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE file in the project root for full license information.}}
+
+
\ No newline at end of file
diff --git a/docs/templates/singulinkfx/partials/toc.tmpl.partial b/docs/templates/singulinkfx/partials/toc.tmpl.partial
new file mode 100644
index 000000000..c660966b6
--- /dev/null
+++ b/docs/templates/singulinkfx/partials/toc.tmpl.partial
@@ -0,0 +1,5 @@
+{{!Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE file in the project root for full license information.}}
+
+
+ {{>partials/logo}}
+
+
+ {{#_enableSearch}}
+
+
+
+ {{/_enableSearch}}
+
+
+
+
+
diff --git a/docs/templates/singulinkfx/styles/down-arrow.svg b/docs/templates/singulinkfx/styles/down-arrow.svg
new file mode 100644
index 000000000..e086126a2
--- /dev/null
+++ b/docs/templates/singulinkfx/styles/down-arrow.svg
@@ -0,0 +1,44 @@
+
+
+
diff --git a/docs/templates/singulinkfx/styles/jquery.twbsPagination.js b/docs/templates/singulinkfx/styles/jquery.twbsPagination.js
new file mode 100644
index 000000000..332c01c62
--- /dev/null
+++ b/docs/templates/singulinkfx/styles/jquery.twbsPagination.js
@@ -0,0 +1,317 @@
+/*!
+ * jQuery pagination plugin v1.4.1
+ * http://esimakin.github.io/twbs-pagination/
+ *
+ * Copyright 2014-2016, Eugene Simakin
+ * Released under Apache 2.0 license
+ * http://apache.org/licenses/LICENSE-2.0.html
+ */
+(function ($, window, document, undefined) {
+
+ 'use strict';
+
+ var old = $.fn.twbsPagination;
+
+ // PROTOTYPE AND CONSTRUCTOR
+
+ var TwbsPagination = function (element, options) {
+ this.$element = $(element);
+ this.options = $.extend({}, $.fn.twbsPagination.defaults, options);
+
+ if (this.options.startPage < 1 || this.options.startPage > this.options.totalPages) {
+ throw new Error('Start page option is incorrect');
+ }
+
+ this.options.totalPages = parseInt(this.options.totalPages);
+ if (isNaN(this.options.totalPages)) {
+ throw new Error('Total pages option is not correct!');
+ }
+
+ this.options.visiblePages = parseInt(this.options.visiblePages);
+ if (isNaN(this.options.visiblePages)) {
+ throw new Error('Visible pages option is not correct!');
+ }
+
+ if (this.options.onPageClick instanceof Function) {
+ this.$element.first().on('page', this.options.onPageClick);
+ }
+
+ // hide if only one page exists
+ if (this.options.hideOnlyOnePage && this.options.totalPages == 1) {
+ this.$element.trigger('page', 1);
+ return this;
+ }
+
+ if (this.options.totalPages < this.options.visiblePages) {
+ this.options.visiblePages = this.options.totalPages;
+ }
+
+ if (this.options.href) {
+ this.options.startPage = this.getPageFromQueryString();
+ if (!this.options.startPage) {
+ this.options.startPage = 1;
+ }
+ }
+
+ var tagName = (typeof this.$element.prop === 'function') ?
+ this.$element.prop('tagName') : this.$element.attr('tagName');
+
+ if (tagName === 'UL') {
+ this.$listContainer = this.$element;
+ } else {
+ this.$listContainer = $('' +
+ ' ' +
+ language +
+ "" +
+ ' " +
+ "
"
+ );
+ $this.closest("pre").before($codeHeader);
+ $codeHeader.find("button").click(function () {
+ copyToClipboard($this.closest("pre").text());
+ var successAlert = $(this).find(".successful-copy-alert");
+ successAlert.removeClass("is-transparent");
+ setTimeout(function () {
+ successAlert.addClass("is-transparent");
+ }, 2000);
+ });
+ });
+});
diff --git a/docs/templates/singulinkfx/styles/singulink.js b/docs/templates/singulinkfx/styles/singulink.js
new file mode 100644
index 000000000..c2c0b4c45
--- /dev/null
+++ b/docs/templates/singulinkfx/styles/singulink.js
@@ -0,0 +1,38 @@
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+function toggleMenu() {
+
+ var sidebar = document.getElementById("sidebar");
+ var blackout = document.getElementById("blackout");
+
+ if (sidebar.style.left === "0px")
+ {
+ sidebar.style.left = "-" + sidebar.offsetWidth + "px";
+ blackout.classList.remove("showThat");
+ blackout.classList.add("hideThat");
+ }
+ else
+ {
+ sidebar.style.left = "0px";
+ blackout.classList.remove("hideThat");
+ blackout.classList.add("showThat");
+ }
+}
+
+$(function() {
+ $('table').each(function(a, tbl) {
+ var currentTableRows = $(tbl).find('tbody tr').length;
+ $(tbl).find('th').each(function(i) {
+ var remove = 0;
+ var currentTable = $(this).parents('table');
+
+ var tds = currentTable.find('tr td:nth-child(' + (i + 1) + ')');
+ tds.each(function(j) { if ($(this).text().trim() === '') remove++; });
+
+ if (remove == currentTableRows) {
+ $(this).hide();
+ tds.hide();
+ }
+ });
+ });
+});
\ No newline at end of file
diff --git a/docs/templates/singulinkfx/styles/url.min.js b/docs/templates/singulinkfx/styles/url.min.js
new file mode 100644
index 000000000..8057e0aa0
--- /dev/null
+++ b/docs/templates/singulinkfx/styles/url.min.js
@@ -0,0 +1 @@
+/*! url - v1.8.6 - 2013-11-22 */window.url=function(){function a(a){return!isNaN(parseFloat(a))&&isFinite(a)}return function(b,c){var d=c||window.location.toString();if(!b)return d;b=b.toString(),"//"===d.substring(0,2)?d="http:"+d:1===d.split("://").length&&(d="http://"+d),c=d.split("/");var e={auth:""},f=c[2].split("@");1===f.length?f=f[0].split(":"):(e.auth=f[0],f=f[1].split(":")),e.protocol=c[0],e.hostname=f[0],e.port=f[1]||("https"===e.protocol.split(":")[0].toLowerCase()?"443":"80"),e.pathname=(c.length>3?"/":"")+c.slice(3,c.length).join("/").split("?")[0].split("#")[0];var g=e.pathname;"/"===g.charAt(g.length-1)&&(g=g.substring(0,g.length-1));var h=e.hostname,i=h.split("."),j=g.split("/");if("hostname"===b)return h;if("domain"===b)return/^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$/.test(h)?h:i.slice(-2).join(".");if("sub"===b)return i.slice(0,i.length-2).join(".");if("port"===b)return e.port;if("protocol"===b)return e.protocol.split(":")[0];if("auth"===b)return e.auth;if("user"===b)return e.auth.split(":")[0];if("pass"===b)return e.auth.split(":")[1]||"";if("path"===b)return e.pathname;if("."===b.charAt(0)){if(b=b.substring(1),a(b))return b=parseInt(b,10),i[0>b?i.length+b:b-1]||""}else{if(a(b))return b=parseInt(b,10),j[0>b?j.length+b:b]||"";if("file"===b)return j.slice(-1)[0];if("filename"===b)return j.slice(-1)[0].split(".")[0];if("fileext"===b)return j.slice(-1)[0].split(".")[1]||"";if("?"===b.charAt(0)||"#"===b.charAt(0)){var k=d,l=null;if("?"===b.charAt(0)?k=(k.split("?")[1]||"").split("#")[0]:"#"===b.charAt(0)&&(k=k.split("#")[1]||""),!b.charAt(1))return k;b=b.substring(1),k=k.split("&");for(var m=0,n=k.length;n>m;m++)if(l=k[m].split("="),l[0]===b)return l[1]||"";return null}}return""}}(),"undefined"!=typeof jQuery&&jQuery.extend({url:function(a,b){return window.url(a,b)}});
\ No newline at end of file
diff --git a/docs/templates/singulinkfx/styles/wpfui.css b/docs/templates/singulinkfx/styles/wpfui.css
new file mode 100644
index 000000000..50ab100b1
--- /dev/null
+++ b/docs/templates/singulinkfx/styles/wpfui.css
@@ -0,0 +1,1324 @@
+/* Theme Configuration Options */
+
+:root {
+ /* General */
+
+ --base-font-size: 16px;
+ --smalldevice-base-font-size: 14px; /* Base font size for devices < 1024px */
+
+ --main-bg-color: #1f1f23;
+ --footer-bg-color: rgba(0, 0, 0, 0.4);
+ --separator-color: #42474f;
+
+ --table-strip-bg-color: #151515;
+ --table-header-bg-color: black;
+ --table-header-color: hsla(0, 0%, 100%, 0.8);
+ --table-header-border-color: #040405;
+
+ /* Text */
+
+ --appname-color: white;
+
+ --h1-color: white;
+ --h2-color: #f2f2f2;
+ --h3-color: #e3e3e3;
+ --h4-color: #ffffff;
+ --h5-color: #e0e0e0;
+
+ --text-color: #e1e1e1;
+ --link-color: #00b0f4;
+ --link-hover-color: #2ec4ff;
+
+ /* Mobile Topbar */
+
+ --topbar-bg-color: #18191c;
+
+ /* Button */
+
+ --button-color: #747f8d;
+
+ /* Sidebar */
+
+ --sidebar-width: 400px;
+ --sidebar-bg-color: #292b30;
+
+ --search-color: #bdbdbd;
+ --search-bg-color: #1b1e21;
+ --search-searchicon-color: #e3e3e3;
+ --search-border-color: black;
+
+ --sidebar-item-color: white;
+ --sidebar-active-item-color: #00b0f4;
+ --sidebar-level1-item-bg-color: #222429;
+ --sidebar-level1-item-hover-bg-color: #1d1f22;
+
+ --toc-filter-color: #bdbdbd;
+ --toc-filter-bg-color: #1b1e21;
+ --toc-filter-filtericon-color: #e3e3e3;
+ --toc-filter-clearicon-color: #e68585;
+ --toc-filter-border-color: black;
+
+ /* Scrollbars */
+
+ --scrollbar-bg-color: transparent;
+ --scrollbar-thumb-bg-color: rgba(0, 0, 0, 0.4);
+ --scrollbar-thumb-border-color: transparent;
+
+ /* Alerts and Blocks */
+
+ --alert-info-border-color: rgba(114, 137, 218, 0.5);
+ --alert-info-bg-color: rgba(114, 137, 218, 0.1);
+
+ --alert-warning-border-color: rgba(250, 166, 26, 0.5);
+ --alert-warning-bg-color: rgba(250, 166, 26, 0.1);
+
+ --alert-danger-border-color: rgba(240, 71, 71, 0.5);
+ --alert-danger-bg-color: rgba(240, 71, 71, 0.1);
+
+ --alert-tip-border-color: rgba(255, 255, 255, 0.5);
+ --alert-tip-bg-color: rgba(255, 255, 255, 0.1);
+
+ --blockquote-border-color: rgba(255, 255, 255, 0.5);
+ --blockquote-bg-color: rgba(255, 255, 255, 0.1);
+
+ --breadcrumb-bg-color: #2f3136;
+
+ /* Inline Code */
+
+ --ref-bg-color: black;
+ --ref-color: #89d4f1;
+
+ /* Code Blocks */
+
+ --code-bg-color: #151515;
+ --code-color: #d6deeb;
+ --code-keyword-color: #569cd6;
+ --code-comment-color: #57a64a;
+ --code-macro-color: #beb7ff;
+ --code-string-color: #d69d85;
+ --code-string-escape-color: #ffd68f;
+ --code-field-color: #c8c8c8;
+ --code-function-color: #dcdcaa;
+ --code-control-color: #d8a0df;
+ --code-class-color: #4ec9b0;
+ --code-number-color: #b5cea8;
+ --code-params-color: #9a9a9a;
+ --code-breakpoint-color: #8c2f2f;
+}
+
+/* Code Block Overrides */
+
+pre,
+legend {
+ --scrollbar-thumb-bg-color: #333;
+}
+
+/* Discord Style */
+
+::-webkit-scrollbar {
+ width: 10px;
+}
+
+::-webkit-scrollbar-track {
+ background: var(--scrollbar-bg-color);
+}
+
+::-webkit-scrollbar-thumb {
+ background: var(--scrollbar-thumb-bg-color);
+ border-color: var(--scrollbar-thumb-border-color);
+ border-radius: 5px;
+}
+
+::marker {
+ unicode-bidi: isolate;
+ font-variant-numeric: tabular-nums;
+ text-transform: none;
+ text-indent: 0px !important;
+ text-align: start !important;
+ text-align-last: start !important;
+}
+
+*,
+:after,
+:before {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+html,
+body {
+ padding: 0;
+ margin: 0;
+ font: 15px/150% "Roboto", sans-serif;
+ overflow: hidden;
+ color: var(--text-color);
+ background-color: var(--main-bg-color);
+
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+}
+
+img {
+ max-width: 100%;
+}
+
+ul > li,
+ol > li {
+ display: list-item;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+ color: var(--link-active-color);
+ position: relative;
+}
+
+h1,
+h2 {
+ margin-block-start: 2em;
+}
+
+h3 {
+ margin-block-start: 1em;
+ font-weight: 300;
+ font-size: 1.5em;
+ color: var(--h3-color);
+ margin-block-start: 3em;
+}
+
+h4 {
+ opacity: 1;
+ color: var(--h4-color);
+ font-size: large;
+ border-bottom: 2px solid var(--separator-color);
+ margin: 20px 0 0 0;
+}
+
+h5 {
+ margin-block-end: 0.8em;
+ margin-block-start: 1em;
+ font-size: 0.85em;
+ font-weight: 500;
+ color: var(--h5-color);
+}
+
+h6 {
+ font-size: 0.75em;
+ margin: 0;
+}
+
+p {
+ font-weight: 400;
+}
+
+ul {
+ position: relative;
+}
+
+ul,
+ol {
+ padding-inline-start: 3em;
+}
+
+ul.level1 {
+ list-style-type: none;
+ padding-inline-start: 0;
+}
+
+ul.level2,
+ul.level3 {
+ padding-inline-start: 1em;
+ list-style-type: none;
+ font-size: 0.9em;
+}
+
+a {
+ color: var(--link-color);
+ text-decoration: none;
+ transition: color 0.25s;
+}
+
+a:focus,
+a:hover {
+ color: var(--link-hover-color);
+ text-decoration: underline;
+}
+
+a.anchorjs-link:hover {
+ text-decoration: none;
+}
+
+a.active,
+a:active {
+ color: var(--link-active-color);
+}
+
+.body-content {
+ display: flex;
+ flex-direction: row;
+ height: 100%;
+ overflow-x: hidden;
+ overflow-y: hidden;
+}
+
+.page-title {
+ margin-block-start: 0;
+}
+
+nav {
+ width: 300px;
+ transition: left 0.5s ease-out;
+ position: fixed;
+ left: -350px;
+ top: 40px;
+ bottom: 0;
+ background-color: var(--sidebar-bg-color);
+ overflow-y: auto;
+
+ display: flex;
+ flex-direction: column;
+
+ z-index: 1000;
+}
+
+h1:first-child {
+ margin-block-start: 1.1em;
+ margin-top: 1.1em;
+}
+
+.sidebar {
+ padding: 32px 17px 32px 32px;
+ flex: 1;
+}
+
+.sidebar-item {
+ font-size: 1em;
+ font-weight: 400;
+ display: block;
+ padding: 4px 16px;
+ color: var(--sidebar-item-color);
+}
+
+.sidebar-item.large,
+#navbar .sidebar-item {
+ padding: 8px 16px;
+}
+
+a.sidebar-item:hover,
+a.sidebar-item:focus {
+ color: var(--link-active-color);
+ text-decoration: none;
+}
+
+a.sidebar-item.active {
+ color: var(--link-active-color);
+}
+
+ul.level1 > li > a.sidebar-item {
+ background-color: transparent;
+ border-radius: 4px;
+}
+
+#toc ul.level1 > li > a.sidebar-item.active {
+ background-color: var(--link-active-bg-color);
+}
+
+.sidebar-item-separator {
+ height: 2px;
+ width: 100%;
+ background-color: var(--separator-color);
+ margin: 2em 0;
+ opacity: 0.8;
+}
+
+span.sidebar-item {
+ font-weight: 700;
+ text-transform: uppercase;
+ font-size: 0.8em;
+ color: var(--text-color);
+ margin-block-start: 1.25em;
+}
+
+.main-panel {
+ background-color: var(--main-bg-color);
+ flex: 1;
+ overflow-y: auto;
+ padding: 20px 40px;
+}
+
+.top-navbar {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 0 40px;
+ height: 40px;
+ background-color: var(--topbar-bg-color);
+}
+
+.burger-icon {
+ margin-right: 1em;
+ color: var(--button-color);
+}
+
+.burger-icon:hover,
+.burger-icon:focus {
+ color: var(--link-active-color);
+}
+
+.burger-icon.active,
+.burger-icon:active {
+ color: var(--link-active-color);
+}
+
+.brand {
+ display: flex;
+ align-items: center;
+ justify-content: start;
+}
+
+.logomark {
+ height: 28px;
+}
+
+.brand-title {
+ padding: 0 0.5em;
+ font-size: 0.9em;
+ color: var(--link-active-color);
+}
+
+.footer {
+ background-color: var(--footer-bg-color);
+ padding: 20px;
+ margin: 0 20px 20px 20px;
+ border-radius: 8px;
+ color: var(--link-active-color);
+}
+
+.footer > h4 {
+ margin-block-start: 0;
+}
+
+.blackout {
+ display: block;
+ visibility: hidden;
+ position: absolute;
+ z-index: 100;
+ top: 40px;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background-color: var(--footer-bg-color);
+}
+
+@keyframes showThat {
+ 0% {
+ opacity: 0;
+ visibility: hidden;
+ }
+ 1% {
+ opacity: 0;
+ visibility: visible;
+ }
+ 100% {
+ opacity: 1;
+ visibility: visible;
+ }
+}
+
+@keyframes hideThat {
+ 0% {
+ opacity: 1;
+ visibility: visible;
+ }
+ 99% {
+ opacity: 0;
+ visibility: visible;
+ }
+ 100% {
+ opacity: 0;
+ visibility: hidden;
+ }
+}
+
+.showThat {
+ animation: showThat 0.5s forwards;
+}
+
+.hideThat {
+ animation: hideThat 0.5s forwards;
+}
+
+@media (min-width: 1024px) {
+ nav {
+ position: relative;
+ left: 0 !important;
+ top: 0;
+ bottom: 0;
+ }
+
+ .top-navbar {
+ display: none;
+ }
+
+ .blackout {
+ display: none;
+ }
+}
+
+/* Table */
+
+.table-responsive {
+ overflow-x: auto;
+ margin-bottom: 64px;
+}
+
+table {
+ background-color: var(--code-bg-color);
+ border-collapse: collapse;
+ width: 100%;
+ table-layout: auto;
+}
+
+table.table-striped tbody tr:nth-child(2n) {
+ background-color: var(--table-strip-bg-color);
+}
+
+table thead {
+ background: var(--table-header-bg-color);
+}
+
+table th {
+ color: var(--table-header-color);
+ text-transform: uppercase;
+ font-size: 12px;
+ line-height: 15px;
+ border-bottom: 1px solid var(--table-header-border-color);
+ padding: 8px;
+}
+
+.table-condensed th {
+ text-align: left;
+}
+
+table td {
+ padding: 8px;
+ font-weight: 300;
+}
+
+table td > p {
+ margin: 0;
+}
+
+/* Alerts */
+.alert {
+ border-radius: 4px;
+ padding: 8px;
+ margin: 25px 0;
+}
+
+.alert > h5 {
+ text-transform: uppercase;
+ margin: 0 0 5px 0;
+ letter-spacing: 1px;
+}
+
+.alert > p {
+ margin: 0;
+ font-weight: 300;
+ font-size: 13px;
+}
+
+.alert.alert-info {
+ border: 2px solid var(--alert-info-border-color);
+ background: var(--alert-info-bg-color);
+}
+
+.alert.alert-warning {
+ border: 2px solid var(--alert-warning-border-color);
+ background: var(--alert-warning-bg-color);
+}
+
+.alert.alert-danger {
+ border: 2px solid var(--alert-danger-border-color);
+ background: var(--alert-danger-bg-color);
+}
+
+.TIP.alert.alert-info {
+ border: 2px solid var(--alert-tip-border-color);
+ background: var(--alert-tip-bg-color);
+}
+
+blockquote {
+ margin: 8px 0;
+ border-left: 4px solid var(--blockquote-border-color);
+ padding: 8px;
+ background: var(--blockquote-bg-color);
+ border-radius: 4px;
+}
+
+blockquote > p {
+ margin: 0;
+ font-style: italic;
+ font-size: 13px;
+}
+
+/* Breadcrumb */
+
+#breadcrumb {
+ padding: 8px 16px;
+ background: var(--breadcrumb-bg-color);
+ border-radius: 4px;
+ margin-bottom: 30px;
+}
+
+#breadcrumb:empty {
+ display: none;
+}
+
+ul.breadcrumb {
+ display: flex;
+ flex-direction: row;
+ margin: 0;
+}
+
+ul.breadcrumb > li {
+ margin-right: 6px;
+}
+
+ul.breadcrumb > li::before {
+ content: "/";
+ margin-right: 5px;
+}
+
+ul.breadcrumb > li:first-child::before {
+ content: "";
+ margin: 0;
+}
+
+/* Code */
+
+legend,
+pre {
+ display: block;
+ background-color: var(--code-bg-color);
+ padding: 16px;
+ border-radius: 0 0 4px 4px;
+}
+
+code {
+ background-color: var(--code-bg-color);
+ padding: 2px 4px;
+ border-radius: 4px;
+}
+
+.hljs {
+ background: transparent;
+}
+
+/* DocFX related */
+
+.small {
+ font-size: 0.9em;
+}
+
+.pull-right {
+ float: right;
+}
+
+.hide {
+ display: none;
+}
+
+@media (max-width: 1023.98px) {
+ .mobile-hide {
+ display: none;
+ }
+}
+
+li {
+ display: block;
+ position: relative;
+}
+
+.expand-stub {
+ cursor: pointer;
+ position: absolute;
+ width: 20px;
+ height: 20px;
+ left: -10px;
+}
+
+ul.level1 > li > .expand-stub {
+ display: none;
+}
+
+.toc .nav > li > .expand-stub::before,
+.toc .nav > li.active > .expand-stub::before {
+ content: " ";
+ position: absolute;
+ transform: rotate(-90deg);
+ width: 10px;
+ height: 10px;
+ top: 5px;
+ left: 5px;
+ background-repeat: no-repeat;
+ background: url(down-arrow.svg);
+}
+
+.toc .nav > li.active > .expand-stub::before,
+.toc .nav > li.in > .expand-stub::before,
+.toc .nav > li.in.active > .expand-stub::before,
+.toc .nav > li.filtered > .expand-stub::before {
+ transform: none;
+}
+
+li > ul {
+ display: none;
+}
+
+li.in > ul {
+ display: block;
+}
+
+ul.level2 > li > a.sidebar-item,
+ul.level3 > li > a.sidebar-item {
+ font-weight: 500;
+ font-size: 0.95em;
+ padding: 0;
+ margin: 2px 16px;
+}
+
+ul.level2 > li > a.sidebar-item {
+ color: var(--sidebar-item-2nd-color);
+}
+
+ul.level3 > li > a.sidebar-item {
+ color: var(--sidebar-item-3rd-color);
+}
+
+ul.level2 > li > a.sidebar-item:hover,
+ul.level2 > li > a.sidebar-item:focus,
+ul.level3 > li > a.sidebar-item:hover,
+ul.level3 > li > a.sidebar-item:focus {
+ color: var(--link-active-color);
+ text-decoration: underline;
+}
+
+ul.level2 > li > a.sidebar-item.active,
+ul.level3 > li > a.sidebar-item.active {
+ color: var(--link-active-color);
+}
+
+.inheritance .level0:before,
+.inheritance .level1:before,
+.inheritance .level2:before,
+.inheritance .level3:before,
+.inheritance .level4:before,
+.inheritance .level5:before {
+ content: "↳";
+ margin-right: 5px;
+}
+
+.inheritance .level0 {
+ margin-left: 0em;
+}
+
+.inheritance .level1 {
+ margin-left: 1em;
+}
+
+.inheritance .level2 {
+ margin-left: 2em;
+}
+
+.inheritance .level3 {
+ margin-left: 3em;
+}
+
+.inheritance .level4 {
+ margin-left: 4em;
+}
+
+.inheritance .level5 {
+ margin-left: 5em;
+}
+
+body {
+ font-size: var(--base-font-size);
+}
+
+@media (max-width: 1024px) {
+ body {
+ font-size: var(--smalldevice-base-font-size);
+ }
+}
+
+/* Headings */
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+ line-height: initial;
+}
+
+h1,
+h1:first-child {
+ font-size: 2.25em;
+ letter-spacing: 0.5px;
+ color: var(--h1-color);
+ margin-block-start: 1em;
+ margin-block-end: -0.05em;
+}
+
+.article h1 {
+ margin-block-end: -0.2em;
+}
+
+h2 {
+ font-size: 2.1em;
+ color: var(--h2-color);
+}
+
+.article h2 {
+ margin-block-start: 1.3em;
+ padding-bottom: 6px;
+ border-bottom: 1px solid var(--separator-color);
+}
+
+h3 {
+ font-size: 1.95em;
+ font-weight: 500;
+ margin-block-start: 1.7em;
+}
+
+.article h3 {
+ font-size: 1.85em;
+ font-weight: 500;
+ margin-block-start: 1.2em;
+ margin-block-end: 0.9em;
+}
+
+h4 {
+ font-size: 1.8em;
+ font-weight: 400;
+ margin-block-start: 2em;
+ padding-bottom: 10px;
+}
+
+.article h4 {
+ font-size: 1.5em;
+ font-weight: 300;
+ margin-block-start: 1em;
+ margin-block-end: 1em;
+ padding-bottom: 0;
+ border-bottom: none;
+}
+
+h5 {
+ font-size: 1.1em;
+}
+
+.article h5 {
+ font-size: 1.13em;
+ font-weight: 400;
+ text-decoration: underline;
+ margin-block-start: 1.5em;
+ margin-block-end: 1em;
+}
+
+a.brand:hover {
+ text-decoration: none;
+}
+
+a.brand .brand-title {
+ font-size: 1.4em;
+ font-weight: 500;
+ letter-spacing: 0.5px;
+ color: var(--appname-color);
+ margin-top: 1px;
+ padding: 0 0 0 0.4em;
+}
+
+@media (min-width: 1024px) {
+ a.brand .brand-title {
+ font-size: 1.55em;
+ }
+}
+
+a.brand .logomark {
+ height: 35px;
+}
+
+/* Top bar */
+
+.top-navbar {
+ height: 60px;
+ padding: 0 0 0 10px;
+}
+
+.burger-icon {
+ margin-right: 10px;
+}
+
+/* Side Bar */
+
+.sidebar {
+ padding: 25px 17px 32px 17px;
+}
+
+.blackout {
+ top: 60px;
+}
+
+@media (max-width: 1023.98px) {
+ .navbar-nav {
+ margin-top: 0;
+ }
+}
+
+nav {
+ width: 94%;
+ max-width: var(--sidebar-width);
+ left: calc(var(--sidebar-width) * -1);
+}
+
+@media (max-width: 1023.98px) {
+ nav {
+ top: 60px;
+ }
+}
+
+nav ul {
+ list-style-type: none;
+}
+
+nav .nav a,
+nav .nav a:hover {
+ text-decoration: none;
+ cursor: pointer;
+ display: block;
+}
+
+nav a.sidebar-item {
+ padding: 4px 0 4px 10px;
+ cursor: pointer;
+}
+
+nav a:focus,
+nav a.sidebar-item:hover,
+nav a.sidebar-item:focus {
+ text-decoration: underline;
+}
+
+nav a,
+nav a:hover,
+nav a:focus {
+ color: var(--sidebar-item-color) !important;
+}
+
+nav a.active,
+nav a.active:hover,
+nav a.active:focus {
+ color: var(--sidebar-active-item-color) !important;
+}
+
+.sidebar-item-separator {
+ margin: 20px 0;
+}
+
+#toc ul li a {
+ padding: 0 0 0 10px;
+}
+
+.search {
+ background: var(--search-bg-color);
+ border: 1px solid var(--search-border-color);
+ border-radius: 5px;
+ position: relative;
+ margin-block-start: 25px;
+}
+
+@media (max-width: 1023.98px) {
+ .search {
+ margin-block-start: 0;
+ margin-block-end: 15px;
+ }
+}
+
+.search > input {
+ font-size: 0.95em;
+ color: var(--search-color);
+ border: 0;
+ background: none;
+ padding: 11px 30px 10px 37px;
+ width: 100%;
+}
+
+.search > input:focus {
+ outline: 0;
+}
+
+.search > .search-icon {
+ font-size: 1.2em;
+ color: var(--search-searchicon-color);
+ position: absolute;
+ top: 9px;
+ left: 9px;
+}
+
+.toc-filter {
+ background: var(--toc-filter-bg-color);
+ border: 1px solid var(--toc-filter-border-color);
+ border-radius: 5px;
+ position: relative;
+}
+
+.toc-filter > input {
+ font-size: 0.95em;
+ color: var(--toc-filter-color);
+ border: 0;
+ background: none;
+ padding: 11px 30px 10px 37px;
+ width: 100%;
+}
+
+.toc-filter > input:focus {
+ outline: 0;
+}
+
+.toc-filter > .filter-icon {
+ font-size: 1.2em;
+ color: var(--toc-filter-filtericon-color);
+ position: absolute;
+ top: 9px;
+ left: 9px;
+}
+
+.toc-filter > .clear-icon {
+ color: var(--toc-filter-clearicon-color);
+ position: absolute;
+ top: 9px;
+ right: 9px;
+ cursor: pointer;
+}
+
+.toc .nav > li > .expand-stub::before,
+.toc .nav > li.active > .expand-stub::before {
+ width: 8px;
+ height: 8px;
+ top: 6px;
+ left: 6px;
+}
+
+#toc ul.level2 {
+ margin-bottom: 20px;
+}
+
+#toc ul.level1 > li > a {
+ font-weight: 500;
+ margin-bottom: 10px;
+ padding: 5px 10px;
+}
+
+#toc ul.level1 > li > a,
+#toc ul.level1 > li > a.active {
+ background-color: var(--sidebar-level1-item-bg-color) !important;
+ border-radius: 2px;
+}
+
+#toc ul.level1 > li > a:hover,
+#toc ul.level1 > li > a.active:hover,
+#toc ul.level1 > li > a:focus,
+#toc ul.level1 > li > a.active:focus {
+ background-color: var(--sidebar-level1-item-hover-bg-color) !important;
+ text-decoration: none;
+}
+
+ul.level2 {
+ padding-inline-start: 0.7em;
+}
+
+ul.level2 .expand-stub {
+ top: 1px;
+}
+
+ul.level2 > li > a,
+ul.level2 > li > a.sidebar-item {
+ font-weight: 400;
+ color: var(--sidebar-item-color);
+ margin: 4px 0 4px;
+}
+
+ul.level3 {
+ padding-inline-start: 1em;
+}
+
+ul.level3 > li > a,
+ul.level3 > li > a.sidebar-item {
+ font-size: 1.05em;
+ color: var(--sidebar-item-color);
+ margin: 4px 0;
+}
+
+ul.level4 {
+ padding-inline-start: 0;
+ margin-bottom: 12px;
+}
+
+ul.level4 > li > a,
+ul.level4 > li > a.sidebar-item {
+ font-size: 1.05em;
+ color: var(--sidebar-item-color);
+ margin: 5px 0 5px 10px;
+}
+
+/* Breadcrumbs */
+
+.subnav.navbar {
+ margin: 0 -15px;
+}
+
+#breadcrumb {
+ overflow: scroll;
+ margin-bottom: 0;
+}
+
+#breadcrumb::-webkit-scrollbar {
+ display: none;
+}
+
+#breadcrumb a {
+ white-space: nowrap;
+}
+
+#breadcrumb wbr {
+ display: none;
+}
+
+/* Search Results */
+
+#search-results h1 {
+ margin-block-start: 0.5em;
+}
+
+#search-results .item-title {
+ font-size: 1.3em;
+ margin-top: 1.5em;
+}
+
+#search-results .item-href {
+ font-size: 0.85em;
+}
+
+#search-results .item-brief {
+ margin-top: 0.7em;
+}
+
+#search-results ul.pagination {
+ text-align: center;
+ padding: 10px 0 0 0;
+ margin-block-start: 40px;
+ border-top: 1px solid var(--separator-color);
+}
+
+#search-results ul.pagination > li {
+ display: inline-block;
+ margin: 0 10px;
+}
+
+#search-results ul.pagination > li.disabled a,
+#search-results ul.pagination > li.disabled a:hover {
+ color: var(--text-color);
+ cursor: txt;
+ text-decoration: none;
+}
+
+/* Content */
+
+.main-panel {
+ margin-bottom: 60px;
+ padding: 20px;
+}
+
+@media (min-width: 1024px) {
+ .main-panel {
+ margin-bottom: 0;
+ padding: 20px 40px;
+ }
+}
+
+.pull-right {
+ margin-top: 70px;
+ /* Fix unclickable links */
+ position: relative;
+ z-index: 1;
+}
+
+.divider {
+ margin-left: 4px;
+}
+
+article ul li,
+article ol li {
+ margin-bottom: 10px;
+}
+
+legend,
+pre {
+ padding: 6px;
+}
+
+.hljs {
+ color: var(--code-color);
+}
+
+.hljs::-webkit-scrollbar {
+ height: 6px;
+}
+
+.hljs-keyword,
+.hljs-title,
+.hljs-built_in {
+ font-style: normal;
+}
+
+p .xref,
+code {
+ background-color: var(--ref-bg-color);
+ color: var(--ref-color);
+ padding: 2px 3px;
+ font-family: monospace;
+ font-size: 0.95em;
+ border-radius: 6px;
+}
+
+span.parametername {
+ font-family: monospace;
+}
+
+.table {
+ width: auto;
+}
+
+.table-responsive {
+ margin-bottom: 0;
+}
+
+table th {
+ font-size: 14px;
+ padding: 9px 10px;
+}
+
+table td p {
+ font-weight: 300;
+}
+
+table td {
+ padding: 6px 10px;
+}
+
+.footer {
+ text-align: center;
+ color: var(--text-color);
+ padding: 8px;
+ font-size: 12px;
+ line-height: 13px;
+}
+
+.footer a:hover,
+.footer a:focus {
+ text-decoration: underline;
+}
+
+.copyright-footer {
+ font-size: 0.85em;
+ font-weight: bold;
+ text-align: left;
+ margin-block-start: 30px;
+}
+
+.code-header {
+ box-sizing: content-box;
+ background-color: #242424;
+ color: var(--code-color);
+ display: flex;
+ flex-direction: row;
+ border-radius: 4px 4px 0 0;
+ margin-top: 16px;
+ min-height: 30px;
+}
+
+.tabGroup section[role="tabpanel"] .code-header {
+ margin-left: -16px;
+ margin-right: -16px;
+}
+
+.tabGroup section[role="tabpanel"] .code-header:first-child {
+ margin-top: -16px;
+}
+
+.code-header > .language {
+ padding: 4px 16px;
+ flex-grow: 1;
+ text-transform: uppercase;
+ line-height: 26px;
+}
+
+.code-header > .action {
+ position: relative;
+ padding: 4px 16px;
+ border-radius: 0 4px 0 0;
+ background-color: transparent;
+ border: 0 solid #444444;
+ border-left-width: 1px;
+ color: var(--code-color);
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ line-height: normal;
+}
+
+.code-header .glyphicon {
+ margin-right: 0.25em;
+}
+
+.code-header > .action:hover {
+ background-color: #444444;
+}
+
+.code-header + pre {
+ margin-top: 0;
+}
+
+.code-header > .action .successful-copy-alert {
+ justify-content: center;
+ align-items: center;
+ border-radius: 0 4px 0 0;
+ right: 0;
+ left: 0;
+ bottom: 0;
+ top: 0;
+ position: absolute;
+ display: flex;
+ background-color: #128712;
+ outline-color: #fff;
+ color: #fff;
+}
+
+.code-header > .action .successful-copy-alert.is-transparent {
+ opacity: 0;
+ transition: 500ms opacity ease-in-out;
+}
+
+.content.wrap#_content {
+ max-width: 960px;
+}
diff --git a/docs/templates/singulinkfx/styles/wpfui.min.css b/docs/templates/singulinkfx/styles/wpfui.min.css
new file mode 100644
index 000000000..0c2fe8315
--- /dev/null
+++ b/docs/templates/singulinkfx/styles/wpfui.min.css
@@ -0,0 +1 @@
+#breadcrumb,#navbar .sidebar-item,.sidebar-item.large{padding:8px 16px}code,legend,pre,table{background-color:var(--code-bg-color)}h1,h2,h3,h4,h5,li,ul{position:relative}nav ul,ul.level1,ul.level2,ul.level3{list-style-type:none}.alert>h5,.code-header>.language,span.sidebar-item,table th{text-transform:uppercase}.blackout,body,html{right:0;left:0;bottom:0;position:absolute}:root{--base-font-size:16px;--smalldevice-base-font-size:14px;--main-bg-color:#1f1f23;--footer-bg-color:rgba(0, 0, 0, 0.4);--separator-color:#42474f;--table-strip-bg-color:#151515;--table-header-bg-color:black;--table-header-color:hsla(0, 0%, 100%, 0.8);--table-header-border-color:#040405;--appname-color:white;--h1-color:white;--h2-color:#f2f2f2;--h3-color:#e3e3e3;--h4-color:#ffffff;--h5-color:#e0e0e0;--text-color:#e1e1e1;--link-color:#00b0f4;--link-hover-color:#2ec4ff;--topbar-bg-color:#18191c;--button-color:#747f8d;--sidebar-width:400px;--sidebar-bg-color:#292b30;--search-color:#bdbdbd;--search-bg-color:#1b1e21;--search-searchicon-color:#e3e3e3;--search-border-color:black;--sidebar-item-color:white;--sidebar-active-item-color:#00b0f4;--sidebar-level1-item-bg-color:#222429;--sidebar-level1-item-hover-bg-color:#1d1f22;--toc-filter-color:#bdbdbd;--toc-filter-bg-color:#1b1e21;--toc-filter-filtericon-color:#e3e3e3;--toc-filter-clearicon-color:#e68585;--toc-filter-border-color:black;--scrollbar-bg-color:transparent;--scrollbar-thumb-bg-color:rgba(0, 0, 0, 0.4);--scrollbar-thumb-border-color:transparent;--alert-info-border-color:rgba(114, 137, 218, 0.5);--alert-info-bg-color:rgba(114, 137, 218, 0.1);--alert-warning-border-color:rgba(250, 166, 26, 0.5);--alert-warning-bg-color:rgba(250, 166, 26, 0.1);--alert-danger-border-color:rgba(240, 71, 71, 0.5);--alert-danger-bg-color:rgba(240, 71, 71, 0.1);--alert-tip-border-color:rgba(255, 255, 255, 0.5);--alert-tip-bg-color:rgba(255, 255, 255, 0.1);--blockquote-border-color:rgba(255, 255, 255, 0.5);--blockquote-bg-color:rgba(255, 255, 255, 0.1);--breadcrumb-bg-color:#2f3136;--ref-bg-color:black;--ref-color:#89d4f1;--code-bg-color:#151515;--code-color:#d6deeb;--code-keyword-color:#569cd6;--code-comment-color:#57a64a;--code-macro-color:#beb7ff;--code-string-color:#d69d85;--code-string-escape-color:#ffd68f;--code-field-color:#c8c8c8;--code-function-color:#dcdcaa;--code-control-color:#d8a0df;--code-class-color:#4ec9b0;--code-number-color:#b5cea8;--code-params-color:#9a9a9a;--code-breakpoint-color:#8c2f2f}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:var(--scrollbar-bg-color)}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb-bg-color);border-color:var(--scrollbar-thumb-border-color);border-radius:5px}::marker{unicode-bidi:isolate;font-variant-numeric:tabular-nums;text-transform:none;text-indent:0!important;text-align:start!important;text-align-last:start!important}*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}body,html{padding:0;margin:0;font:15px/150% Roboto,sans-serif;overflow:hidden;color:var(--text-color);background-color:var(--main-bg-color);top:0}code,p .xref,span.parametername{font-family:monospace}img{max-width:100%}ol>li,ul>li{display:list-item}h1,h2,h3,h4,h5{color:var(--link-active-color);line-height:initial}h1,h2{margin-block-start:2em}h5{margin-block-end:0.8em;margin-block-start:1em;font-weight:500;color:var(--h5-color)}h6,table td>p{margin:0}.sidebar-item,p{font-weight:400}h6{font-size:.75em}ol,ul{padding-inline-start:3em}ul.level1{padding-inline-start:0}ul.level2,ul.level3{padding-inline-start:1em;font-size:.9em}a{color:var(--link-color);text-decoration:none;transition:color .25s}a:focus,a:hover{color:var(--link-hover-color);text-decoration:underline}a.anchorjs-link:hover,a.brand:hover{text-decoration:none}.burger-icon.active,.burger-icon:active,.burger-icon:focus,.burger-icon:hover,a.active,a.sidebar-item.active,a:active,ul.level2>li>a.sidebar-item.active,ul.level3>li>a.sidebar-item.active{color:var(--link-active-color)}.body-content{display:flex;flex-direction:row;height:100%;overflow-x:hidden;overflow-y:hidden}.main-panel,nav{overflow-y:auto}.footer>h4,.page-title{margin-block-start:0}nav{transition:left .5s ease-out;position:fixed;left:-350px;top:40px;bottom:0;background-color:var(--sidebar-bg-color);display:flex;flex-direction:column;z-index:1000}h1:first-child{margin-block-start:1.1em;margin-top:1.1em}.sidebar{flex:1}.sidebar-item{font-size:1em;display:block;padding:4px 16px;color:var(--sidebar-item-color)}.brand-title,.small{font-size:.9em}a.sidebar-item:focus,a.sidebar-item:hover{color:var(--link-active-color);text-decoration:none}ul.level1>li>a.sidebar-item{background-color:transparent;border-radius:4px}#toc ul.level1>li>a.sidebar-item.active{background-color:var(--link-active-bg-color)}.sidebar-item-separator{height:2px;width:100%;background-color:var(--separator-color);opacity:.8}span.sidebar-item{font-weight:700;font-size:.8em;color:var(--text-color);margin-block-start:1.25em}.main-panel{background-color:var(--main-bg-color);flex:1}.top-navbar,ul.breadcrumb{display:flex;flex-direction:row}.top-navbar{align-items:center;background-color:var(--topbar-bg-color)}.blackout,.footer{background-color:var(--footer-bg-color)}.burger-icon{color:var(--button-color)}.brand-title,.footer{color:var(--link-active-color)}.brand{display:flex;align-items:center;justify-content:start}.logomark{height:28px}.brand-title{padding:0 .5em}.footer{margin:0 20px 20px;border-radius:8px}.blackout{display:block;visibility:hidden;z-index:100;top:60px}#breadcrumb wbr,#breadcrumb:empty,.hide,li>ul,ul.level1>li>.expand-stub{display:none}@keyframes showThat{0%{opacity:0;visibility:hidden}1%{opacity:0;visibility:visible}100%{opacity:1;visibility:visible}}@keyframes hideThat{0%{opacity:1;visibility:visible}99%{opacity:0;visibility:visible}100%{opacity:0;visibility:hidden}}.showThat{animation:.5s forwards showThat}.hideThat{animation:.5s forwards hideThat}table{border-collapse:collapse;width:100%;table-layout:auto}table.table-striped tbody tr:nth-child(2n){background-color:var(--table-strip-bg-color)}table thead{background:var(--table-header-bg-color)}.table-condensed th{text-align:left}table td{font-weight:300;padding:6px 10px}.alert{border-radius:4px;padding:8px;margin:25px 0}#toc ul li a,.top-navbar{padding:0 0 0 10px}.alert>h5{margin:0 0 5px;letter-spacing:1px}.alert>p{margin:0;font-weight:300;font-size:13px}.alert.alert-info{border:2px solid var(--alert-info-border-color);background:var(--alert-info-bg-color)}.alert.alert-warning{border:2px solid var(--alert-warning-border-color);background:var(--alert-warning-bg-color)}.alert.alert-danger{border:2px solid var(--alert-danger-border-color);background:var(--alert-danger-bg-color)}.TIP.alert.alert-info{border:2px solid var(--alert-tip-border-color);background:var(--alert-tip-bg-color)}blockquote{margin:8px 0;border-left:4px solid var(--blockquote-border-color);padding:8px;background:var(--blockquote-bg-color);border-radius:4px}blockquote>p{margin:0;font-style:italic;font-size:13px}#breadcrumb{background:var(--breadcrumb-bg-color);border-radius:4px;overflow:scroll;margin-bottom:0}legend,li,li.in>ul,pre{display:block}ul.breadcrumb{margin:0}h1,h1:first-child,h3{margin-block-start:1em}ul.breadcrumb>li{margin-right:6px}ul.breadcrumb>li::before{content:"/";margin-right:5px}ul.breadcrumb>li:first-child::before{content:"";margin:0}legend,pre{--scrollbar-thumb-bg-color:#333;border-radius:0 0 4px 4px;padding:6px}.hljs{background:0 0;color:var(--code-color)}.expand-stub{cursor:pointer;position:absolute;width:20px;height:20px;left:-10px}.toc .nav>li.active>.expand-stub::before,.toc .nav>li>.expand-stub::before{content:" ";position:absolute;transform:rotate(-90deg);background:url(down-arrow.svg);width:8px;height:8px;top:6px;left:6px}.toc .nav>li.active>.expand-stub::before,.toc .nav>li.filtered>.expand-stub::before,.toc .nav>li.in.active>.expand-stub::before,.toc .nav>li.in>.expand-stub::before{transform:none}ul.level2>li>a.sidebar-item,ul.level3>li>a.sidebar-item{font-weight:500;font-size:.95em;padding:0;margin:2px 16px}ul.level2>li>a.sidebar-item{color:var(--sidebar-item-2nd-color)}ul.level3>li>a.sidebar-item{color:var(--sidebar-item-3rd-color)}ul.level2>li>a.sidebar-item:focus,ul.level2>li>a.sidebar-item:hover,ul.level3>li>a.sidebar-item:focus,ul.level3>li>a.sidebar-item:hover{color:var(--link-active-color);text-decoration:underline}.inheritance .level0:before,.inheritance .level1:before,.inheritance .level2:before,.inheritance .level3:before,.inheritance .level4:before,.inheritance .level5:before{content:"↳";margin-right:5px}.inheritance .level0{margin-left:0}.inheritance .level1{margin-left:1em}.inheritance .level2{margin-left:2em}.inheritance .level3{margin-left:3em}.inheritance .level4{margin-left:4em}.inheritance .level5{margin-left:5em}body{font-size:var(--base-font-size)}@media (max-width:1024px){body{font-size:var(--smalldevice-base-font-size)}}h1,h1:first-child{font-size:2.25em;letter-spacing:.5px;color:var(--h1-color);margin-block-end:-0.05em}.article h1{margin-block-end:-0.2em}h2{font-size:2.1em;color:var(--h2-color)}.article h2{margin-block-start:1.3em;padding-bottom:6px;border-bottom:1px solid var(--separator-color)}h3{color:var(--h3-color);margin-block-start:3em;font-size:1.95em;font-weight:500;margin-block-start:1.7em}.article h3{font-size:1.85em;font-weight:500;margin-block-start:1.2em;margin-block-end:0.9em}.article h4,table td p{font-weight:300}h4{opacity:1;color:var(--h4-color);border-bottom:2px solid var(--separator-color);margin:20px 0 0;font-size:1.8em;font-weight:400;margin-block-start:2em;padding-bottom:10px}.article h4{font-size:1.5em;margin-block-start:1em;margin-block-end:1em;padding-bottom:0;border-bottom:none}.search>input,.toc-filter>input{background:0 0;padding:11px 30px 10px 37px;width:100%}h5{font-size:1.1em}.article h5{font-size:1.13em;font-weight:400;text-decoration:underline;margin-block-start:1.5em;margin-block-end:1em}a.brand .brand-title{font-size:1.4em;font-weight:500;letter-spacing:.5px;color:var(--appname-color);margin-top:1px;padding:0 0 0 .4em}@media (min-width:1024px){nav{position:relative;left:0!important;top:0;bottom:0}.blackout,.top-navbar{display:none}a.brand .brand-title{font-size:1.55em}}a.brand .logomark{height:35px}.top-navbar{height:60px}.burger-icon{margin-right:10px}.sidebar{padding:25px 17px 32px}nav{width:94%;max-width:var(--sidebar-width);left:calc(var(--sidebar-width) * -1)}nav .nav a,nav .nav a:hover{text-decoration:none;cursor:pointer;display:block}nav a.sidebar-item{padding:4px 0 4px 10px;cursor:pointer}.footer a:focus,.footer a:hover,nav a.sidebar-item:focus,nav a.sidebar-item:hover,nav a:focus{text-decoration:underline}nav a,nav a:focus,nav a:hover{color:var(--sidebar-item-color)!important}nav a.active,nav a.active:focus,nav a.active:hover{color:var(--sidebar-active-item-color)!important}.sidebar-item-separator{margin:20px 0}.search{background:var(--search-bg-color);border:1px solid var(--search-border-color);border-radius:5px;position:relative;margin-block-start:25px}@media (max-width:1023.98px){.mobile-hide{display:none}.navbar-nav{margin-top:0}nav{top:60px}.search{margin-block-start:0;margin-block-end:15px}}.search>input{font-size:.95em;color:var(--search-color);border:0}.search>input:focus,.toc-filter>input:focus{outline:0}.search>.search-icon{font-size:1.2em;color:var(--search-searchicon-color);position:absolute;top:9px;left:9px}.toc-filter{background:var(--toc-filter-bg-color);border:1px solid var(--toc-filter-border-color);border-radius:5px;position:relative}.toc-filter>input{font-size:.95em;color:var(--toc-filter-color);border:0}.toc-filter>.filter-icon{font-size:1.2em;color:var(--toc-filter-filtericon-color);position:absolute;top:9px;left:9px}.toc-filter>.clear-icon{color:var(--toc-filter-clearicon-color);position:absolute;top:9px;right:9px;cursor:pointer}#toc ul.level2{margin-bottom:20px}#toc ul.level1>li>a{font-weight:500;margin-bottom:10px;padding:5px 10px}#toc ul.level1>li>a,#toc ul.level1>li>a.active{background-color:var(--sidebar-level1-item-bg-color)!important;border-radius:2px}#toc ul.level1>li>a.active:focus,#toc ul.level1>li>a.active:hover,#toc ul.level1>li>a:focus,#toc ul.level1>li>a:hover{background-color:var(--sidebar-level1-item-hover-bg-color)!important;text-decoration:none}ul.level2{padding-inline-start:0.7em}ul.level2 .expand-stub{top:1px}ul.level2>li>a,ul.level2>li>a.sidebar-item{font-weight:400;color:var(--sidebar-item-color);margin:4px 0}ul.level3{padding-inline-start:1em}ul.level3>li>a,ul.level3>li>a.sidebar-item{font-size:1.05em;color:var(--sidebar-item-color);margin:4px 0}ul.level4{padding-inline-start:0;margin-bottom:12px}ul.level4>li>a,ul.level4>li>a.sidebar-item{font-size:1.05em;color:var(--sidebar-item-color);margin:5px 0 5px 10px}.subnav.navbar{margin:0 -15px}#breadcrumb::-webkit-scrollbar{display:none}#breadcrumb a{white-space:nowrap}#search-results h1{margin-block-start:0.5em}#search-results .item-title{font-size:1.3em;margin-top:1.5em}#search-results .item-href{font-size:.85em}#search-results .item-brief{margin-top:.7em}#search-results ul.pagination{text-align:center;padding:10px 0 0;margin-block-start:40px;border-top:1px solid var(--separator-color)}#search-results ul.pagination>li{display:inline-block;margin:0 10px}#search-results ul.pagination>li.disabled a,#search-results ul.pagination>li.disabled a:hover{color:var(--text-color);cursor:txt;text-decoration:none}.main-panel{margin-bottom:60px;padding:20px}@media (min-width:1024px){.main-panel{margin-bottom:0;padding:20px 40px}}.pull-right{float:right;margin-top:70px;position:relative;z-index:1}.divider{margin-left:4px}article ol li,article ul li{margin-bottom:10px}.hljs::-webkit-scrollbar{height:6px}.hljs-built_in,.hljs-keyword,.hljs-title{font-style:normal}code,p .xref{background-color:var(--ref-bg-color);color:var(--ref-color);padding:2px 3px;font-size:.95em;border-radius:6px}.table{width:auto}.table-responsive{overflow-x:auto;margin-bottom:0}table th{color:var(--table-header-color);line-height:15px;border-bottom:1px solid var(--table-header-border-color);font-size:14px;padding:9px 10px}.footer{text-align:center;color:var(--text-color);padding:8px;font-size:12px;line-height:13px}.code-header,.code-header>.action{color:var(--code-color);display:flex}.copyright-footer{font-size:.85em;font-weight:700;text-align:left;margin-block-start:30px}.code-header{box-sizing:content-box;background-color:#242424;flex-direction:row;border-radius:4px 4px 0 0;margin-top:16px;min-height:30px}.tabGroup section[role=tabpanel] .code-header{margin-left:-16px;margin-right:-16px}.tabGroup section[role=tabpanel] .code-header:first-child{margin-top:-16px}.code-header>.language{padding:4px 16px;flex-grow:1;line-height:26px}.code-header>.action{position:relative;padding:4px 16px;border-radius:0 4px 0 0;background-color:transparent;border:0 solid #444;border-left-width:1px;cursor:pointer;align-items:center;line-height:normal}.code-header .glyphicon{margin-right:.25em}.code-header>.action:hover{background-color:#444}.code-header+pre{margin-top:0}.code-header>.action .successful-copy-alert{justify-content:center;align-items:center;border-radius:0 4px 0 0;right:0;left:0;bottom:0;top:0;position:absolute;display:flex;background-color:#128712;outline-color:#fff;color:#fff}.code-header>.action .successful-copy-alert.is-transparent{opacity:0;transition:opacity .5s ease-in-out}.content.wrap#_content{max-width:960px}
\ No newline at end of file
diff --git a/docs/templates/singulinkfx/toc.html.tmpl b/docs/templates/singulinkfx/toc.html.tmpl
new file mode 100644
index 000000000..6549e62e7
--- /dev/null
+++ b/docs/templates/singulinkfx/toc.html.tmpl
@@ -0,0 +1,22 @@
+{{!Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE file in the project root for full license information.}}
+
+
+
\ No newline at end of file
diff --git a/docs/toc.yml b/docs/toc.yml
new file mode 100644
index 000000000..458707d9c
--- /dev/null
+++ b/docs/toc.yml
@@ -0,0 +1,8 @@
+- name: Home
+ href: /
+- name: Tutorial
+ href: tutorial/
+ homepage: tutorial/index.md
+- name: Documentation
+ href: documentation/
+ homepage: documentation/index.md
diff --git a/docs/tutorial/extension.md b/docs/tutorial/extension.md
new file mode 100644
index 000000000..7772b9adc
--- /dev/null
+++ b/docs/tutorial/extension.md
@@ -0,0 +1,40 @@
+# Visual Studio 2022 Extension for WPF UI
+
+Visual Studio allows you to add extensions that can be installed in several ways:
+
+- Build them locally and then install the `.vsix` package.
+- Download the extension from the internet and install the `.vsix` file.
+- Install the extension using the search in _Visual Studio_.
+
+In this tutorial, we'll cover the last way, if you want to know more, check out [**Manage extensions for Visual Studio**](https://learn.microsoft.com/en-us/visualstudio/ide/finding-and-using-visual-studio-extensions?view=vs-2022).
+
+In any case, if you want to download a plugin and install it manually, or leave your review, you can find it in the Visual Studio Marketplace:
+https://marketplace.visualstudio.com/items?itemName=lepo.wpf-ui
+
+> [!NOTE]
+> The source code for **WPF UI** _Visual Studio 2022_ extension is public and you can [check it out here](https://github.com/lepoco/wpfui/tree/development/src/Wpf.Ui.Extension/Wpf.Ui.Extension).
+
+## How to?
+
+1. Install Visual Studio 2022 from [Visual Studio 2022 downloads](https://visualstudio.microsoft.com/downloads/).
+2. After installation, open Visual Studio
+3. Expand the _Extensions_ tab in the menu and then click _Manage Extensions_
+ 
+4. In the _Online_ tab, use the search engine to enter _WPF-UI_ in it, then click _Download_
+ 
+5. After downloading, restart _Visual Studio_
+6. After restarting, you will see a window asking you to confirm the installation.
+ 
+7. Once installed, you can restart _Visual Studio_ and click _Create new project_
+ 
+8. In the top right corner, you can select the **WPF UI** project type
+ 
+9. In the top right corner, you can select the project type **WPF UI**
+
+## Done!
+
+After creating a project, you can familiarize yourself with its structure and proceed to further steps.
+
+- [WPF UI - Getting started](/tutorial/getting-started.html)
+- [Introduction to the MVVM Toolkit](https://learn.microsoft.com/en-us/windows/communitytoolkit/mvvm/introduction)
+- [.NET Generic Host in ASP.NET Core](https://learn.microsoft.com/en-us/aspnet/core/fundamentals/host/generic-host?view=aspnetcore-6.0)
diff --git a/docs/tutorial/getting-started.md b/docs/tutorial/getting-started.md
new file mode 100644
index 000000000..c22b1cc85
--- /dev/null
+++ b/docs/tutorial/getting-started.md
@@ -0,0 +1,80 @@
+# Getting started
+
+## Adding dictionaries
+
+[XAML](https://docs.microsoft.com/en-us/dotnet/desktop/wpf/xaml/?view=netdesktop-6.0), and hence WPF, operate on resource dictionaries. These are HTML-like files that describe the appearance and various aspects of the [controls](https://wpfui.lepo.co/documentation/controls).
+**WPF UI** adds its own sets of these files to tell the application how the controls should look like.
+
+There should be a file called `App.xaml` in your new application. Add new dictionaries to it using **WPF UI** `ControlsDictionary` and `ThemesDictionary` classes:
+
+```xml
+
+ {{^_disableSideFilter}}
+
+
+
+
+ {{/_disableSideFilter}}
+
+
+
+ {{^leaf}}
+ {{>partials/li}}
+ {{/leaf}}
+
+