UserControls

UserControls compartmentalize XAML.

Creating

New folder > “Controls” > New item > WinUI > User Control (WinUI 3) > “HeaderControl”

HeaderControl.xaml

<!-- Create a UserControl tag to hold the control: -->
<UserControl
    x:Class="WiredBrainCoffee.CustomersApp.Controls.HeaderControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WiredBrainCoffee.CustomersApp.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Grid Background="#F05A28">
        <StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
            <Image Source="/Images/logo.png" Width="100" Margin="5"/>
            <TextBlock Text="Customers App" FontSize="30"
                VerticalAlignment="Center"
                Foreground="White"/>
            <TextBlock Text="Version 1.0" FontSize="16"
                VerticalAlignment="Bottom"
                Margin="10 0 0 22"
                Foreground="#333333"/>
        </StackPanel>
    </Grid>
</UserControl>

HeaderControl.xaml.cs code-behind:

namespace WiredBrainCoffee.CustomersApp.Controls
{
    public sealed partial class HeaderControl : UserControl // Note that inheritance from UserControl
    {
        public HeaderControl()
        {
            this.InitializeComponent();
        }
    }
}

MainWindow.xaml

<Window
    
    xmlns:controls="using:WiredBrainCoffee.CustomersApp.Controls"
    
    <!-- Header -->
    <controls:HeaderControl Grid.ColumnSpan="3"/>