diff --git a/doc/articles/features/working-with-xaml-hot-reload.md b/doc/articles/features/working-with-xaml-hot-reload.md index c32f95322b95..24422ab5f5b7 100644 --- a/doc/articles/features/working-with-xaml-hot-reload.md +++ b/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.

- A hot reload visual indicator + A hot reload visual indicator

> [!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.

- A window showing events from Hot Reload + A window showing events from Hot Reload

### Statuses diff --git a/doc/articles/studio/Assets/Introducing-Uno-Platform-Studio.png b/doc/articles/studio/Assets/Introducing-Uno-Platform-Studio.png new file mode 100644 index 000000000000..b61141163400 Binary files /dev/null and b/doc/articles/studio/Assets/Introducing-Uno-Platform-Studio.png differ diff --git a/doc/articles/studio/Hot Design/Assets/canvas-select-multiple-items.png b/doc/articles/studio/Hot Design/Assets/canvas-select-multiple-items.png new file mode 100644 index 000000000000..188a22a3c176 Binary files /dev/null and b/doc/articles/studio/Hot Design/Assets/canvas-select-multiple-items.png differ diff --git a/doc/articles/studio/Hot Design/Assets/canvas-select-single-item.png b/doc/articles/studio/Hot Design/Assets/canvas-select-single-item.png new file mode 100644 index 000000000000..20b2d535aaa1 Binary files /dev/null and b/doc/articles/studio/Hot Design/Assets/canvas-select-single-item.png differ diff --git a/doc/articles/studio/Hot Design/Assets/counter-app.png b/doc/articles/studio/Hot Design/Assets/counter-app.png new file mode 100644 index 000000000000..6444f20df295 Binary files /dev/null and b/doc/articles/studio/Hot Design/Assets/counter-app.png differ diff --git a/doc/articles/studio/Hot Design/Assets/delete-elements.png b/doc/articles/studio/Hot Design/Assets/delete-elements.png new file mode 100644 index 000000000000..29c23330e8b8 Binary files /dev/null and b/doc/articles/studio/Hot Design/Assets/delete-elements.png differ diff --git a/doc/articles/studio/Hot Design/Assets/enter-hot-design-mode.png b/doc/articles/studio/Hot Design/Assets/enter-hot-design-mode.png new file mode 100644 index 000000000000..909369557c2e Binary files /dev/null and b/doc/articles/studio/Hot Design/Assets/enter-hot-design-mode.png differ diff --git a/doc/articles/studio/Hot Design/Assets/form-factor-and-zoom-flyout.png b/doc/articles/studio/Hot Design/Assets/form-factor-and-zoom-flyout.png new file mode 100644 index 000000000000..0762f6accdcb Binary files /dev/null and b/doc/articles/studio/Hot Design/Assets/form-factor-and-zoom-flyout.png differ diff --git a/doc/articles/studio/Hot Design/Assets/gifs/1-remove-stackpanel.gif b/doc/articles/studio/Hot Design/Assets/gifs/1-remove-stackpanel.gif new file mode 100644 index 000000000000..2560507b4796 Binary files /dev/null and b/doc/articles/studio/Hot Design/Assets/gifs/1-remove-stackpanel.gif differ diff --git a/doc/articles/studio/Hot Design/Assets/gifs/2-add-stackpanel.gif b/doc/articles/studio/Hot Design/Assets/gifs/2-add-stackpanel.gif new file mode 100644 index 000000000000..930c2bb0f10d Binary files /dev/null and b/doc/articles/studio/Hot Design/Assets/gifs/2-add-stackpanel.gif differ diff --git a/doc/articles/studio/Hot Design/Assets/gifs/2.1-add-stackpanel.gif b/doc/articles/studio/Hot Design/Assets/gifs/2.1-add-stackpanel.gif new file mode 100644 index 000000000000..67aa720cbbd6 Binary files /dev/null and b/doc/articles/studio/Hot Design/Assets/gifs/2.1-add-stackpanel.gif differ diff --git a/doc/articles/studio/Hot Design/Assets/gifs/2.2-add-stackpanel.gif b/doc/articles/studio/Hot Design/Assets/gifs/2.2-add-stackpanel.gif new file mode 100644 index 000000000000..92c7984954f4 Binary files /dev/null and b/doc/articles/studio/Hot Design/Assets/gifs/2.2-add-stackpanel.gif differ diff --git a/doc/articles/studio/Hot Design/Assets/gifs/3-stackpanel-alignment.gif b/doc/articles/studio/Hot Design/Assets/gifs/3-stackpanel-alignment.gif new file mode 100644 index 000000000000..d148d8f06cbc Binary files /dev/null and b/doc/articles/studio/Hot Design/Assets/gifs/3-stackpanel-alignment.gif differ diff --git a/doc/articles/studio/Hot Design/Assets/gifs/3.1-textbox-clear-text.gif b/doc/articles/studio/Hot Design/Assets/gifs/3.1-textbox-clear-text.gif new file mode 100644 index 000000000000..fb6614228c76 Binary files /dev/null and b/doc/articles/studio/Hot Design/Assets/gifs/3.1-textbox-clear-text.gif differ diff --git a/doc/articles/studio/Hot Design/Assets/gifs/4-add-image-source.gif b/doc/articles/studio/Hot Design/Assets/gifs/4-add-image-source.gif new file mode 100644 index 000000000000..c83a42b287c9 Binary files /dev/null and b/doc/articles/studio/Hot Design/Assets/gifs/4-add-image-source.gif differ diff --git a/doc/articles/studio/Hot Design/Assets/gifs/4.1-search-properties.gif b/doc/articles/studio/Hot Design/Assets/gifs/4.1-search-properties.gif new file mode 100644 index 000000000000..a63a37587184 Binary files /dev/null and b/doc/articles/studio/Hot Design/Assets/gifs/4.1-search-properties.gif differ diff --git a/doc/articles/studio/Hot Design/Assets/gifs/4.2-resize-property-view.gif b/doc/articles/studio/Hot Design/Assets/gifs/4.2-resize-property-view.gif new file mode 100644 index 000000000000..6ba33a5c9932 Binary files /dev/null and b/doc/articles/studio/Hot Design/Assets/gifs/4.2-resize-property-view.gif differ diff --git a/doc/articles/studio/Hot Design/Assets/gifs/5-multi-selection.gif b/doc/articles/studio/Hot Design/Assets/gifs/5-multi-selection.gif new file mode 100644 index 000000000000..04feace4318a Binary files /dev/null and b/doc/articles/studio/Hot Design/Assets/gifs/5-multi-selection.gif differ diff --git a/doc/articles/studio/Hot Design/Assets/gifs/6-button-style.gif b/doc/articles/studio/Hot Design/Assets/gifs/6-button-style.gif new file mode 100644 index 000000000000..e1227d5e2a28 Binary files /dev/null and b/doc/articles/studio/Hot Design/Assets/gifs/6-button-style.gif differ diff --git a/doc/articles/studio/Hot Design/Assets/gifs/7-textbox-binding.gif b/doc/articles/studio/Hot Design/Assets/gifs/7-textbox-binding.gif new file mode 100644 index 000000000000..e19b8eb1e3ce Binary files /dev/null and b/doc/articles/studio/Hot Design/Assets/gifs/7-textbox-binding.gif differ diff --git a/doc/articles/studio/Hot Design/Assets/gifs/8-button-command.gif b/doc/articles/studio/Hot Design/Assets/gifs/8-button-command.gif new file mode 100644 index 000000000000..0485ea4222e6 Binary files /dev/null and b/doc/articles/studio/Hot Design/Assets/gifs/8-button-command.gif differ diff --git a/doc/articles/studio/Hot Design/Assets/gifs/9-wrapup.gif b/doc/articles/studio/Hot Design/Assets/gifs/9-wrapup.gif new file mode 100644 index 000000000000..63056c2c8c3c Binary files /dev/null and b/doc/articles/studio/Hot Design/Assets/gifs/9-wrapup.gif differ diff --git a/doc/articles/studio/Hot Design/Assets/hot-design-dark-theme.png b/doc/articles/studio/Hot Design/Assets/hot-design-dark-theme.png new file mode 100644 index 000000000000..efa6f9fd97ed Binary files /dev/null and b/doc/articles/studio/Hot Design/Assets/hot-design-dark-theme.png differ diff --git a/doc/articles/studio/Hot Design/Assets/hot-design-light-theme.png b/doc/articles/studio/Hot Design/Assets/hot-design-light-theme.png new file mode 100644 index 000000000000..6679f1e99f15 Binary files /dev/null and b/doc/articles/studio/Hot Design/Assets/hot-design-light-theme.png differ diff --git a/doc/articles/studio/Hot Design/Assets/hot-design-views-highlighted.png b/doc/articles/studio/Hot Design/Assets/hot-design-views-highlighted.png new file mode 100644 index 000000000000..921a515bd807 Binary files /dev/null and b/doc/articles/studio/Hot Design/Assets/hot-design-views-highlighted.png differ diff --git a/doc/articles/studio/Hot Design/Assets/properties-view-advcd-button-binding.png b/doc/articles/studio/Hot Design/Assets/properties-view-advcd-button-binding.png new file mode 100644 index 000000000000..afb6a30120ca Binary files /dev/null and b/doc/articles/studio/Hot Design/Assets/properties-view-advcd-button-binding.png differ diff --git a/doc/articles/studio/Hot Design/Assets/properties-view-advcd-button-mixed-responsive.png b/doc/articles/studio/Hot Design/Assets/properties-view-advcd-button-mixed-responsive.png new file mode 100644 index 000000000000..db39c2a4ddba Binary files /dev/null and b/doc/articles/studio/Hot Design/Assets/properties-view-advcd-button-mixed-responsive.png differ diff --git a/doc/articles/studio/Hot Design/Assets/properties-view-advcd-button-none.png b/doc/articles/studio/Hot Design/Assets/properties-view-advcd-button-none.png new file mode 100644 index 000000000000..97bec1113789 Binary files /dev/null and b/doc/articles/studio/Hot Design/Assets/properties-view-advcd-button-none.png differ diff --git a/doc/articles/studio/Hot Design/Assets/properties-view-advcd-button-resource.png b/doc/articles/studio/Hot Design/Assets/properties-view-advcd-button-resource.png new file mode 100644 index 000000000000..6dcdde6bc322 Binary files /dev/null and b/doc/articles/studio/Hot Design/Assets/properties-view-advcd-button-resource.png differ diff --git a/doc/articles/studio/Hot Design/Assets/properties-view-advcd-button-xaml.png b/doc/articles/studio/Hot Design/Assets/properties-view-advcd-button-xaml.png new file mode 100644 index 000000000000..302740ceb326 Binary files /dev/null and b/doc/articles/studio/Hot Design/Assets/properties-view-advcd-button-xaml.png differ diff --git a/doc/articles/studio/Hot Design/Assets/properties-view-alignment-property.png b/doc/articles/studio/Hot Design/Assets/properties-view-alignment-property.png new file mode 100644 index 000000000000..69de2dddd2ac Binary files /dev/null and b/doc/articles/studio/Hot Design/Assets/properties-view-alignment-property.png differ diff --git a/doc/articles/studio/Hot Design/Assets/properties-view-autosuggest-property.png b/doc/articles/studio/Hot Design/Assets/properties-view-autosuggest-property.png new file mode 100644 index 000000000000..ea7261014196 Binary files /dev/null and b/doc/articles/studio/Hot Design/Assets/properties-view-autosuggest-property.png differ diff --git a/doc/articles/studio/Hot Design/Assets/properties-view-button-flyout.png b/doc/articles/studio/Hot Design/Assets/properties-view-button-flyout.png new file mode 100644 index 000000000000..ec485fc674a9 Binary files /dev/null and b/doc/articles/studio/Hot Design/Assets/properties-view-button-flyout.png differ diff --git a/doc/articles/studio/Hot Design/Assets/properties-view-text-empty.png b/doc/articles/studio/Hot Design/Assets/properties-view-text-empty.png new file mode 100644 index 000000000000..ada320b6e725 Binary files /dev/null and b/doc/articles/studio/Hot Design/Assets/properties-view-text-empty.png differ diff --git a/doc/articles/studio/Hot Design/Assets/properties-view-text-property.png b/doc/articles/studio/Hot Design/Assets/properties-view-text-property.png new file mode 100644 index 000000000000..3ddaee8c0e0b Binary files /dev/null and b/doc/articles/studio/Hot Design/Assets/properties-view-text-property.png differ diff --git a/doc/articles/studio/Hot Design/Assets/studio-toolbar.png b/doc/articles/studio/Hot Design/Assets/studio-toolbar.png new file mode 100644 index 000000000000..b4259f2bcceb Binary files /dev/null and b/doc/articles/studio/Hot Design/Assets/studio-toolbar.png differ diff --git a/doc/articles/studio/Hot Design/Assets/toolbar-connection-status.png b/doc/articles/studio/Hot Design/Assets/toolbar-connection-status.png new file mode 100644 index 000000000000..54de215ba926 Binary files /dev/null and b/doc/articles/studio/Hot Design/Assets/toolbar-connection-status.png differ diff --git a/doc/articles/studio/Hot Design/Assets/toolbar-dark-theme.png b/doc/articles/studio/Hot Design/Assets/toolbar-dark-theme.png new file mode 100644 index 000000000000..ad1fca64f016 Binary files /dev/null and b/doc/articles/studio/Hot Design/Assets/toolbar-dark-theme.png differ diff --git a/doc/articles/studio/Hot Design/Assets/toolbar-form-factor.png b/doc/articles/studio/Hot Design/Assets/toolbar-form-factor.png new file mode 100644 index 000000000000..11950f31d044 Binary files /dev/null and b/doc/articles/studio/Hot Design/Assets/toolbar-form-factor.png differ diff --git a/doc/articles/studio/Hot Design/Assets/toolbar-hot-design-enter-icon.png b/doc/articles/studio/Hot Design/Assets/toolbar-hot-design-enter-icon.png new file mode 100644 index 000000000000..9f6dd0ab5229 Binary files /dev/null and b/doc/articles/studio/Hot Design/Assets/toolbar-hot-design-enter-icon.png differ diff --git a/doc/articles/studio/Hot Design/Assets/toolbar-hot-design-icon.png b/doc/articles/studio/Hot Design/Assets/toolbar-hot-design-icon.png new file mode 100644 index 000000000000..9eae7e272307 Binary files /dev/null and b/doc/articles/studio/Hot Design/Assets/toolbar-hot-design-icon.png differ diff --git a/doc/articles/studio/Hot Design/Assets/toolbar-light-theme.png b/doc/articles/studio/Hot Design/Assets/toolbar-light-theme.png new file mode 100644 index 000000000000..a530d3d9ba81 Binary files /dev/null and b/doc/articles/studio/Hot Design/Assets/toolbar-light-theme.png differ diff --git a/doc/articles/studio/Hot Design/Assets/toolbar-more-options.png b/doc/articles/studio/Hot Design/Assets/toolbar-more-options.png new file mode 100644 index 000000000000..7f05cc2488ef Binary files /dev/null and b/doc/articles/studio/Hot Design/Assets/toolbar-more-options.png differ diff --git a/doc/articles/studio/Hot Design/Assets/toolbar-pause.png b/doc/articles/studio/Hot Design/Assets/toolbar-pause.png new file mode 100644 index 000000000000..5dc5eaad62ec Binary files /dev/null and b/doc/articles/studio/Hot Design/Assets/toolbar-pause.png differ diff --git a/doc/articles/studio/Hot Design/Assets/toolbar-play.png b/doc/articles/studio/Hot Design/Assets/toolbar-play.png new file mode 100644 index 000000000000..1bf5cd3e20cc Binary files /dev/null and b/doc/articles/studio/Hot Design/Assets/toolbar-play.png differ diff --git a/doc/articles/studio/Hot Design/Assets/toolbar-redo.png b/doc/articles/studio/Hot Design/Assets/toolbar-redo.png new file mode 100644 index 000000000000..f66a42bed9ad Binary files /dev/null and b/doc/articles/studio/Hot Design/Assets/toolbar-redo.png differ diff --git a/doc/articles/studio/Hot Design/Assets/toolbar-undo.png b/doc/articles/studio/Hot Design/Assets/toolbar-undo.png new file mode 100644 index 000000000000..fdd272628bf1 Binary files /dev/null and b/doc/articles/studio/Hot Design/Assets/toolbar-undo.png differ diff --git a/doc/articles/studio/Hot Design/Assets/toolbox-drag.gif b/doc/articles/studio/Hot Design/Assets/toolbox-drag.gif new file mode 100644 index 000000000000..f4348c44c6c0 Binary files /dev/null and b/doc/articles/studio/Hot Design/Assets/toolbox-drag.gif differ diff --git a/doc/articles/studio/Hot Design/Assets/vs-hot-reload-icon.png b/doc/articles/studio/Hot Design/Assets/vs-hot-reload-icon.png new file mode 100644 index 000000000000..9696dbd4e3ea Binary files /dev/null and b/doc/articles/studio/Hot Design/Assets/vs-hot-reload-icon.png differ 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 new file mode 100644 index 000000000000..153cda11e525 --- /dev/null +++ b/doc/articles/studio/Hot Design/hot-design-getstarted-counter-tutorial.md @@ -0,0 +1,283 @@ +--- +uid: Uno.HotDesign.GetStarted.CounterTutorial +--- + +# Create a Counter App with Hot Design™ + +This tutorial will guide you through using Hot Design to create a simple counter application. The application will include: + +- An `Image` at the top. +- A `TextBox` below the image, where you can set the step size for incrementing the counter. +- A `TextBlock` below the `TextBox`, displaying the current counter value. +- A `Button` at the bottom labeled **"Increment Counter by Step Size"**, which updates the counter value based on the step size entered. + +

+ Counter App Preview +

+ +> [!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). +> +> [!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. + +## Set Up Your Environment for Hot Design + +> [!IMPORTANT] +> If you're new to developing with Uno Platform, start by [setting up your environment](xref:Uno.GetStarted). Once your environment is ready, proceed directly to the next section, **Creating the Counter Application**. + +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. + +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. + +

+ Hot Design flame icon to enter in design mode +

+ +## Creating the Counter Application + +### [Visual Studio](#tab/vs) + +- Launch **Visual Studio** and click on **Create new project** on the Start Window. Alternatively, if you're already in Visual Studio, click **New, Project** from the **File** menu. +- Type "Uno Platform" in the search box +- Click **Uno Platform App**, then **Next** +- Name the project `Counter` and click **Create** +At this point you'll enter the **Uno Platform Template Wizard**, giving you options to customize the generated application. For this tutorial, we're only going to configure the presentation framework. +- Select **Blank** in **Presets** selection +- Select the **Presentation** tab and choose **MVUX** +- Click **Create** to complete the wizard +The template will create a solution with a single cross-platform project, named `Counter`, ready to run. + +### [Rider](#tab/rider) + +- Launch **Rider** and click on **New Solution** on the Start Window +- From the left menu, under the **Uno Platform** section, select **Uno Platform App** +At this point, you'll see options for creating a new Uno app, allowing you to customize the generated application. For this tutorial, we will only configure the presentation framework. +- Name the project `Counter` +- Select **Blank** in **Presets** selection +- Select the **Presentation** tab and choose **MVUX** +- Click **Create** to complete the creation +The template will create a solution with a single cross-platform project, named `Counter`, ready to run. + +### [VS Code](#tab/vscode) + +- Launch The Live Wizard by clicking [here](https://new.platform.uno/) +- Name the project `Counter` and click **Start** +- Select **Blank** in **Presets** selection +- Select the **Presentation** tab and choose **MVUX** +- Click **Create** to complete the wizard +- Copy the `dotnet new` command and run it from a terminal +This will create a new folder called **Counter** containing the new application. + +### [Command Line](#tab/cli) + +> [!NOTE] +> If you don't have the Uno Platform dotnet new templates installed, follow [these instructions](https://aka.platform.uno/dotnet-new-templates). + +From the command line, run the following command: + +```dotnetcli +dotnet new unoapp -preset blank -presentation mvux -o Counter +``` + +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. + +> [!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. +> +> For more information on **Uno.Resizetizer** functionalities, visit [Get Started with Uno.Resizetizer](xref:Uno.Resizetizer.GettingStarted). + +## Run the app + +Before you run the application, switch the target platform to **Desktop** (net8.0-desktop) to enable Hot Design during debugging. For more information on how to switch the target platform, visit the documentation page for your IDE: + +- [Visual Studio](xref:Uno.GettingStarted.CreateAnApp.VS2022#debug-the-app) +- [VS Code](xref:Uno.GettingStarted.CreateAnApp.VSCode#debug-the-app) +- [Rider](xref:Uno.GettingStarted.CreateAnApp.Riderp#debug-the-app) + +> [!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 using Visual Studio, you can choose to start it with or without debugging. +> If you're using VS Code or Rider, start the app **without the debugger**. + +Now, let's run the app. + +## Sign in with your Uno Platform Account + +If is not already previously done, 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. + +## 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). + +> [!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). + +

+ Hot Design flame icon to enter design mode +

+ +## Change the Layout + +We are all set to start adding controls to create our Counter app. Follow the steps below: + +> [!NOTE] +> When making changes via **Hot Design**, the XAML will automatically update to reflect your edits. Similarly, any changes made directly to the XAML will be reflected in the design. + +### Remove Existing Elements + +1. Remove the existing `StackPanel`. In the **Elements** window, select the `StackPanel`, right-click, and choose **Delete StackPanel**. + + ![Removing the StackPanel](Assets/gifs/1-remove-stackpanel.gif) + +### Add a `StackPanel` + +1. Let's add the container to hold our elements by adding a `StackPanel`. In the **Toolbox** window, search for "StackPanel". Once it appears in the search results, drag it onto the **Canvas**. + + ![StackPanel](Assets/gifs/2-add-stackpanel.gif) + + Alternatively, you can drag the element from the **Toolbox** and drop it onto the **Elements** window. + + ![StackPanel](Assets/gifs/2.1-add-stackpanel.gif) + + Another way would be to select the **existing element** in the **Elements** window where you want to add a new item, then double-click the desired item in the **Toolbox** window to add it as a child of the target. + + ![StackPanel](Assets/gifs/2.2-add-stackpanel.gif) + +1. Now, let's edit a property of the `StackPanel` to align it vertically and horizontally to the center. Select the `StackPanel` from the **Elements** window or the **Canvas**. In the **Properties** window, on the right side of the app, find the `VerticalAlignment` property and set it to **Center**, then do the same for `HorizontalAlignment`. + + ![StackPanel Alignment](Assets/gifs/3-stackpanel-alignment.gif) + +### Add an `Image` element + +1. Next, add an `Image` element to the `StackPanel`. In the **Toolbox** window, search for "Image". Once it appears in the results, drag it onto the `StackPanel` using either the **Canvas** or the **Elements** window. + + > [!NOTE] + > The image will appear with zero height until a source is set. + +1. Now that the `Image` element is added, let's set the source for our `Image` element. In the **Properties** window, locate the `Source` property. Start typing the name of the image we previously added, and the results should appear. Select **Assets/logo.png**. + + ![Image Source](Assets/gifs/4-add-image-source.gif) + +1. Now, let's edit some properties to enhance its appearance. In the **Properties** window, use the search button to find properties. Search for "Width" and set its value to **150**. Do the same for `Height`. Our `Image` element is now complete! + + ![Image](Assets/gifs/4.1-search-properties.gif) + +### Add a `TextBox` element + +1. The next step is to add a `TextBox` that will hold the increasing step value for our Counter app. In the **Toolbox** window, search for "TextBox." Once it appears in the results, drag it onto the `StackPanel`, making sure to place it under the `Image` element. +1. Now, let's set the `TextBox` properties. In the **Properties** window, set the `PlaceholderText` to "Step Size" and set the `TextAlignment` to **Center**. Reset the `Text` property by clicking the **Advanced** button to open the **Advanced Property** flyout, followed by clicking the **Reset** button. + + ![Reset Text](Assets/gifs/3.1-textbox-clear-text.gif) + +### Add a `TextBlock` element + +1. The next element to add is the `TextBlock`, which will display the current value of our Counter app. In the **Toolbox** window, search for "TextBlock." Once it appears in the results, drag it onto the `StackPanel`, ensuring it is placed under the `TextBox`. +1. Let's edit the `TextBlock` properties. In the **Properties** window, set the `Text` to "Counter: 1"; and, set the `TextAlignment` to **Center**. + +### Add a `Button` element + +1. The final element is the `Button` that will increment the **Count** value. From the **Toolbox** window, search for "Button" and once the result appears, drag it onto the `StackPanel`, making sure it is added under the `TextBlock` element. +1. Set the `Button` properties. In the **Properties** window, set the `Content` to "Increment Counter by Step Size". + +> [!NOTE] +> If there's insufficient room to edit the `Content` property you can resize the **Properties** window by dragging the left edge of the **Properties** window to the left. + +![Resize Properties Window](Assets/gifs/4.2-resize-property-view.gif) + +### Multi-selection + +Hot Design allows you to select multiple elements and edit common properties simultaneously. Let's try it: + +1. Hold the **Ctrl** key on your keyboard and click on the `Image`, the `TextBox` and the `TextBlock` (the `Button` should still be selected from the previous step). +2. In the **Properties** window, set `HorizontalAlignment` to **Center** and `Margin` to **12**. + + ![Multi Selection](Assets/gifs/5-multi-selection.gif) + +> [!NOTE] +> You can also use multi-selection from the **Elements** window by holding the **Ctrl** key while clicking on each node. + +### Style Picker + +Hot Design allows you to apply existing styles to your elements for a polished appearance. Let's change the style of our `Button`: + +1. Select the `Button`, either from the **Elements** window or the **Canvas**. +2. At the top of the **Properties** window, locate the Style Picker. +3. Choose **ButtonRevealStyle** to apply it. + + ![Button Style](Assets/gifs/6-button-style.gif) + +## MainModel and Data Binding + +As part of creating the application, we selected MVUX as the presentation framework. This added a reference to [**MVUX**](https://aka.platform.uno/mvux) which is responsible for managing our Models and generating the necessary bindings. +Without closing the application, return to your IDE and add a new class named `MainModel` and paste the following code to the newly created class: + +```csharp +namespace Counter; + +internal partial record Countable(int Count, int Step) +{ + public Countable Increment() => this with + { + Count = Count + Step + }; +} + +internal partial record MainModel +{ + public IState Countable => State.Value(this, () => new Countable(0, 1)); + public ValueTask IncrementCounter() + => Countable.UpdateAsync(c => c?.Increment()); +} +``` + +As the application uses MVUX, the `MainModel` class is used to generate a bindable ViewModel, `MainViewModel`. Modify `MainPage.xaml.cs` to make an instance of `MainViewModel` available to be data bound and connected to the UI. Add `DataContext = new MainViewModel();` to `MainPage.xaml.cs` right after `InitializeComponent();`. + +After making these changes in the IDE, save all files and return to Hot Design. + +> [!NOTE] +> VS Code and Rider will automatically trigger **Hot Reload** when the files are saved. +> +> In Visual Studio, you can manually trigger **Hot Reload** by clicking the Hot Reload button ![TextBox](Assets/vs-hot-reload-icon.png) on the **Visual Studio top toolbar**. + +### Set Binding + +#### TextBox + +Now, we need to bind the `TextBox`'s `Text` to the `Countable.Step` property of our ViewModel. +In the **Properties** window, locate the `Text` property. Click the **Advanced** button to the right of the `TextBox` to open the **Advanced Property** flyout. Select **Binding**. In the **Path** dropdown, locate the `Countable` property of our ViewModel, click the arrow to expand its properties, and select `Step`. Finally, from the **Mode** dropdown, select **TwoWay**. + +![TextBox](Assets/gifs/7-textbox-binding.gif) + +#### TextBlock + +For the `TextBlock`, bind the `Text` property to `Countable.Count`, just as we did with the `TextBox`. For this step it is not necessary to set the `Mode`. + +#### Button + +Finally, let's bind the **Command** to the `IncrementCounter` task of our ViewModel. + +![Button Command](Assets/gifs/8-button-command.gif) + +## Wrap Up + +At this point, you should have a working counter application. Click the **Play** button in the **Toolbar**, adjust the step size, and click the button to see the application in action. + +> [!NOTE] +> The **Play** button lets you interact with the app directly within **Hot Design**, without needing to leave the editor. Once you're done interacting with the application, you can click the **Pause** button to return to designing your application. If you wish to leave Hot Design and return to the running application, you can click the **Flame** button in the **Toolbar**. + +![WrapUp](Assets/gifs/9-wrapup.gif) diff --git a/doc/articles/studio/Hot Design/hot-design-getstarted-guide.md b/doc/articles/studio/Hot Design/hot-design-getstarted-guide.md new file mode 100644 index 000000000000..ad465d81285c --- /dev/null +++ b/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. + +

+ 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. +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 + +

+ Hot Design Toolbar +

+ +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: + +- Enter Hot Design Toolbar flame icon Entering **Hot Design** mode. + +- Leave Hot Design Toolbar flame icon Leaving **Hot Design** mode. + +- Hot Design Toolbar play iconHot Design Toolbar pause icon 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. + +- Hot Design Toolbar undo iconHot Design Toolbar redo icon Undoing and redoing changes. + +- Hot Design Toolbar form factor icon Changing the form factor of the app to test different screen sizes. + +- Hot Design Toolbar light theme iconHot Design Toolbar dark theme icon Switching between light and dark themes. + +- Hot Design Toolbar connection status icon Viewing the connection status and the latest updates from **Hot Reload**. + +- Hot Design Toolbar more options icon 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. + +

+ Selecting a single item on the main canvas +

+ +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. + +

+ Selecting multiple items on the main canvas +

+ +### 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/toolbox-drag.gif) + +To delete a control, right-click on it either in the canvas or the **Elements** window and select the delete option. + +

+ Delete an element from the Element window +

+ +### 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: + +

+Hot Design Toolbar form factor icon +

+ +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. + +

+Form factor and zoom level flyout +

+ +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. + +

+Example Hot Design with Light ThemeExample Hot Design with Dark Theme +

+ +### 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. diff --git a/doc/articles/studio/Hot Design/hot-design-overview.md b/doc/articles/studio/Hot Design/hot-design-overview.md new file mode 100644 index 000000000000..bcf897e2651b --- /dev/null +++ b/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. diff --git a/doc/articles/studio/Hot Reload/hot-reload-overview.md b/doc/articles/studio/Hot Reload/hot-reload-overview.md new file mode 100644 index 000000000000..4bdf1523f27e --- /dev/null +++ b/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)] diff --git a/doc/articles/studio/studio-overview.md b/doc/articles/studio/studio-overview.md new file mode 100644 index 000000000000..9022b6891873 --- /dev/null +++ b/doc/articles/studio/studio-overview.md @@ -0,0 +1,40 @@ +--- +uid: Uno.Platform.Studio.Overview +--- + +# Uno Platform Studio Overview + +Welcome to **Uno Platform Studio**, a suite of productivity tools designed to enhance every stage of the app development lifecycle, from design handoff to continuously building and refining your app. Uno Platform Studio empowers developers to stay productive and 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!** diff --git a/doc/articles/toc.yml b/doc/articles/toc.yml index 610381a5feb8..f474d96c9037 100644 --- a/doc/articles/toc.yml +++ b/doc/articles/toc.yml @@ -411,6 +411,26 @@ - name: FAQ href: xref:Uno.Development.FAQ +- name: Studio + topicHref: xref:Uno.Platform.Studio.Overview + items: + - name: Overview + href: xref:Uno.Platform.Studio.Overview + - name: Hot Reload + href: xref:Uno.Platform.Studio.HotReload.Overview + - name: Hot Design + topicHref: xref:Uno.HotDesign.Overview + items: + - name: Overview + href: xref:Uno.HotDesign.Overview + - name: Getting Started with Hot Design + href: xref:Uno.HotDesign.GetStarted.Guide + - name: Counter Tutorial + href: xref:Uno.HotDesign.GetStarted.CounterTutorial + - name: Design-to-Code + topicHref: xref:Uno.Figma.GetStarted + href: external/figma-docs/toc.yml + - name: Reference items: - name: Overview