XAML预览器仅显示空白页求助（Visual Studio 2017 Xamarin.Forms）

嗨，我来帮你搞定这个问题！这种预览异常在VS2017的Xamarin.Forms开发里不算少见，咱们先从最明显的问题入手，一步步排查：

第一步：修复XAML里的两个语法错误 #

你的XAML代码里有两个明显的问题，这大概率是导致预览器崩溃的核心原因：

1. Button的BackgroundColor多了一个#：你写的是##ff77D065，正确的十六进制颜色格式应该是#ff77D065，多余的#会让XAML解析器无法识别这个属性。
2. ContentPage包含多个根元素：Xamarin.Forms的ContentPage只能有一个直接子元素，你现在直接放了<Label>和<StackLayout>两个根元素，这违反了XAML的结构规则。

修正后的完整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:local="clr-namespace:App1"
             x:Class="App1.MainPage">
    <!-- 用一个外层StackLayout包裹所有元素，符合ContentPage的结构要求 -->
    <StackLayout VerticalOptions="Center">
        <Label Text="Welcome to Xamarin Forms!" 
               VerticalOptions="Center" 
               HorizontalOptions="Center" />
        <StackLayout Spacing="20" Padding="50" VerticalOptions="Center">
            <Entry x:Name="user_id" Placeholder="Mail id"></Entry>
            <Entry x:Name="password" Placeholder="Password" IsPassword="True"></Entry>
            <Button Text="Log In" 
                    TextColor="White" 
                    BackgroundColor="#ff77D065" 
                    Clicked="NavigateButton_OnClicked"></Button>
        </StackLayout>
    </StackLayout>
</ContentPage>

第二步：重启预览器和VS2017 #

有时候预览器会出现缓存卡顿：

• 先点击XAML预览器右上角的刷新按钮（圆形箭头图标），看看能不能正常渲染；
• 如果刷新没用，直接关闭VS2017，重新打开项目再查看预览。

第三步：清理重建项目 #

预览异常也可能是编译缓存的问题：

• 右键你的项目，选择清理，完成后再选择生成；
• 如果还是不行，手动删除项目文件夹里的bin和obj目录，然后重新生成项目。

第四步：检查Xamarin组件和VS版本 #

• 确保你的项目使用的是稳定版Xamarin.Forms，避免使用太旧或者预览版的NuGet包；
• 打开VS2017的工具>获取工具和功能，检查是否有Xamarin相关的更新，把VS和Xamarin组件都更到最新稳定版。

第五步：尝试兼容渲染器 #

如果以上步骤都没用，可以试试启用预览器的兼容模式：

• 点击预览器右上角的齿轮图标（设置），勾选“使用兼容渲染器”，然后重启预览器。

按照这些步骤操作，应该就能解决预览器空白的问题啦！

内容的提问来源于stack exchange，提问作者Rex Rex