Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: Reviewing existing docs #19169

Merged
merged 8 commits into from
Jan 15, 2025
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions doc/articles/features/working-with-xaml-hot-reload.md
Original file line number Diff line number Diff line change
Expand Up @@ -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**
Expand Down Expand Up @@ -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.
agneszitte marked this conversation as resolved.
Show resolved Hide resolved

<p align="center">
<img src="~/articles/Assets/features/hotreload/indicator.png" alt="A hot reload visual indicator" />
Expand Down
12 changes: 6 additions & 6 deletions doc/articles/studio/Hot Design/hot-design-getstarted-guide.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

<p align="center">
<img src="Assets/canvas-select-single-item.png" alt="Selecting a single item on the main canvas" />
Expand Down Expand Up @@ -129,18 +129,18 @@ The **Properties** window displays the current values of a control's properties,

![Background property with autosuggest](Assets/properties-view-autosuggest-property.png)

For advanced options, clicking the **Advanced** button opens a flyout with three settings for each property: **Value**, **Binding**, or **Resource**.

![Three options for property setting and reset button](Assets/properties-view-button-flyout.png)

You can quickly identify the type of value set for a property by the icon displayed on the **Advanced** button. For example:
To the right of the property value is the **Advanced** button, which provides information on how the current property value is defined. For example:

- ![None](Assets/properties-view-advcd-button-none.png) indicates that nothing is set.
- ![XAML](Assets/properties-view-advcd-button-xaml.png) indicates a **Literal**/**XAML** value is set.
- ![Binding](Assets/properties-view-advcd-button-binding.png) indicates a **Binding** is set.
- ![Resource](Assets/properties-view-advcd-button-resource.png) indicates a **Resource** is set.
- ![Mixed Responsive](Assets/properties-view-advcd-button-mixed-responsive.png) indicates **Mixed Responsive** values is set using Responsive Extension.

Clicking the **Advanced** button opens a flyout with three settings for each property: **Value**, **Binding**, or **Resource**.

![Three options for property setting and reset button](Assets/properties-view-button-flyout.png)

> [!TIP]
> To quickly clear a property's value, click the **Reset** button. Cleared properties will behave as though they weren't specified in the original XAML file.

Expand Down
23 changes: 13 additions & 10 deletions doc/articles/studio/Hot Design/hot-design-overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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.
17 changes: 12 additions & 5 deletions doc/articles/studio/studio-overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand All @@ -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)

Expand All @@ -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!
Loading