Visual Studio 中的 XAML 预览不显示标题栏

Question

我正在为我的项目设计一些用户界面，并注意到在我运行我的应用程序时显示的标题栏在 XAML 设计预览器中不存在。不仅如此，标题栏显然会影响我元素的大小。有没有办法让标题栏显示在预览中，以便我可以准确地设计我的 UI？我正在使用 Visual Studio 2019。这是一些代码。我还附上了预览与模拟器的屏幕截图。

我已尝试在 MainScreen 的内容页眉中将 NavigationPage.HasNavigationBar 属性显式设置为 true。

我启动 AppShell 并使其成为应用程序的 MainPage：

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

这是 AppShell 的 XAML：

<?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>

这是 MainScreen 视图的 XAML。

<?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>

编辑：我的最终目标是让预览以与模拟器最终相同的方式显示，我确实找到了解决方法来完成它。我将不得不为每台新设备手动调整，但是当我做出响应时，这是一个令人头疼的问题。

解决方案是在可忽略的http://xamarin.com/schemas/2014/forms/design 命名空间中设置上边距。我试图找到高度并得到了一些数字，但它们对我不起作用，所以我一直在玩弄它，直到它匹配为止。 87 似乎是我设备的神奇数字。

<!--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

因为“标题栏”也称为导航栏是由Shell生成的，而预览器只呈现MainPage.xaml文件（不是Application.MainPage，它是Shell）。

我相信 Shell 在预览器中以及在模拟器热重载中仍然没有正确处理，未来的 VS 版本可能会带来一些增强。例如，如果您在预览器中打开 AppShell.xaml，则不会显示任何有趣的内容，而只会呈现一个空白页面。

更新

xaml 预览器已在 VS 16.9.0 预览版 4.0 中完全删除，它将被增强的热重载取代。