Xamarin.Forms(Android)中ZXingScannerPage背景不透明导致无法扫码问题

问题现象 #

使用ZXing.Net.Mobile.Forms的ZXingScannerPage时遇到以下异常：

• 全局Page样式（DefaultTheme.xaml）因设置ApplyToDerivedTypes="True"，导致ZXingScannerPage继承了背景色，完全遮挡扫描相机视图，无法识别条形码
• 直接在BarcodeScannerPage.xaml设置Background="Transparent"，会让背后的调用页面透过扫描页面显示出来
• 该问题仅在发布/非调试模式出现，模拟器或设备调试模式下显示正常

涉及代码配置 #

DefaultTheme.xaml

<Style TargetType="Page" ApplyToDerivedTypes="True">
    <Setter Property="BackgroundColor" Value="{StaticResource Primary}"/>
    <Setter Property="Padding" Value="0"/>
</Style>

BarcodeScannerPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<zxing:ZXingScannerPage
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:zxing="clr-namespace:ZXing.Net.Mobile.Forms;assembly=ZXing.Net.Mobile.Forms"
    x:Class="Views.BarcodeScannerPage"
    IsScanning="True"
    OnScanResult="OnScanResultEventHandler">
</zxing:ZXingScannerPage>

业务逻辑代码

ScanBarcodeViewModel.cs

[RelayCommand]
public async Task ScanBarcodeClick()
{
    var barcodeScannerPage = new BarcodeScannerPage();
    barcodeScannerPage.OnScanSucceeded += BarcodeScannerPage_OnScanSucceeded;

    await Navigation.PushModalAsync(barcodeScannerPage, true);
}

NavigationManager.cs

public class NavigationManager : INavigation
{
    private INavigation _navigation;

    public Task PushModalAsync(Page page, bool animated)
    {
        return MainThread.InvokeOnMainThreadAsync(async () => await _navigation.PushModalAsync(page, animated));
    }
}

问题截图：

• 异常效果：
• 正常效果：

解决方案 #

方案1：单独为ZXingScannerPage定义样式覆盖全局设置 #

在DefaultTheme.xaml中添加针对ZXingScannerPage的专属样式，优先级高于全局Page样式，确保扫描页面背景透明且不影响其他页面：

<!-- 保留原全局Page样式 -->
<Style TargetType="Page" ApplyToDerivedTypes="True">
    <Setter Property="BackgroundColor" Value="{StaticResource Primary}"/>
    <Setter Property="Padding" Value="0"/>
</Style>

<!-- 添加ZXingScannerPage专属样式（需提前引入zxing命名空间） -->
<Style TargetType="zxing:ZXingScannerPage" ApplyToDerivedTypes="True">
    <Setter Property="BackgroundColor" Value="Transparent"/>
    <!-- 可选：隐藏导航栏，避免额外UI干扰扫描 -->
    <Setter Property="NavigationPage.HasNavigationBar" Value="False"/>
</Style>

方案2：代码后台强制设置视图属性，优化渲染逻辑 #

在BarcodeScannerPage的构造函数中直接设置背景，并禁用不透明优化，避免发布版的渲染层级问题：
BarcodeScannerPage.xaml.cs

public BarcodeScannerPage()
{
    InitializeComponent();
    // 强制设置背景为透明
    BackgroundColor = Color.Transparent;
    // 告知渲染引擎该视图非完全不透明，避免优先绘制遮挡相机视图
    SetValue(VisualElement.IsOpaqueProperty, false);
}

同时调整模态页面推送逻辑，避免动画过渡时显示背后页面：

[RelayCommand]
public async Task ScanBarcodeClick()
{
    var barcodeScannerPage = new BarcodeScannerPage();
    barcodeScannerPage.OnScanSucceeded += BarcodeScannerPage_OnScanSucceeded;

    // 直接在主线程推送，关闭动画避免过渡时的背景泄露
    await MainThread.InvokeOnMainThreadAsync(() => 
        Navigation.PushModalAsync(barcodeScannerPage, false));
}

方案3：修复NavigationManager的异步调度问题 #

当前NavigationManager的PushModalAsync存在嵌套异步调用，可能导致页面渲染时序异常，修改为直接返回任务：

public Task PushModalAsync(Page page, bool animated)
{
    // 移除多余的MainThread嵌套，确保导航调用上下文正确
    return _navigation.PushModalAsync(page, animated);
}

注：如果调用PushModalAsync的代码本身不在主线程，再保留MainThread.InvokeOnMainThreadAsync，但避免嵌套await。

问题原因 #

• Xamarin.Forms发布版会启用渲染优化，不透明视图会被优先绘制，导致全局样式的背景色遮挡了ZXing的相机扫描视图
• 全局样式的ApplyToDerivedTypes="True"会作用于所有Page派生类，包括ZXingScannerPage
• 调试模式下存在额外的调试渲染逻辑，不会触发该优化导致的层级遮挡问题

内容的提问来源于stack exchange，提问作者Niels R.