Visual Studio 中的 XAML 預覽不顯示標題欄

Question

我正在為我的項目設計一些用戶界面，並注意到在我運行我的應用程序時顯示的標題欄不在 XAML 設計預覽器中。 不僅如此，標題欄顯然會影響我元素的大小。 有沒有辦法讓標題欄顯示在預覽中，以便我可以准確地設計我的 UI？ 我正在使用 Visual Studio 2019。這是一些代碼。 我還附上了預覽與模擬器的屏幕截圖。

我嘗試在 MainScreen 的內容頁面 header 中將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 文件（不是 Shell 的 Application.MainPage）。

相信Shell在預覽器中以及模擬器熱重載中仍然沒有正確處理，未來的VS版本可能會帶來一些增強。 例如，如果您在預覽器中打開 AppShell.xaml，則沒有任何有趣的東西只會呈現一個空白頁面。

更新

xaml 預覽器已在 VS 16.9.0 預覽版 4.0 中完全刪除，它將被增強的熱重載所取代。