Avalonia/samples/ControlCatalog/Pages/NavigationPage/NavigationPageInteractiveHeaderPage.xaml

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="ControlCatalog.Pages.NavigationPageInteractiveHeaderPage">
  <DockPanel>
    <ScrollViewer DockPanel.Dock="Right" Width="260">
      <StackPanel Margin="12" Spacing="8">
        <TextBlock Text="How It Works" FontSize="16" FontWeight="SemiBold"
                   Foreground="{DynamicResource SystemControlHighlightAccentBrush}" />
        <TextBlock TextWrapping="Wrap" Opacity="0.7" FontSize="12"
                   Text="Page.Header accepts any Control, not just strings. A Grid in the header divides the nav bar: the page title stretches on the left, and a search box sits on the right. Both share the same data so typing immediately filters the contact list." />
        <Separator />
        <TextBlock Text="Key Points" FontWeight="SemiBold" />
        <TextBlock FontSize="11" TextWrapping="Wrap" Text="• Header = any Control, not just a string" />
        <TextBlock FontSize="11" TextWrapping="Wrap" Text="• Grid: title (*) + search box (Auto)" />
        <TextBlock FontSize="11" TextWrapping="Wrap" Text="• One ViewModel shared by header and content" />
        <TextBlock FontSize="11" TextWrapping="Wrap" Text="• Typing instantly filters via ObservableCollection" />
      </StackPanel>
    </ScrollViewer>
    <Border DockPanel.Dock="Right" Width="1" Background="{DynamicResource SystemControlForegroundBaseMediumLowBrush}" />
    <Border Margin="12"
            BorderBrush="{DynamicResource SystemControlForegroundBaseMediumLowBrush}"
            BorderThickness="1" CornerRadius="6" ClipToBounds="True">
      <NavigationPage x:Name="DemoNav" />
    </Border>
  </DockPanel>
</UserControl>