Merge pull request #19014 from unoplatform/dev/agzi/AddUnoPlatformStu…

…dioDoc

docs: Add Uno Platform Studio Documentation

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

@@ -4,7 +4,11 @@ uid: Uno.Features.HotReload
 
 # Hot Reload
 
-The Uno Platform Hot Reload feature provides a way to modify the XAML and C# of your running application, in order to iterate faster on UI or code changes. This makes the inner developer loop faster.
+The Uno Platform **Hot Reload** feature provides a way to modify the XAML and C# of your running application, in order to iterate faster on UI or code changes. This makes the inner developer loop faster.
+
+**Hot Reload** 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)
 
 ## Features
 
@@ -296,7 +300,7 @@ Mobile targets are currently using a limited version of XAML Hot Reload and do n
 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.
 
 <p align="center">
-  <img src="../Assets/features/hotreload/indicator.png" alt="A hot reload visual indicator" />
+  <img src="~/articles/Assets/features/hotreload/indicator.png" alt="A hot reload visual indicator" />
 </p>
 
 > [!TIP]
@@ -305,7 +309,7 @@ Hot Reload displays a visual indicator to help you further monitor changes while
 The indicator displays the current connection status. Clicking on it will open a flyout containing all events or changes that were applied by Hot Reload. These events display more details about Hot Reload changes, such as its status and impacted files.
 
 <p align="center">
-  <img src="../Assets/features/hotreload/indicator-flyout.png" alt="A window showing events from Hot Reload" />
+  <img src="~/articles/Assets/features/hotreload/indicator-flyout.png" alt="A window showing events from Hot Reload" />
 </p>
 
 ### Statuses

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

@@ -0,0 +1,186 @@
+---
+uid: Uno.HotDesign.GetStarted.Guide
+---
+
+# Getting Started with Hot Design™
+
+Hot Design™ is the next-generation runtime Visual Designer for cross-platform .NET applications, transforming your live, running app into a real-time Designer.
+
+This guide provides the steps to set up Hot Design and introduces its key features and visual design capabilities.
+
+Use this guide to set up Hot Design and start creating and refining user interfaces efficiently and intuitively.
+
+## Set Up Your Environment for Hot Design
+
+> [!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).
+
+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.
+
+For existing applications, take this opportunity to update to the [latest **Uno.Sdk** version](https://www.nuget.org/packages/Uno.Sdk). Refer to our [migration guide](xref:Uno.Development.MigratingFromPreviousReleases) for upgrade steps.  
+
+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.
+
+<p align="center">
+  <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.  
+Hot Design offers an intuitive interface for designing and interacting with your app. This enables you to seamlessly create, edit, and refine your app's user interface in real-time, streamlining the design process for maximum efficiency and simplicity.
+
+![Hot Design Core Tool Windows Highlighted](Assets/hot-design-views-highlighted.png)
+
+Here are the tool windows available on the interactive canvas:
+
+### Toolbox
+
+Located on the upper-left side, the **Toolbox** window provides a categorized list of available controls you can use in your application, including available custom and third-party UI controls. It features a search bar for quickly finding specific controls, which you can drag and drop directly onto the canvas or the **Elements** window for easy integration into your design.
+
+### Elements
+
+Below the **Toolbox**, the **Elements** window displays the hierarchical structure of your app. It represents the visual tree of your app, allowing you to select and organize elements. Clicking on an element in this window highlights it on the canvas for detailed modifications.
+
+### Canvas
+
+The main **Canvas** in the center of the interface represents your running app. It is an interactive area where you can visually design and interact with the user interface. You can select controls, see their outlines, and preview any changes made to the layout or properties.
+
+### Properties
+
+The **Properties** window, located on the right side of the interactive canvas, displays the attributes of the currently selected element on the canvas. By default, it highlights **Smart** properties, prioritizing the most commonly adjusted settings for the element. If you need access to all available properties, you can switch to the **All** view.
+
+This window also allows you to search for specific properties and make adjustments directly, such as modifying styles, layouts, appearances, data bindings, resources, responsiveness, and interactions, to customize your UI elements effectively.
+
+### Toolbar
+
+<p align="center">
+  <img src="Assets/studio-toolbar.png" alt="Hot Design Toolbar" />
+</p>
+
+Located at the top of the interactive canvas, the **Toolbar** streamlines your design workflow by providing quick access to essential actions and tools, such as:
+
+- <img src="Assets/toolbar-hot-design-enter-icon.png" alt="Enter Hot Design Toolbar flame icon" height=30  />  Entering **Hot Design** mode.
+
+- <img src="Assets/toolbar-hot-design-icon.png" alt="Leave Hot Design Toolbar flame icon" height=30  />  Leaving **Hot Design** mode.
+
+- <img src="Assets/toolbar-play.png" alt="Hot Design Toolbar play icon" height=30  /><img src="Assets/toolbar-pause.png" alt="Hot Design Toolbar pause icon" height=30  />  Playing with the live running app to test functionality and pausing to return to adjusting properties, layout, and other design aspects without leaving the interactive designer.
+
+- <img src="Assets/toolbar-undo.png" alt="Hot Design Toolbar undo icon" height=30  /><img src="Assets/toolbar-redo.png" alt="Hot Design Toolbar redo icon" height=30  />   Undoing and redoing changes.
+
+- <img src="Assets/toolbar-form-factor.png" alt="Hot Design Toolbar form factor icon" height=30  />  Changing the form factor of the app to test different screen sizes.
+
+- <img src="Assets/toolbar-light-theme.png" alt="Hot Design Toolbar light theme icon" height=30  /><img src="Assets/toolbar-dark-theme.png" alt="Hot Design Toolbar dark theme icon" height=30  />   Switching between light and dark themes.
+
+- <img src="Assets/toolbar-connection-status.png" alt="Hot Design Toolbar connection status icon" height=30  />  Viewing the connection status and the latest updates from **Hot Reload**.
+
+- <img src="Assets/toolbar-more-options.png" alt="Hot Design Toolbar more options icon" height=30  />  More options, including showing or hiding the various tool windows, providing flexibility in customizing your design workspace.
+
+## Using Hot Design
+
+### 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.
+
+<p align="center">
+  <img src="Assets/canvas-select-single-item.png" alt="Selecting a single item on the main canvas" />
+</p>
+
+You can also click on controls in the **Elements** window. This provides an alternative to clicking directly on the canvas, making it easier to precisely select small elements or to choose the container of a visual element rather than the element itself.
+
+To select multiple elements, hold down the `Ctrl` key while clicking. This enables you to view and edit shared properties in the **Properties** window.
+
+<p align="center">
+  <img src="Assets/canvas-select-multiple-items.png" alt="Selecting multiple items on the main canvas" />
+</p>
+
+### Placing and Deleting Elements
+
+You can add controls to your app by dragging them from the **Toolbox** onto the canvas.
+
+Alternatively, you can drag them directly into the **Elements** window to position them within a specific hierarchical level.
+
+![Dragging item from Toolbox into the Elements window](Assets/gifs/toolbox-drag.gif)
+
+To delete a control, right-click on it either in the canvas or the **Elements** window and select the delete option.
+
+<p align="center">
+  <img src="Assets/delete-elements.png" alt="Delete an element from the Element window" />
+</p>
+
+### Setting Properties
+
+The **Properties** window displays the current values of a control's properties, which can be modified in various ways. Examples include:
+
+- **Changing a property value**, such as the **Text** property of a `TextBlock` control:
+
+    ![Text property of a TextBlock control](Assets/properties-view-text-property.png)
+
+- **Adjusting the alignment** of a control:
+
+    ![Control alignment example](Assets/properties-view-alignment-property.png)
+
+- **Using the autosuggest box** to set a property, such as the **Background** property of a control:
+
+    ![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:
+
+- ![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.
+
+> [!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.
+
+If a property is not set, it will appear similar to this:
+
+![Unset property](Assets/properties-view-text-empty.png)
+
+### Changing the Form Factor
+
+The **Toolbar** provides the ability to change the form factor of your app within Hot Design. This feature is represented in the Toolbar by the following icon:
+
+<p align="center">
+<img src="Assets/toolbar-form-factor.png" alt="Hot Design Toolbar form factor icon" height=50 />
+</p>
+
+The height and width of your running app will dynamically adjust to match the selected form factor. You can also specify a custom height and width for precise testing.
+
+<p align="center">
+<img src="Assets/form-factor-and-zoom-flyout.png" alt="Form factor and zoom level flyout" />
+</p>
+
+At the bottom of the flyout, you can view and adjust the current zoom level. Modifying this setting will dynamically scale Hot Design's view of your app, making it easier to fine-tune your design.
+
+### Toggling Theme
+
+The **Toolbar** includes a feature to toggle between your app's light and dark themes. This also updates the Hot Design layout to match the selected theme. Use this feature to validate your app's theme-sensitive styles and ensure proper responsiveness to theme changes.
+
+<p align="center">
+<img src="Assets/hot-design-light-theme.png" alt="Example Hot Design with Light Theme" height=300 /><img src="Assets/hot-design-dark-theme.png" alt="Example Hot Design with Dark Theme" height=300  />
+</p>
+
+### Interaction with the Canvas
+
+You can interact with the canvas using the following mouse and keyboard shortcuts:
+
+- **Ctrl + Scroll mouse**: Zoom in or out.
+- **Scroll mouse**: Scroll the canvas up or down (only works when zoomed in).
+- **Shift + Scroll mouse**: Scroll the canvas left or right (only works when zoomed in).
+- **Click and drag with the mouse wheel**: Scroll the canvas in any direction (only works when zoomed in).
+
+### Tutorial
+
+For a step-by-step tutorial on getting started with Hot Design, refer to the [Create a Counter App with Hot Design™](xref:Uno.HotDesign.GetStarted.CounterTutorial) tutorial.

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

@@ -0,0 +1,53 @@
+---
+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.
+
+> [!Video https://www.youtube-nocookie.com/embed/fODrUH0zno0]
+
+## 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.
+
+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.
+
+[➜ Learn more about Uno Platform Studio](xref:Uno.Platform.Studio.Overview)
+
+### Key Features
+
+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.
+- **Leverage Your Favorite IDE**: Seamlessly integrate with Visual Studio, VS Code, or JetBrains Rider on any OS, with IDE-agnostic support.
+- **Synchronize Code and Designer**: Reflect changes instantly between the Designer and code, ensuring your live app and XAML remain a single source of truth.
+- **Integrate Live Data**: Connect your UI to data sources intuitively and see real-time updates to data bindings as you build, simplifying the process.
+- **Work Directly with Real Data**: Skip mock data creation by working with actual data sources from your running app, gaining a true-to-life feel of your app's behavior. Mock data is also supported for added flexibility.
+- **Reuse Custom & 3rd-Party Controls**: Incorporate custom and third-party UI components effortlessly while maintaining a consistent look and behavior across platforms.
+- **Manage State with Flexibility**: Work seamlessly with MVVM or MVUX to consume real-time data while keeping UI logic separate from core logic.
+- **Apply Styles Easily**: Enhance your app’s UI and UX with predefined styles, applied effortlessly in just a few clicks — no coding required.
+- **Explore Responsive Layouts**: Test layout options with a single click and instantly visualize how your app adapts to different devices and form factors.
+- **Switch Themes Effortlessly**: Toggle between light and dark modes with one click to ensure a consistent user experience across color schemes.
+- **Design on Remote Devices**: Fine-tune your UI directly on remote devices or emulators, instantly seeing changes without the need for constant redeployment.
+- **Simplify Property Management**: Use Smart Properties to quickly find, modify, and bind key UI properties without leaving the live design environment, saving time and effort.
+
+## Why Hot Design™?
+
+**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.
+
+**Let’s get started!**
+
+## What You’ll Find in This Documentation
+
+- **[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.

doc/articles/studio/Hot Reload/hot-reload-overview.md

@@ -0,0 +1,5 @@
+---
+uid: Uno.Platform.Studio.HotReload.Overview
+---
+
+[!include[working-with-xaml-hot-reload](../../features/working-with-xaml-hot-reload.md)]

doc/articles/studio/studio-overview.md

@@ -0,0 +1,40 @@
+---
+uid: Uno.Platform.Studio.Overview
+---
+
+# Uno Platform Studio Overview
+
+**Uno Platform Studio** is a set of productivity tools designed to enhance developer productivity, be it for design handoff, to radically improving developer inner dev loop with Hot Reload and industry-first, cross-platform runtime Visual Designer for .NET - Hot Design. Uno Platform Studio empowers developers to stay in their flow, enabling seamless cross-platform app development for every platform .NET runs on.
+
+![Introducing Uno Platform Studio](assets/introducing-uno-platform-studio.png)
+
+## What is Uno Platform Studio?
+
+**Uno Platform Studio** revolutionizes how developers design, build, and iterate on their applications.
+
+It includes three key tools, each purpose-built to streamline your workflow:
+
+- **[Hot Design™](xref:Uno.HotDesign.Overview)**  
+  The industry-first runtime Visual Designer for cross-platform .NET Applications. Transform your running app into a Designer from any IDE on any OS and create polished interfaces with ease.
+
+  [➜ Learn more about Hot Design™](xref:Uno.HotDesign.GetStarted.Guide)
+
+- **[Hot Reload](xref:Uno.Features.HotReload)**  
+  Reliably update any code in your app and get instant confirmation your changes were applied, with a new App Indicator to monitor changes while you develop.
+
+  [➜ Learn more about Hot Reload](xref:Uno.HotReload.GetStarted.Guide)
+
+- **[Design-to-Code](xref:Uno.Figma.GetStarted)**
+  Generate ready-to-use, well-structured XAML or C# Markup directly from your Figma designs with one click, completely eliminating manual design handoff.
+
+  [➜ Learn more about Design-to-Code](xref:Uno.Figma.GetStarted)
+
+## Why Choose Uno Platform Studio?
+
+Uno Platform Studio is designed to make cross-platform development fast, seamless, and enjoyable:
+
+- Stay in your flow by working directly in your preferred IDE and Figma design tool on any OS.
+- Build apps for every platform .NET runs on.
+- Streamline workflows with tools that integrate design, development, and iteration.
+
+**Start your journey with Uno Platform Studio today and take your app development productivity to the next level!**