🕓 2 MIN Need a last-minute holiday …
Matt Mattei
Hot Design is here, bringing a streamlined and intuitive interface for developers to design, build, and refine their apps more efficiently.
In this article, we’ll walk you through the key components of the Hot Design UI—Toolbox, Elements, Properties Window, and the Canvas—to explain how each part contributes to a seamless developer experience.
Available in Beta
The Toolbox houses all the controls and components you need to build your app’s interface. Organized into logical categories, it provides:
Quick Access: Drag controls like buttons, sliders, and text boxes directly onto the canvas or into the Elements tree.
Categorization: Components are grouped by functionality (e.g., Layouts, Controls, and Packages), easily search to find the right component for the job.
The Layout dropdown provides essential building blocks for structuring your UI.
Access the complete suite of standard WinUI controls, Uno Toolkit components, and third-party elements.
Access your external resources, giving you the ability to use referenced packages, project libraries, and external assets into your application.
The Elements pane gives you a structured overview of your UI layout, similar to a file explorer. It allows you to:
Navigate Quickly: View all elements in a hierarchical tree structure.
Reorganize Easily: Drag-and-drop elements to change their order or nesting.
Identify Relationships: Â Breaks down complex layouts into simple parent-child relationships
The Toolbar located at the top of your workspace, serves as your command center and provides convenient shortcuts to essential design and development functions.
Enter Hot Design
Seamlessly toggle between design mode and interactive mode with a single click.
Preview Mode
Test your application’s runtime behavior while in design mode.
Undo/Redo Buttons
Quickly revert or reapply changes.
Layouts and Zoom
Visualize your app in mobile, Tablet and Desktop modes and scale the workspace view.
Themes
Preview your app across light, or dark themes.
Event Log
Monitor interactions and debug events in real time.
The Properties Pane is where you fine-tune the behavior, appearance, and layout of selected elements. It’s divided into logical sections:
Common
Set universal properties like Name, Tag, and Visibility. For instance, you can assign a Name to a Button for easy reference in your ViewModel.
Layout
Fine-tune positioning with margins, padding, and alignment options. Use grid definitions and column spans for precise control in complex layouts.
Interactions
Define event handlers for actions such as Click, Tap, or KeyPress. Bind commands to ViewModels for robust MVVM or MVUX implementations.
Appearance
Customize colors, fonts, and styles to match your app’s branding
Text
Modify text-specific properties like alignment, wrapping, and localization.
Brush
Customize Background BorderBrush (Border, Panel) Foreground,Fill (Shapes) Stroke (Shapes) and gradients
Automations
Set automation properties for screen readers and accessibility support.
Transform
Apply visual effects like scaling, rotation, and skewing.
Miscalleanous
Fine-tune additional properties specific to certain controls.
The Canvas is the central workspace where you bring your app’s design to life. It offers:
WYSIWYG Editor: Provides precise control over component positioning.
Hot Reload: See updates instantly as you make them.
Automatic Code Generation: Produces clean, maintainable code output.
Drag-and-Drop Interface: Place and position components with ease.
Real-Time Preview: See how your app will look and behave instantly.
Hot Design, visual editor, designer, XAML
🕓 2 MIN Need a last-minute holiday …
🕓 7 MIN We are proud to …
🕓 10 MIN Each release, we don’t …
Uno Platform
360 rue Saint-Jacques, suite G101,
Montréal, Québec, Canada
H2Y 1P5
USA/CANADA toll free: +1-877-237-0471
International: +1-514-312-6958
Uno Platform 5.2 LIVE Webinar – Today at 3 PM EST – Watch
