WinUI Controls Overview

Welcome to the comprehensive guide to Windows UI (WinUI) controls. WinUI is the modern native UI platform for Windows developers, empowering you to build beautiful, performant, and expressive applications.

This section provides an overview of the various controls available in the WinUI library, categorized by their functionality and purpose. Understanding these building blocks is crucial for designing intuitive and effective user interfaces.

Core Control Categories

WinUI controls can be broadly categorized into the following groups:

Layout Controls

These controls are fundamental for structuring your application's visual layout and arranging other elements on the screen. They ensure your UI adapts gracefully to different screen sizes and resolutions.

  • Grid: Arranges elements in a two-dimensional table of rows and columns.
  • StackPanel: Arranges elements in a single line, either horizontally or vertically.
  • RelativePanel: Positions and aligns elements relative to each other or the panel itself.
  • ScrollViewer: Provides scrolling capabilities for content that exceeds the available viewport.

Input Controls

These controls allow users to interact with your application by providing input. They range from simple text entry to more complex selections.

  • TextBox: For single-line or multi-line text input.
  • PasswordBox: Similar to TextBox, but masks input.
  • CheckBox: For binary selections (on/off).
  • RadioButton: For selecting one option from a group.
  • ComboBox: A dropdown list for selecting an item from a predefined set.
  • Slider: For selecting a value within a continuous range.
  • DatePicker and TimePicker: For selecting dates and times.

Command Controls

These controls trigger actions or commands within your application, providing users with ways to initiate processes.

  • Button: The most common control for initiating an action.
  • AppBarButton: Designed for use in CommandBars.
  • ToggleSwitch: For toggling between two states, visually distinct from a CheckBox.
  • SplitButton: Combines a primary action with a secondary flyout menu.

Content Controls

These controls are designed to display or contain other content, often providing rich visual representations.

  • TextBlock: For displaying read-only text.
  • Image: For displaying images.
  • HyperlinkButton: Displays text that navigates to a URI when clicked.
  • RichTextBlock: For displaying rich text content with advanced formatting.
  • WebView2: Embeds a web browser control to render web content.

Items Controls

These controls are used to display collections of data, allowing users to view and interact with lists, grids, and other structured data.

  • ListView: Displays a collection of items in a single column or row.
  • GridView: Displays a collection of items in a grid layout.
  • ItemsRepeater: A highly customizable control for displaying collections.
  • DataGrid: For displaying tabular data with sorting, filtering, and editing capabilities.

Navigation Controls

These controls facilitate movement within your application's interface.

  • NavigationView: A powerful control for implementing side navigation or top navigation patterns.
  • TabView: Provides a tabbed interface for managing multiple documents or views.

Getting Started with Controls

To use WinUI controls, you'll typically work within a XAML markup file. Here's a simple example of adding a Button to your page:

<Page
    x:Class="MyWinUIApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MyWinUIApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
        <TextBlock Text="Welcome to WinUI!" FontSize="24" Margin="0,0,0,20"/>
        <Button Content="Click Me" Click="Button_Click"/>
    </StackPanel>
</Page>

And the corresponding code-behind:

private void Button_Click(object sender, RoutedEventArgs e)
{
    // Handle button click logic here
    var dialog = new ContentDialog
    {
        Title = "Button Clicked",
        Content = "You clicked the button!",
        CloseButtonText = "Close"
    };
    await dialog.ShowAsync();
}

Example: Interactive Card

Here's a small demonstration combining a few controls:

Important Notification

This is a sample card showcasing a TextBlock and a Button.

Further Exploration

This overview provides a glimpse into the rich set of controls available in WinUI. For detailed information on each control, including properties, events, and advanced usage, please refer to the specific documentation pages linked in the sidebar.

Explore the WinUI Samples to see these controls in action and adapt them for your own projects.