Logo FluentUI

FluentUI Controls QML Types

FluentUI Controls provides QML types for creating user interfaces.

FluentUI Controls QML types can be imported into your application using the following import statement in your .qml file:

 import FluentUI.Controls

AccentColor

A configurable accent color with dark and light variants

Acrylic

An acrylic blur material effect overlay

AppBar

A custom title bar designed for use with FramelessWindow

AutoLoader

A lazy loader that creates components on demand

AutoSuggestBox

A text input field with auto-completion suggestions

BannerLayout

An auto-cycling banner or carousel container

Breadcrumb

A breadcrumb navigation trail

CalendarPicker

A date picker with a calendar month view

Chart

A chart component powered by Chart.js supporting multiple chart types and animations

Chip

A compact chip or tag element

ColorOverlay

A shader effect that tints a source item with a solid color

ColorPicker

A full-featured color picker with canvas and eyedropper

ColorResource

A container for themed Fluent color tokens

Colors

A singleton palette providing standard and Fluent Design colors

ContentDialog

A modal dialog with animated appearance

ContentPage

A scrollable content page with standard padding

ControlBackground

A state-aware background for controls

CopyableText

A text label with one-click copy functionality

DataGrid

A tabular data grid with sorting support

DatePicker

A date picker with month, day, and year tumblers

DialogWindow

A modal dialog window

DropDownButton

A button that opens a drop-down menu popup

DropDownPopup

A popup container for selection lists

Expander

A collapsible panel with animated content reveal

FastBlur

A fast Gaussian blur shader effect

FilledButton

An accent-colored filled action button

FlipView

A flip-style items control that displays one item at a time

FluentIcons

A singleton providing Fluent UI icon glyph constants

FocusItem

A focus rectangle indicator for controls

FramelessWindow

A frameless application window with Mica or Acrylic background

HighlightRectangle

An animated highlight indicator for ListView items

HotLoader

A hot-reloadable loader that watches QML files for changes

HyperlinkButton

A button styled as a hyperlink

Icon

An icon display component

IconButton

An icon-only button

IconLabel

A label with an icon, designed for button content

InfoBadge

A badge indicator that displays a count or a dot

InfoBar

A severity-colored notification bar for displaying messages

InfoBarManager

Manages a stack of InfoBar notifications

InputBackground

A state-aware input background visual

InputMenu

A context menu for text input operations

LinearGradient

A linear gradient shader effect

LiquidGlass

A liquid glass refraction shader effect

ListTile

A list item with leading and trailing content

Marquee

A scrolling marquee text display

MultiLineTextBox

A multi-line text input control

MultiSelectComboBox

A combo box with multiple selection support

NavigationMenu

A popup menu for navigation items

NavigationMenuItem

An individual navigation menu item

NavigationView

A complete navigation container with a sidebar

NumberBox

A numeric input control with spin buttons

OpacityMask

An opacity mask shader effect

PageContext

A page-level context object for navigation

PageRouter

A route-to-component mapping registry

PageRouterView

A stack view controlled by a PageRouter

Pagination

A page navigation control with page buttons

PaneItem

A navigation destination item

PaneItemExpander

An expandable navigation item group

PaneItemHeader

A navigation section header label

PaneItemSeparator

A navigation section divider

ParallaxView

A parallax scrolling effect container

PasswordBox

A password input field with obscured text

PillButton

A pill-shaped rounded button

ProgressButton

A button with an integrated progress indicator

ProgressRing

A circular progress indicator

QMLHighlighter

A QML syntax highlighter component

QRCode

A QR code generator and display component

RadialGradient

A radial gradient shader effect

RatingControl

A star-based rating input control

RefreshGridView

A grid view with pull-to-refresh support

RefreshListView

A list view with pull-to-refresh support

RoundClip

A clipping container with rounded corners

RoundImageView

An image view with rounded corners

ScrollablePage

A scrollable page container

ScrollableTextBox

A scrollable multi-line text input control

SegmentedButton

A single button within a SegmentedControl

SegmentedControl

A mutually exclusive segmented button group

SelectionArea

A selection rectangle overlay

Shadow

A drop shadow effect

Shimmer

A loading shimmer placeholder

ShortcutPicker

A keyboard shortcut recorder control

SplitLayout

A resizable split layout

StackPage

A page wrapper for StackView navigation

StaggeredLayout

A masonry or staggered grid layout

StandardButton

A Fluent Design standard button

Starter

Application entry point with routing support

SyntaxView

A read-only code viewer with syntax highlighting

TabView

A tabbed document interface

TextBox

A single-line text input control

Theme

A singleton providing the global Fluent Design theme configuration

TimePicker

A time picker with hour and minute tumblers

Timeline

A vertical timeline for displaying chronological events

ToggleButton

A checkable toggle button

Tour

A guided tour overlay for feature introduction, with a page indicator

TreeDataGrid

A hierarchical tree data grid

Typography

A singleton providing the Fluent Design type ramp

Watermark

A tiled watermark text overlay

WindowResultLauncher

A utility for launching windows and receiving results

WindowRouter

A singleton for multi-window routing and navigation