Building a Modern UI with XAML

Introduction

Creating a visually compelling and highly responsive user interface is essential for modern Windows apps. XAML provides a declarative way to define UI elements, while the Universal Windows Platform (UWP) gives you the tools to make your app adapt to any device form factor.

Core Principles

• Adaptive Layout: Use relative sizing, RelativePanel, and Grid to adapt to different screen sizes.
• Fluent Design System: Leverage Reveal, Acrylic, and Shadow to create depth.
• Separation of Concerns: Keep UI logic in XAML, business logic in view models.
• Performance First: Minimize visual tree complexity and use x:Bind where appropriate.

Responsive Layout

Use AdaptiveTrigger and VisualStateManager to switch between visual states depending on the window width.

<Page
    x:Class="ModernUI.SamplePage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="Narrow">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="0"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="RootPanel.Orientation" Value="Vertical"/>
                    </VisualState.Setters>
                </VisualState>
                <VisualState x:Name="Wide">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="720"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="RootPanel.Orientation" Value="Horizontal"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <StackPanel x:Name="RootPanel">
            <TextBlock Text="Welcome to Modern UI" FontSize="32" Margin="0,0,0,20"/>
            <Button Content="Get Started" Width="200"/>
        </StackPanel>
    </Grid>
</Page>

Modern Controls

UWP ships with a set of Fluent controls. Here’s a quick example of a NavigationView combined with a CommandBar.

<NavigationView
    Header="My App"
    PaneDisplayMode="LeftCompact"
    IsBackButtonVisible="Collapsed">
    
    <NavigationView.MenuItems>
        <NavigationViewItem Icon="Home" Content="Home"/>
        <NavigationViewItem Icon="Contact" Content="Profile"/>
        <NavigationViewItem Icon="Setting" Content="Settings"/>
    </NavigationView.MenuItems>
    
    <NavigationView.Content>
        <Page>
            <CommandBar>
                <AppBarButton Icon="Refresh" Label="Refresh"/>
                <AppBarButton Icon="Add" Label="New"/>
            </CommandBar>
            <TextBlock Text="Content goes here..." Margin="20"/>
        </Page>
    </NavigationView.Content>
</NavigationView>

Styling & Themes

Define reusable ResourceDictionary files for colors, brushes, and styles.

<ResourceDictionary>
    <Color x:Key="BrandPrimaryColor">#0067C0</Color>
    <SolidColorBrush x:Key="BrandPrimaryBrush" Color="{StaticResource BrandPrimaryColor}"/>

    <Style TargetType="Button">
        <Setter Property="Background" Value="{StaticResource BrandPrimaryBrush}"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="CornerRadius" Value="4"/>
        <Setter Property="Padding" Value="10,6"/>
    </Style>
</ResourceDictionary>

Data Binding

Prefer x:Bind for compile‑time binding performance.

<Page
    x:Class="ModernUI.ViewModels.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Page.DataContext>
        <local:MainViewModel />
    </Page.DataContext>

    <StackPanel Padding="20">
        <TextBlock Text="{x:Bind ViewModel.Title, Mode=OneWay}" FontSize="24"/>
        <ListView ItemsSource="{x:Bind ViewModel.Items}" SelectionMode="None">
            <ListView.ItemTemplate>
                <DataTemplate x:DataType="local:Item">
                    <TextBlock Text="{x:Bind Name}" FontSize="18"/>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackPanel>
</Page>

Performance Tips

• Use VirtualizingStackPanel for long lists.
• Load heavy resources lazily with BitmapImage.DecodePixelWidth.
• Prefer Composition API for complex animations.
• Profile with the Windows Performance Recorder (WPR) and Visual Studio Diagnostic Tools.

Sample Project

Clone the ModernUI-XamlSample repository to explore a complete implementation.

Key files to study:

1. MainPage.xaml – layout and adaptive triggers.
2. Styles.xaml – theming and resource dictionaries.
3. ViewModels/MainViewModel.cs – data binding with x:Bind.

Conclusion

By combining XAML’s declarative syntax with Fluent Design, adaptive layouts, and modern UWP controls, you can create apps that feel native on any Windows device. Keep performance in mind, leverage the powerful binding engine, and stay consistent with Microsoft’s design language to deliver a polished user experience.