Uno Toolkit Controls

The Uno.Toolkit.UI library adds the following controls:

  • AutoLayout: A custom panel used by the Figma plugin to bridge the gap between Figma and UWP layout implementation.
  • Card and CardContentControl: [Material control] Cards contain content and actions that relate information about a subject.
  • Chip and ChipGroup: [Material control] Chips are compact elements that represent an input, attribute, or action.
  • Divider: [Material control] A divider is a thin line that groups content in lists and layouts.
  • DrawerControl: A container to display additional content, in a hidden pane that can be revealed using a swipe gesture, like a drawer.
  • DrawerFlyoutPresenter: A specialized ContentPresenter to be used in the template of a FlyoutPresenter to enable gesture support.
  • LoadingView: A control that indicates that the UI is waiting on a task to complete.
  • NavigationBar: A custom control that helps implement navigation logic for your application.
  • ShadowContainer: A content control allowing you to add multiple shadows to your content.
  • TabBar and TabBarItem: A list of selectable items that can be used to facilitate lateral navigation within an application.

Helpers

The Uno.Toolkit.UI library adds the following helper classes:

  • SystemThemeHelper: Provides a set of helper methods to check the current operating system theme, and manipulate the application dark/light theme.
  • AncestorBinding and ItemsControlBinding: These markup extensions provides relative binding based on ancestor type. If you are familiar with WPF, they are very similar to {RelativeSource Mode=FindAncestor}.
  • CommandExtensions: Provides Command/CommandParameter attached properties for common scenarios.
  • InputExtensions: Provides various attached properties for input controls, such as TextBox and PasswordBox.
  • ItemsRepeaterExtensions: Provides selection support for ItemsRepeater.
  • StatusBar: Provides two attached properties on Page to controls the visual of the status bar on mobile platforms.
  • TabBarItemExtensions: Provides additional features for TabBarItem.
  • VisualStateManagerExtensions: Provides a way of manipulating the visual states of Control with attached property.

Exposes visual states as attachable properties that lets you bind a string on a Control to set its VisualStates.

Control Styles

Control Style Key IsDefaultStyle*
AppBarButton MainCommandStyle True
AppBarButton ModalMainCommandStyle
AppBarButton PrimaryMainCommandStyle
AppBarButton PrimaryModalMainCommandStyle
AppBarButton PrimaryAppBarButtonStyle
utu:Card FilledCardStyle
utu:Card OutlinedCardStyle
utu:Card ElevatedCardStyle
utu:Card AvatarFilledCardStyle
utu:Card AvatarOutlinedCardStyle
utu:Card AvatarElevatedCardStyle
utu:Card SmallMediaFilledCardStyle
utu:Card SmallMediaOutlinedCardStyle
utu:Card SmallMediaElevatedCardStyle
utu:CardContentControl FilledCardContentControlStyle
utu:CardContentControl OutlinedCardContentControlStyle
utu:CardContentControl ElevatedCardContentControlStyle
utu:Chip AssistChipStyle
utu:Chip ElevatedAssistChipStyle
utu:Chip InputChipStyle
utu:Chip FilterChipStyle
utu:Chip ElevatedFilterChipStyle
utu:Chip SuggestionChipStyle
utu:Chip ElevatedSuggestionChipStyle
utu:ChipGroup InputChipGroupStyle
utu:ChipGroup ElevatedSuggestionChipGroupStyle
utu:ChipGroup SuggestionChipGroupStyle
utu:ChipGroup ElevatedFilterChipGroupStyle
utu:ChipGroup FilterChipGroupStyle
utu:ChipGroup ElevatedAssistChipGroupStyle
utu:ChipGroup AssistChipGroupStyle
utu:Divider DividerStyle True
FlyoutPresenter LeftDrawerFlyoutPresenterStyle
FlyoutPresenter TopDrawerFlyoutPresenterStyle
FlyoutPresenter RightDrawerFlyoutPresenterStyle
FlyoutPresenter BottomDrawerFlyoutPresenterStyle
utu:NavigationBar NavigationBarStyle True
utu:NavigationBar ModalNavigationBarStyle
utu:NavigationBar PrimaryNavigationBarStyle
utu:NavigationBar PrimaryModalNavigationBarStyle
utu:TabBar BottomTabBarStyle
utu:TabBar TopTabBarStyle
utu:TabBar ColoredTopTabBarStyle
utu:TabBar VerticalTabBarStyle
utu:TabBarItem BottomFabTabBarItemStyle
utu:TabBarItem BottomTabBarItemStyle
utu:TabBarItem VerticalTabBarItemStyle

IsDefaultStyle*: Styles in this column will be set as the default implicit style for the matching control