XAML Preview in Visual Studio not showing title bar

Question

I am working on designing some user interfaces for my project, and am noticing that the title bar that is displayed when I run my app is not present in the XAML Design Previewer. Not only that, the title bar apparently is throwing off the size of my elements. Is there any way to get the title bar to display in the preview so I can accurately design my UI? I am using Visual Studio 2019. Here is some code. I am also attaching screenshots of the preview vs the emulator.

I've tried explicitly setting the NavigationPage.HasNavigationBar property to true in the content page header of MainScreen.

I initiate AppShell and make it the MainPage of the app:

        public App()
        {
            InitializeComponent();
            MainPage = new AppShell();
        }

This is the XAML of AppShell:

<?xml version="1.0" encoding="UTF-8"?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms" 
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:d="http://xamarin.com/schemas/2014/forms/design"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       mc:Ignorable="d"
       xmlns:local="clr-namespace:MyApp.Views"
       Title="MyApp"
       x:Class="MyApp.AppShell"
       >

    <!-- 
        Styles and Resources 
    -->
    <Shell.Resources>
        <ResourceDictionary>
            <Color x:Key="NavigationPrimary">#2196F3</Color>
            <Style x:Key="BaseStyle" TargetType="Element">
                <Setter Property="Shell.BackgroundColor" Value="{StaticResource NavigationPrimary}" />
                <Setter Property="Shell.ForegroundColor" Value="White" />
                <Setter Property="Shell.TitleColor" Value="White" />
                <Setter Property="Shell.DisabledColor" Value="#B4FFFFFF" />
                <Setter Property="Shell.UnselectedColor" Value="#95FFFFFF" />
                <Setter Property="Shell.TabBarBackgroundColor" Value="{StaticResource NavigationPrimary}" />
                <Setter Property="Shell.TabBarForegroundColor" Value="White"/>
                <Setter Property="Shell.TabBarUnselectedColor" Value="#95FFFFFF"/>
                <Setter Property="Shell.TabBarTitleColor" Value="White"/>
            </Style>
            <Style TargetType="ShellItem" BasedOn="{StaticResource BaseStyle}" />
        </ResourceDictionary>
    </Shell.Resources>

    <!-- Your Pages -->

    <FlyoutItem Title="Home Page" x:Name="MainScreenFlyout">
        <ShellContent ContentTemplate="{DataTemplate local:MainScreen }"/>
    </FlyoutItem>
    <FlyoutItem Title="Second Page" x:Name="SecondPage">
        <ShellContent ContentTemplate="{DataTemplate local:LoadingScreen}"/>
    </FlyoutItem>


</Shell>

This is the XAML of the MainScreen view.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="MyApp.Views.MainScreen"
             xmlns:vm="clr-namespace:MyApp.ViewModels"
             Title="MyApp">


    
    <ContentPage.Resources>
        <ResourceDictionary>
            <Color x:Key="Primary">#2196F3</Color>
            <Color x:Key="Accent">#96d1ff</Color>
            <Color x:Key="LightTextColor">#999999</Color>
        </ResourceDictionary>
    </ContentPage.Resources>



    <Grid Padding="0,25,0,25">

        <Grid.RowDefinitions>
            <RowDefinition Height="5*"></RowDefinition>
            <RowDefinition Height="3*"></RowDefinition>
            <RowDefinition Height="10*"></RowDefinition>
            <RowDefinition Height="10*"></RowDefinition>
            <RowDefinition Height="10*"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"></ColumnDefinition>
                <ColumnDefinition Width="3*"></ColumnDefinition>
                <ColumnDefinition Width="3*"></ColumnDefinition>
            <ColumnDefinition Width="3*"></ColumnDefinition>
                <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>

      

    </Grid>

   

</ContentPage>

Edit: My ultimate goal was to get the preview to show the same way that the emulator ultimately would, and I did find a work around to accomplish it. I will have to manually adjust for each new device, but that's a headache for when I am making it response.

The solution is to set a top margin in the ignorable http://xamarin.com/schemas/2014/forms/design namespace. I tried to find the heights and got some numbers but they didn't work for me so I fooled around with it until it matched up. 87 appears to be the magic number for my device.

<!--Title bars are 48 and 56 for android devices, 44 for iphone, but apparently that isn't right?-->
    <Grid Padding="0,25,0,25" d:Margin="0,87,0,0" x:Name="MainScreenGrid">

Answer 1

Because the "Title bar" called also navigation bar is generated by Shell, while the previewer renders only MainPage.xaml file (not Application.MainPage which is Shell).

I believe Shell is still not handled properly in the previewer, as well as in emulator hot reload, future versions of VS will probably bring some enhancements. For example if you open AppShell.xaml in the previewer nothing interesting will be rendered only a blank page.

Update

xaml previewer has been completely removed in VS 16.9.0 Preview 4.0, it will be replaced with an enhanced Hot Reload.