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

Question

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

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

我启动 AppShell 并将其设为应用程序的主页面：

        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 中完全删除，它将被增强的 Hot Reload 取代。

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

XAML Preview in Visual Studio not showing title bar

visual-studio

xaml

xamarin.forms

xamarin.forms.shell

xamarin-previewer