WinUI Components - Windows Dev Documentation

Key WinUI Components

Explore the fundamental building blocks that power modern Windows applications with WinUI. These components provide a rich set of functionalities and a consistent user experience across your apps.

Button

The `Button` control is a fundamental interactive element that triggers an action when clicked. It supports various content, including text, images, and custom templates.

                    
<Button Content="Primary Action" Click="PrimaryButton_Click"/>
<Button Content="Secondary Action" Style="{StaticResource SecondaryButtonStyle}"/>

Use `Button` for primary actions, secondary actions, and contextual commands.

TextBox

The `TextBox` control allows users to enter and edit text. It supports single-line and multi-line input, input validation, and placeholder text.

                    
<TextBox Header="User Name" PlaceholderText="Type here"/>
<TextBox AcceptsReturn="True" TextWrapping="Wrap" Height="100"/>

Ideal for form inputs, search fields, and any scenario where user text input is required.

ListView & GridView

These controls are used to display collections of data. `ListView` presents items in a single column, while `GridView` arranges them in a grid.

Item 1

Item 2

Item 3

                    
<ListView ItemsSource="{x:Bind MyItemsSource}">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="local:MyDataItem">
            <TextBlock Text="{x:Bind Name}"/>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>
                    
                

Essential for displaying lists of files, emails, products, or any structured data.

NavigationView

A crucial component for creating app navigation. It provides a unified pane for navigation items, allowing users to easily move between different sections of your application.

Section Title

Content for the selected section...

                    
<NavigationView>
    <NavigationView.MenuItems>
        <NavigationViewItem Icon="Home" Content="Dashboard"/>
        <NavigationViewItem Icon="Settings" Content="Settings"/>
    </NavigationView.MenuItems>
    <!-- Content for the selected page -->
</NavigationView>
                    
                

Implement for applications with multiple top-level navigation destinations.

Dialogs and Popups

Used for displaying important information, confirmations, or gathering quick user input. Includes `ContentDialog` and `Flyout`.

                    
// For ContentDialog (conceptual XAML and C# interaction)
var dialog = new ContentDialog
{
    Title = "Confirm Action",
    Content = "Are you sure you want to proceed?",
    PrimaryButtonText = "Yes",
    CloseButtonText = "No"
};
await dialog.ShowAsync();

// For Flyout (conceptual XAML)
// <Button Content="Open Flyout">
//     <Button.Flyout>
//         <Flyout>
//             <TextBlock Text="This is a Flyout content"/>
//         </Flyout>
//     </Button.Flyout>
// </Button>
                    
                

Use judiciously for critical user interactions and notifications.