Merge pull request #19259 from unoplatform/mergify/bp/release/stable/…

…5.6/pr-19169

docs: Reviewing existing docs (backport #19169)

doc/articles/features/working-with-xaml-hot-reload.md

@@ -12,16 +12,16 @@ The Uno Platform **Hot Reload** feature provides a way to modify the XAML and C#
 
 ## Features
 
-- Supported in **Visual Studio 2022** (Windows), **VS Code** (Linux, macOS, Windows, CodeSpaces, and GitPod) and Rider (Linux, macOS, Windows)
+- Supported in **Visual Studio 2022** (Windows), **VS Code** (Linux, macOS, Windows, CodeSpaces, and GitPod) and **Rider** (Linux, macOS, Windows)
 - XAML and [C# Markup](xref:Uno.Extensions.Markup.Overview) Hot Reload for **iOS, Catalyst, Android, WebAssembly, and Skia (X11, Windows, macOS and FrameBuffer)**
 - All **[C# of Hot Reload](https://learn.microsoft.com/visualstudio/debugger/hot-reload)** in both Visual Studio and VS Code. See [supported code changes](https://learn.microsoft.com/visualstudio/debugger/supported-code-changes-csharp).
 - **Simulator and physical devices** support
-- Hot Reload **Indicator** visuals for an enhanced development experience on Uno Platform targets
+- **Hot Reload Indicator** visuals for an enhanced development experience on Uno Platform targets (not currently supported on WinAppSDK target)
 - What can be Hot Reloaded:
   - **XAML files** in the **main project** and **referenced projects libraries**
   - **C# Markup controls**
   - **Bindings**
-  - Full **x:Bind expressions**
+  - **x:Bind expressions**
   - **App.xaml** and **referenced resource dictionaries**
   - **DataTemplates**
   - **Styles**
@@ -297,7 +297,10 @@ Mobile targets are currently using a limited version of XAML Hot Reload and do n
 
 ## Hot Reload Indicator
 
-Hot Reload displays a visual indicator to help you further monitor changes while developing. It displays new information every time Hot Reload is triggered. The indicator is enabled by default within the `UseStudio()` method which is located in the root `App.xaml.cs` file. This displays an overlay which hosts the visual indicator. If you wish to disable it, you simply have to provide the following boolean: `EnableHotReload(disableIndicator: true)`, removing the overlay from the view.
+> [!NOTE]
+> The Hot Reload indicator is currently not supported for the WinAppSDK target
+
+Hot Reload displays a visual indicator to help you further monitor changes while developing. It displays new information every time Hot Reload is triggered. The indicator is enabled by default within the `UseStudio()` method which is located in the root `App.xaml.cs` file. This displays an overlay that hosts the visual indicator. If you wish to disable it, you simply have to provide the following boolean: `UseStudio(showHotReloadIndicator: false)`, removing the overlay from the view.
 
 <p align="center">
   <img src="~/articles/Assets/features/hotreload/indicator.png" alt="A hot reload visual indicator" />

doc/articles/studio/Hot Design/hot-design-getstarted-counter-tutorial.md

@@ -16,7 +16,15 @@ This tutorial will guide you through using Hot Design to create a simple counter
 </p>
 
 > [!NOTE]
-> This tutorial is based on the [XAML + MVUX variant](xref:Uno.Workshop.Counter.XAML.MVUX) of the Counter app tutorial. It demonstrates how to create a simple cross-platform app using Uno Platform. Explore other tutorial variants [here](xref:Uno.Workshop.Counter).
+> This tutorial is based on the [XAML + MVUX variant](xref:Uno.Workshop.Counter.XAML.MVUX) of the Counter app tutorial. It demonstrates how to create a simple cross-platform app using Uno Platform. If you prefer to use MVVM you can still complete this **Hot Design** tutorial by switching the MVUX code, with the MVVM code from the [XAML + MVVM variant](xref:Uno.Workshop.Counter.XAML.MVVM). Explore other tutorial variants [here](xref:Uno.Workshop.Counter).
+>
+> Additionally, as a general note, Hot Design can be used without selecting a specific architectural pattern, such as MVVM or MVUX, making it a versatile tool for various projects. For this particular tutorial, however, we will focus on using MVUX as an example.
+>
+> [!IMPORTANT]
+> **Hot Design™** is currently in beta. Sign up to the [wait list](https://platform.uno/waitlist/) to get early access and be the first to try it out!
+>
+> [!IMPORTANT]
+> Currently, **Hot Design** is not supported with C# Markup at this time and is only available with XAML.
 >
 > [!IMPORTANT]
 > At the current stage of the **Hot Design™** beta, **only the Desktop platform is supported**. Other platforms are undergoing stabilization for Hot Design support and will be available in future updates.
@@ -32,10 +40,10 @@ For existing applications, take this opportunity to update to the [latest **Uno.
 
 To start using **Hot Design**, ensure you are signed in with your Uno Platform account. Follow [these instructions](xref:Uno.GetStarted.Licensing) to register and sign in.
 
-Once you're using the **latest stable 5.5 Uno.Sdk version or higher**, you can access **Hot Design** by clicking the **flame** icon in the diagnostics overlay that appears over your app.
+Once you're using the **latest stable 5.5 Uno.Sdk version or higher**, you can access **Hot Design** by clicking the **flame** button in the diagnostics overlay that appears over your app.
 
 <p align="center">
-  <img src="Assets/enter-hot-design-mode.png" alt="Hot Design flame icon to enter in design mode" />
+  <img src="Assets/enter-hot-design-mode.png" alt="Hot Design flame button to enter in design mode" />
 </p>
 
 ## Creating the Counter Application
@@ -90,7 +98,7 @@ This will create a new folder called **Counter** containing the new application.
 
 ## Assets
 
-First, we need to add the image file to the application. Download this [SVG image](https://aka.platform.uno/counter-tutorial-svg-uno-logo) and add it to the **Assets** folder. Once added, rebuild the application to ensure the image is included in the application package.
+First, we need to add the image file to the application. Download this [SVG image](https://aka.platform.uno/counter-tutorial-svg-uno-logo) (Open this [link](https://aka.platform.uno/counter-tutorial-svg-uno-logo), right-click on the SVG image and select "Save as") and add it to the **Assets** folder. Once added, rebuild the application to ensure the image is included in the application package.
 
 > [!NOTE]
 > If you're working in Visual Studio, select the newly added **logo.svg** file in the **Solution Explorer**, open the **Properties** window, and ensure the **Build Action** property is set to **`UnoImage`**. For other IDEs, no further action is required as the template automatically sets the **Build Action** to **`UnoImage`** for all files in the **Assets** folder.  
@@ -122,13 +130,13 @@ If is not already previously done, to start using **Hot Design**, ensure you are
 
 ## Enter Hot Design Mode
 
-To start editing the UI, enter **Hot Design** by clicking the **flame** icon in the diagnostics overlay that appears over your app (default position is in the top-left corner of the application window).
+To start editing the UI, enter **Hot Design** by clicking the **flame** button in the diagnostics overlay that appears over your app (default position is in the top-left corner of the application window).
 
 > [!NOTE]
-> If you don't see the **Hot Design** flame icon, ensure that you are [signed in with your Uno Platform Account](xref:Uno.GetStarted.Licensing), enrolled in the current beta, and using the [latest stable 5.5 Uno.Sdk version or higher](https://www.nuget.org/packages/Uno.Sdk).
+> If you don't see the **Hot Design** flame button, ensure that you are [signed in with your Uno Platform Account](xref:Uno.GetStarted.Licensing), enrolled in the current beta, and using the [latest stable 5.5 Uno.Sdk version or higher](https://www.nuget.org/packages/Uno.Sdk).
 
 <p align="center">
-  <img src="Assets/enter-hot-design-mode.png" alt="Hot Design flame icon to enter design mode" />
+  <img src="Assets/enter-hot-design-mode.png" alt="Hot Design flame button to enter design mode" />
 </p>
 
 ## Change the Layout

doc/articles/studio/Hot Design/hot-design-getstarted-guide.md

@@ -12,6 +12,17 @@ Use this guide to set up Hot Design and start creating and refining user interfa
 
 ## Set Up Your Environment for Hot Design
 
+> [!IMPORTANT]
+> **Hot Design™** is currently in beta. Sign up to the [wait list](https://platform.uno/waitlist/) to get early access and be the first to try it out!
+>
+> [!IMPORTANT]
+> Currently, **Hot Design** is not supported with C# Markup at this time and is only available with XAML.
+>
+> [!IMPORTANT]
+> At the current stage of the **Hot Design™** beta, **only the Desktop platform is supported**. Other platforms are undergoing stabilization for Hot Design support and will be available in future updates.
+>
+> For now, you can use the **Desktop** platform to create your UI with the runtime visual designer. Once you’re satisfied with your design, you can test the app on other platforms by launching it as you would normally.
+>
 > [!IMPORTANT]
 > If you're new to developing with Uno Platform, make sure to set up your environment by [following our getting started guide](xref:Uno.GetStarted).
 
@@ -25,11 +36,6 @@ Once you're using the **latest stable 5.5 Uno.Sdk version or higher**, and provi
   <img src="Assets/enter-hot-design-mode.png" alt="Hot Design flame icon to enter in design mode" />
 </p>
 
-> [!IMPORTANT]
-> At the current stage of the **Hot Design™** beta, **only the Desktop platform is supported**. Other platforms are undergoing stabilization for Hot Design support and will be available in future updates.
->
-> For now, you can use the **Desktop** platform to create your UI with the runtime visual designer. Once you’re satisfied with your design, you can test the app on other platforms by launching it as you would normally.
-
 ## Hot Design Core Tool Windows
 
 Once in Hot Design, your running app becomes an interactive canvas.  
@@ -85,7 +91,7 @@ Located at the top of the interactive canvas, the **Toolbar** streamlines your d
 
 ### Selecting elements
 
-You can select controls on the app's current screen by simply clicking on them. A visual adorner will appear around the selected elements, clearly indicating their boundaries. The type, height, and width of the selected element are displayed below the adorner for easy reference.
+You can select controls on the app's current screen by simply clicking on them. A visual adorner (in this case, a blue border) will appear around the selected elements, clearly indicating their boundaries. The type, height, and width of the selected element are displayed below the adorner for easy reference.
 
 <p align="center">
   <img src="Assets/canvas-select-single-item.png" alt="Selecting a single item on the main canvas" />
@@ -129,18 +135,18 @@ The **Properties** window displays the current values of a control's properties,
 
     ![Background property with autosuggest](Assets/properties-view-autosuggest-property.png)
 
-For advanced options, clicking the **Advanced** button opens a flyout with three settings for each property: **Value**, **Binding**, or **Resource**.
-
-![Three options for property setting and reset button](Assets/properties-view-button-flyout.png)
-
-You can quickly identify the type of value set for a property by the icon displayed on the **Advanced** button. For example:
+To the right of the property value is the **Advanced** button, which provides information on how the current property value is defined. For example:
 
 - ![None](Assets/properties-view-advcd-button-none.png) indicates that nothing is set.
 - ![XAML](Assets/properties-view-advcd-button-xaml.png) indicates a **Literal**/**XAML** value is set.
 - ![Binding](Assets/properties-view-advcd-button-binding.png) indicates a **Binding** is set.
 - ![Resource](Assets/properties-view-advcd-button-resource.png) indicates a **Resource** is set.
 - ![Mixed Responsive](Assets/properties-view-advcd-button-mixed-responsive.png) indicates **Mixed Responsive** values is set using Responsive Extension.
 
+Clicking the **Advanced** button opens a flyout with three settings for each property: **Value**, **Binding**, or **Resource**.
+
+![Three options for property setting and reset button](Assets/properties-view-button-flyout.png)
+
 > [!TIP]
 > To quickly clear a property's value, click the **Reset** button. Cleared properties will behave as though they weren't specified in the original XAML file.
 

doc/articles/studio/Hot Design/hot-design-overview.md

@@ -4,23 +4,34 @@ uid: Uno.HotDesign.Overview
 
 # Hot Design™ Overview
 
-Welcome to the **Hot Design™** documentation! This guide provides everything you need to start using Hot Design, the next-generation runtime visual designer for cross-platform .NET applications.
+> [!IMPORTANT]
+> **Hot Design™** is currently in beta. Sign up to the [wait list](https://platform.uno/waitlist/) to get early access and be the first to try it out!
+>
+> [!IMPORTANT]
+> Currently, **Hot Design** is not supported with C# Markup at this time and is only available with XAML.
+>
+> [!IMPORTANT]
+> At the current stage of the **Hot Design™** beta, **only the Desktop platform is supported**. Other platforms are undergoing stabilization for Hot Design support and will be available in future updates.
+>
+> For now, you can use the **Desktop** platform to create your UI with the runtime visual designer. Once you’re satisfied with your design, you can test the app on other platforms by launching it as you would normally.
+
+Welcome to **Hot Design**, a next-generation runtime visual designer for cross-platform .NET applications!
 
 > [!Video https://www.youtube-nocookie.com/embed/fODrUH0zno0]
 
-## What is Hot Design™?
+## What is Hot Design?
 
-**Hot Design™** transforms your live, running app into a real-time visual designer that works with any IDE on any OS. It allows you to make UI changes on the fly without restarting your app or losing state, while seamlessly synchronizing your XAML code and visual designs.
+**Hot Design** transforms your live, running app into a real-time visual designer that works with any IDE on any OS. It allows you to make UI changes on the fly without restarting your app or losing state, while seamlessly synchronizing your XAML code and visual designs.
 
-In addition, [Hot Reload](xref:Uno.Features.HotReload) works seamlessly with Hot Design, allowing you to see UI changes instantly without rebuilding your app. This boosts productivity, reduces iteration time, and provides real-time feedback for both visual and functional tweaks in your UI. Hot Reload also includes a visual indicator to help you monitor changes as you develop, further enhancing your workflow.
+In addition, [Hot Reload](xref:Uno.Features.HotReload) works seamlessly with **Hot Design**, allowing you to see UI changes instantly without rebuilding your app. This boosts productivity, reduces iteration time, and provides real-time feedback for both visual and functional tweaks in your UI. Hot Reload also includes a visual indicator to help you monitor changes as you develop, further enhancing your workflow.
 
-**Hot Design™** is part of the **Uno Platform Studio**, a suite of tools designed to streamline your cross-platform app development and boost productivity.
+**Hot Design** is part of the **Uno Platform Studio**, a suite of tools designed to streamline your cross-platform app development and boost productivity.
 
 [➜ Learn more about Uno Platform Studio](xref:Uno.Platform.Studio.Overview)
 
 ### Key Features
 
-Hot Design empowers you to:
+**Hot Design** empowers you to:
 
 - **Achieve the Fastest Inner DevLoop**: With a single click, turn your running app into a visual Designer. Another click returns you to your app, keeping you in your workflow without disruption.
 - **Design in Real Time**: Modify your app’s UI instantly while it’s running, enabling fast, interactive development.
@@ -40,14 +51,14 @@ Hot Design empowers you to:
 
 **Hot Design™** brings together runtime UI design, live data integration, and cross-platform development to streamline your app-building process. It empowers you to work more efficiently, stay in the flow, and deliver polished, cross-platform apps with ease.
 
-By simplifying UI development and accelerating your workflow, Hot Design helps you stay productive and focus on creating great applications.
+By simplifying UI development and accelerating your workflow, **Hot Design** helps you stay productive and focus on creating great applications.
 
 **Let’s get started!**
 
-## What You’ll Find in This Documentation
+## Next Steps
 
-- **[Get Started Guide](xref:Uno.HotDesign.GetStarted.Guide)**  
-  Getting started with setting up Hot Design and exploring the key areas and features of the visual designer it offers.
+- **[Get Started Guide](xref:Uno.HotDesign.GetStarted.Guide)**
+  Getting started with setting up **Hot Design** and exploring the key areas and features of the visual designer it offers.
 
-- **[Counter App Tutorial](xref:Uno.HotDesign.GetStarted.CounterTutorial)**  
-  A hands-on walkthrough for building the [Counter App](xref:Uno.Workshop.Counter) using Hot Design, showcasing its features and workflow in action.
+- **[Counter App Tutorial](xref:Uno.HotDesign.GetStarted.CounterTutorial)**
+  A hands-on walkthrough for building the [Counter App](xref:Uno.Workshop.Counter) using **Hot Design**, showcasing its features and workflow in action.