From db3848a26b93724e90f0f48265cdd459fbf5347e Mon Sep 17 00:00:00 2001 From: Nick Randolph Date: Wed, 8 Jan 2025 17:58:13 +1100 Subject: [PATCH 1/8] docs: Reviewing existing docs --- .../features/working-with-xaml-hot-reload.md | 8 +++---- .../studio/Hot Design/hot-design-overview.md | 23 +++++++++++-------- doc/articles/studio/studio-overview.md | 17 ++++++++++---- 3 files changed, 29 insertions(+), 19 deletions(-) diff --git a/doc/articles/features/working-with-xaml-hot-reload.md b/doc/articles/features/working-with-xaml-hot-reload.md index 24422ab5f5b7..751892872918 100644 --- a/doc/articles/features/working-with-xaml-hot-reload.md +++ b/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,7 @@ 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. +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: `UseStudio(showHotReloadIndicator: false)`, removing the overlay from the view.

A hot reload visual indicator diff --git a/doc/articles/studio/Hot Design/hot-design-overview.md b/doc/articles/studio/Hot Design/hot-design-overview.md index bcf897e2651b..ac520ba27cdf 100644 --- a/doc/articles/studio/Hot Design/hot-design-overview.md +++ b/doc/articles/studio/Hot Design/hot-design-overview.md @@ -4,23 +4,26 @@ 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 [waitlist](https://platform.uno/waitlist/) to get early access and be the first to try it out! + +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 +43,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. + 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. + A hands-on walkthrough for building the [Counter App](xref:Uno.Workshop.Counter) using **Hot Design**, showcasing its features and workflow in action. diff --git a/doc/articles/studio/studio-overview.md b/doc/articles/studio/studio-overview.md index c1ffe3aea105..0c8a7e569f6b 100644 --- a/doc/articles/studio/studio-overview.md +++ b/doc/articles/studio/studio-overview.md @@ -4,7 +4,7 @@ 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. +**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 the 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) @@ -15,12 +15,12 @@ uid: Uno.Platform.Studio.Overview 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. + The industry-first, runtime visual designer, for cross-platform .NET Applications. Hot Design transforms your running app into a Designer, from any IDE, on any OS, to 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. + Reliably update any code in your app and get instant confirmation your changes were applied, with a new Hot Reload Indicator to monitor changes while you develop. [➜ Learn more about Hot Reload](xref:Uno.HotReload.GetStarted.Guide) @@ -31,10 +31,17 @@ It includes three key tools, each purpose-built to streamline your workflow: ## Why Choose Uno Platform Studio? -Uno Platform Studio is designed to make cross-platform development fast, seamless, and enjoyable: +**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!** +## What's the difference between Uno.Sdk and Uno Platform Studio? + +**Uno.Sdk** is the core SDK that powers the Uno Platform, enabling you to build cross-platform applications using C# and XAML from a single project. **Uno Platform Studio** is a suite of productivity tools that enhance your development experience, including Hot Design™, Hot Reload, and Design-to-Code. + +As the **Uno Platform Studio** is built on top of **Uno.Sdk**, it's only available to applications that have been created, or updated, to use the **Uno.Sdk**. If you haven't updated your project to use the **Uno.Sdk**, you can do so by following the [migration guide](xref:Uno.Development.MigratingFromPreviousReleases). + + +Start your journey with **Uno Platform Studio** today by **[registering an account](https://platform.uno/my-account/)**, and take your app development productivity to the next level! From 3b7f256fa8023d2cd6acd0780b3b6097dcd4f9de Mon Sep 17 00:00:00 2001 From: Nick Randolph Date: Wed, 8 Jan 2025 18:04:31 +1100 Subject: [PATCH 2/8] docs: Adjusting text based on user feedback --- .../studio/Hot Design/hot-design-getstarted-guide.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/doc/articles/studio/Hot Design/hot-design-getstarted-guide.md b/doc/articles/studio/Hot Design/hot-design-getstarted-guide.md index 4303245d7af9..5a981be812a0 100644 --- a/doc/articles/studio/Hot Design/hot-design-getstarted-guide.md +++ b/doc/articles/studio/Hot Design/hot-design-getstarted-guide.md @@ -85,7 +85,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.

Selecting a single item on the main canvas @@ -129,11 +129,7 @@ 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. @@ -141,6 +137,10 @@ You can quickly identify the type of value set for a property by the icon displa - ![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. From ed21c736bd77f7ff30b29d2cd81f9be074da5634 Mon Sep 17 00:00:00 2001 From: Nick Randolph Date: Fri, 10 Jan 2025 16:26:39 +1100 Subject: [PATCH 3/8] chore: Fixing linter --- doc/articles/studio/studio-overview.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/doc/articles/studio/studio-overview.md b/doc/articles/studio/studio-overview.md index 0c8a7e569f6b..9131ef76e59d 100644 --- a/doc/articles/studio/studio-overview.md +++ b/doc/articles/studio/studio-overview.md @@ -39,9 +39,8 @@ It includes three key tools, each purpose-built to streamline your workflow: ## What's the difference between Uno.Sdk and Uno Platform Studio? -**Uno.Sdk** is the core SDK that powers the Uno Platform, enabling you to build cross-platform applications using C# and XAML from a single project. **Uno Platform Studio** is a suite of productivity tools that enhance your development experience, including Hot Design™, Hot Reload, and Design-to-Code. +**Uno.Sdk** is the core SDK that powers the Uno Platform, enabling you to build cross-platform applications using C# and XAML from a single project. **Uno Platform Studio** is a suite of productivity tools that enhance your development experience, including Hot Design™, Hot Reload, and Design-to-Code. As the **Uno Platform Studio** is built on top of **Uno.Sdk**, it's only available to applications that have been created, or updated, to use the **Uno.Sdk**. If you haven't updated your project to use the **Uno.Sdk**, you can do so by following the [migration guide](xref:Uno.Development.MigratingFromPreviousReleases). - Start your journey with **Uno Platform Studio** today by **[registering an account](https://platform.uno/my-account/)**, and take your app development productivity to the next level! From 9c2a2023e5b7881b883bb3113fb112e71b7ae25d Mon Sep 17 00:00:00 2001 From: Nick Randolph Date: Fri, 10 Jan 2025 16:27:07 +1100 Subject: [PATCH 4/8] chore: Fixing spelling --- doc/articles/studio/Hot Design/hot-design-overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc/articles/studio/Hot Design/hot-design-overview.md b/doc/articles/studio/Hot Design/hot-design-overview.md index ac520ba27cdf..9e23fd316633 100644 --- a/doc/articles/studio/Hot Design/hot-design-overview.md +++ b/doc/articles/studio/Hot Design/hot-design-overview.md @@ -5,7 +5,7 @@ uid: Uno.HotDesign.Overview # Hot Design™ Overview > [!IMPORTANT] -> **Hot Design™** is currently in beta. Sign up to the [waitlist](https://platform.uno/waitlist/) to get early access and be the first to try it out! +> **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! Welcome to **Hot Design**, a next-generation runtime visual designer for cross-platform .NET applications! From 64d5bb9cdd382828df2b9dc770b80078b6ab151f Mon Sep 17 00:00:00 2001 From: Nick Randolph Date: Sat, 11 Jan 2025 00:04:57 +1100 Subject: [PATCH 5/8] chore: Minor tweaks --- .../hot-design-getstarted-counter-tutorial.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/doc/articles/studio/Hot Design/hot-design-getstarted-counter-tutorial.md b/doc/articles/studio/Hot Design/hot-design-getstarted-counter-tutorial.md index 1c76f3d17f6b..48058f7a3625 100644 --- a/doc/articles/studio/Hot Design/hot-design-getstarted-counter-tutorial.md +++ b/doc/articles/studio/Hot Design/hot-design-getstarted-counter-tutorial.md @@ -32,10 +32,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.

- Hot Design flame icon to enter in design mode + Hot Design flame button to enter in design mode

## Creating the Counter Application @@ -90,7 +90,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) (right-click the [link](https://aka.platform.uno/counter-tutorial-svg-uno-logo) 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 +122,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).

- Hot Design flame icon to enter design mode + Hot Design flame button to enter design mode

## Change the Layout From 8b4bad63f2054ce518bf82089cc2a06f7e064a67 Mon Sep 17 00:00:00 2001 From: Nick Randolph Date: Sat, 11 Jan 2025 00:17:07 +1100 Subject: [PATCH 6/8] chore: Adding mvvm comment --- .../studio/Hot Design/hot-design-getstarted-counter-tutorial.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc/articles/studio/Hot Design/hot-design-getstarted-counter-tutorial.md b/doc/articles/studio/Hot Design/hot-design-getstarted-counter-tutorial.md index 48058f7a3625..dfc6fcb4c6a2 100644 --- a/doc/articles/studio/Hot Design/hot-design-getstarted-counter-tutorial.md +++ b/doc/articles/studio/Hot Design/hot-design-getstarted-counter-tutorial.md @@ -16,7 +16,7 @@ This tutorial will guide you through using Hot Design to create a simple counter

> [!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). > > [!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. From e0edc98939651849f213f1e3b014ca44b8c150bf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Agn=C3=A8s=20ZITTE?= <16295702+agneszitte@users.noreply.github.com> Date: Tue, 14 Jan 2025 11:17:45 -0500 Subject: [PATCH 7/8] chore: Apply suggestions from code review --- doc/articles/features/working-with-xaml-hot-reload.md | 2 +- .../Hot Design/hot-design-getstarted-counter-tutorial.md | 4 ++-- doc/articles/studio/studio-overview.md | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/doc/articles/features/working-with-xaml-hot-reload.md b/doc/articles/features/working-with-xaml-hot-reload.md index 751892872918..f80665715d02 100644 --- a/doc/articles/features/working-with-xaml-hot-reload.md +++ b/doc/articles/features/working-with-xaml-hot-reload.md @@ -297,7 +297,7 @@ 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: `UseStudio(showHotReloadIndicator: false)`, removing the overlay from the view. +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.

A hot reload visual indicator diff --git a/doc/articles/studio/Hot Design/hot-design-getstarted-counter-tutorial.md b/doc/articles/studio/Hot Design/hot-design-getstarted-counter-tutorial.md index dfc6fcb4c6a2..1677fc3a949a 100644 --- a/doc/articles/studio/Hot Design/hot-design-getstarted-counter-tutorial.md +++ b/doc/articles/studio/Hot Design/hot-design-getstarted-counter-tutorial.md @@ -16,7 +16,7 @@ This tutorial will guide you through using Hot Design to create a simple counter

> [!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. 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). +> 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). > > [!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. @@ -90,7 +90,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) (right-click the [link](https://aka.platform.uno/counter-tutorial-svg-uno-logo) 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. +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. diff --git a/doc/articles/studio/studio-overview.md b/doc/articles/studio/studio-overview.md index 9131ef76e59d..ca8b52694ef3 100644 --- a/doc/articles/studio/studio-overview.md +++ b/doc/articles/studio/studio-overview.md @@ -39,8 +39,8 @@ It includes three key tools, each purpose-built to streamline your workflow: ## What's the difference between Uno.Sdk and Uno Platform Studio? -**Uno.Sdk** is the core SDK that powers the Uno Platform, enabling you to build cross-platform applications using C# and XAML from a single project. **Uno Platform Studio** is a suite of productivity tools that enhance your development experience, including Hot Design™, Hot Reload, and Design-to-Code. +**Uno.Sdk** is the core SDK that powers the Uno Platform, enabling you to build cross-platform applications using C# and XAML from a single project. **Uno Platform Studio** is a suite of productivity tools that enhance your development experience, including Hot Design™, Hot Reload, and Design-to-Code. -As the **Uno Platform Studio** is built on top of **Uno.Sdk**, it's only available to applications that have been created, or updated, to use the **Uno.Sdk**. If you haven't updated your project to use the **Uno.Sdk**, you can do so by following the [migration guide](xref:Uno.Development.MigratingFromPreviousReleases). +As the **Uno Platform Studio** is built on top of **Uno.Sdk**, it's only available to applications that have been created, or updated, to use the **Uno.Sdk**. If you haven't updated your project to use the **Uno.Sdk**, you can do so by following the [migration guide](xref:Uno.Development.MigratingFromPreviousReleases). Start your journey with **Uno Platform Studio** today by **[registering an account](https://platform.uno/my-account/)**, and take your app development productivity to the next level! From 93c779033dda29be916c63905bc651886903c597 Mon Sep 17 00:00:00 2001 From: agneszitte Date: Tue, 14 Jan 2025 18:16:07 -0500 Subject: [PATCH 8/8] docs: Add additional fixes for Hot Design and Hot Reload documentation --- .../features/working-with-xaml-hot-reload.md | 3 +++ .../hot-design-getstarted-counter-tutorial.md | 8 ++++++++ .../Hot Design/hot-design-getstarted-guide.md | 16 +++++++++++----- .../studio/Hot Design/hot-design-overview.md | 12 ++++++++++-- 4 files changed, 32 insertions(+), 7 deletions(-) diff --git a/doc/articles/features/working-with-xaml-hot-reload.md b/doc/articles/features/working-with-xaml-hot-reload.md index f80665715d02..30a66a804a85 100644 --- a/doc/articles/features/working-with-xaml-hot-reload.md +++ b/doc/articles/features/working-with-xaml-hot-reload.md @@ -297,6 +297,9 @@ Mobile targets are currently using a limited version of XAML Hot Reload and do n ## Hot Reload Indicator +> [!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.

diff --git a/doc/articles/studio/Hot Design/hot-design-getstarted-counter-tutorial.md b/doc/articles/studio/Hot Design/hot-design-getstarted-counter-tutorial.md index 1677fc3a949a..7ddfd290e16d 100644 --- a/doc/articles/studio/Hot Design/hot-design-getstarted-counter-tutorial.md +++ b/doc/articles/studio/Hot Design/hot-design-getstarted-counter-tutorial.md @@ -18,6 +18,14 @@ This tutorial will guide you through using Hot Design to create a simple counter > [!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. 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. > diff --git a/doc/articles/studio/Hot Design/hot-design-getstarted-guide.md b/doc/articles/studio/Hot Design/hot-design-getstarted-guide.md index 5a981be812a0..523b73bf1478 100644 --- a/doc/articles/studio/Hot Design/hot-design-getstarted-guide.md +++ b/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 Hot Design flame icon to enter in design mode

-> [!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. diff --git a/doc/articles/studio/Hot Design/hot-design-overview.md b/doc/articles/studio/Hot Design/hot-design-overview.md index 9e23fd316633..ffce0ab3e408 100644 --- a/doc/articles/studio/Hot Design/hot-design-overview.md +++ b/doc/articles/studio/Hot Design/hot-design-overview.md @@ -6,6 +6,14 @@ uid: Uno.HotDesign.Overview > [!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! @@ -49,8 +57,8 @@ By simplifying UI development and accelerating your workflow, **Hot Design** hel ## Next Steps -- **[Get Started Guide](xref:Uno.HotDesign.GetStarted.Guide)** +- **[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)** +- **[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.