ZXing .NET MAUI：如何为条码扫描视图添加自定义边框？

1. 先搭好基础的ZXing扫描环境 #

首先安装NuGet包 ZXing.Net.Maui，然后在XAML里引入命名空间，添加核心的扫描视图：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:zxing="clr-namespace:ZXing.Net.Maui.Controls;assembly=ZXing.Net.Maui"
             x:Class="YourApp.ScannerPage">
    <!-- 用Grid作为根布局，方便层叠元素 -->
    <Grid>
        <!-- ZXing扫描视图，放在底层 -->
        <zxing:CameraBarcodeReaderView x:Name="BarcodeReader"
                                       IsScanning="True"
                                       BarcodesDetected="BarcodeReader_BarcodesDetected"/>
        <!-- 下面加自定义边框和遮罩 -->
    </Grid>
</ContentPage>

后台代码处理条码识别事件：

private void BarcodeReader_BarcodesDetected(object sender, ZXing.Net.Maui.BarcodeDetectionEventArgs e)
{
    var result = e.Results.FirstOrDefault();
    if (result != null)
    {
        MainThread.BeginInvokeOnMainThread(async () =>
        {
            BarcodeReader.IsScanning = false;
            await DisplayAlert("扫描成功", result.Value, "确定");
            BarcodeReader.IsScanning = true;
        });
    }
}

2. 实现自定义扫描边框与遮罩 #

核心思路是用Grid层叠半透明遮罩、扫描框边框和扫描线，把相机画面中间的扫描区域凸显出来。

把下面的代码放到刚才的Grid里，跟ZXing扫描视图同级：

<!-- 半透明遮罩层：中间挖空显示扫描区域 -->
<Grid>
    <!-- 顶部遮罩 -->
    <BoxView Grid.Row="0" BackgroundColor="#80000000"/>
    <!-- 底部遮罩 -->
    <BoxView Grid.Row="2" BackgroundColor="#80000000"/>
    <!-- 左侧遮罩 -->
    <BoxView Grid.Column="0" Grid.Row="1" BackgroundColor="#80000000"/>
    <!-- 右侧遮罩 -->
    <BoxView Grid.Column="2" Grid.Row="1" BackgroundColor="#80000000"/>

    <!-- 扫描框的边框 -->
    <BoxView Grid.Row="1" Grid.Column="1"
             Margin="-10"
             BorderColor="#25D366"
             BorderWidth="2"
             BackgroundColor="Transparent"/>

    <!-- 四个角的高亮块（比单纯边框更醒目） -->
    <!-- 左上角 -->
    <BoxView Grid.Row="1" Grid.Column="1"
             Margin="0,0,0,280"
             WidthRequest="25" HeightRequest="3"
             BackgroundColor="#25D366"
             HorizontalOptions="Start"/>
    <BoxView Grid.Row="1" Grid.Column="1"
             Margin="0,0,0,280"
             WidthRequest="3" HeightRequest="25"
             BackgroundColor="#25D366"
             HorizontalOptions="Start"/>

    <!-- 右上角 -->
    <BoxView Grid.Row="1" Grid.Column="1"
             Margin="280,0,0,280"
             WidthRequest="25" HeightRequest="3"
             BackgroundColor="#25D366"
             HorizontalOptions="End"/>
    <BoxView Grid.Row="1" Grid.Column="1"
             Margin="280,0,0,280"
             WidthRequest="3" HeightRequest="25"
             BackgroundColor="#25D366"
             HorizontalOptions="End"/>

    <!-- 左下角 -->
    <BoxView Grid.Row="1" Grid.Column="1"
             Margin="0,280,0,0"
             WidthRequest="25" HeightRequest="3"
             BackgroundColor="#25D366"
             HorizontalOptions="Start"/>
    <BoxView Grid.Row="1" Grid.Column="1"
             Margin="0,280,0,0"
             WidthRequest="3" HeightRequest="25"
             BackgroundColor="#25D366"
             HorizontalOptions="Start"/>

    <!-- 右下角 -->
    <BoxView Grid.Row="1" Grid.Column="1"
             Margin="280,280,0,0"
             WidthRequest="25" HeightRequest="3"
             BackgroundColor="#25D366"
             HorizontalOptions="End"/>
    <BoxView Grid.Row="1" Grid.Column="1"
             Margin="280,280,0,0"
             WidthRequest="3" HeightRequest="25"
             BackgroundColor="#25D366"
             HorizontalOptions="End"/>

    <!-- 扫描线动画 -->
    <BoxView x:Name="ScanLine"
             Grid.Row="1" Grid.Column="1"
             WidthRequest="260" HeightRequest="3"
             BackgroundColor="#25D366"
             HorizontalOptions="Center"/>
</Grid>

然后在后台代码添加扫描线的动画：

protected override void OnAppearing()
{
    base.OnAppearing();
    _ = StartScanLineAnimation();
}

private async Task StartScanLineAnimation()
{
    while (true)
    {
        // 从扫描框顶部滑到底部
        await ScanLine.TranslateTo(0, 280, 2000);
        // 瞬间回到顶部
        await ScanLine.TranslateTo(0, 0, 0);
    }
}

3. 关键布局与控件说明 #

• Grid：必须用它来实现多层元素的叠加，同时能通过行和列快速划分遮罩区域和扫描框位置
• CameraBarcodeReaderView：ZXing提供的核心扫描控件，负责相机预览和条码识别
• BoxView：万能的轻量级绘图控件，用来做遮罩、边框、角标和扫描线，性能好且易定制
• Animation：给扫描线加平移动画，提升用户体验，让扫描状态更直观

4. 优化建议 #

• 设置扫描区域：让ZXing只识别中间框内的条码，减少误识别，提升效率：

  // 比例值：左、上、宽、高，范围0-1
  BarcodeReader.RegionOfInterest = new Rect(0.25, 0.25, 0.5, 0.5);
  

• 自定义样式：遮罩颜色、边框颜色、扫描线速度都可以根据你的UI需求调整，比如把#25D366换成你需要的颜色
• 适配不同屏幕：可以用OnIdiom或者绑定布局比例，避免固定尺寸在不同设备上显示异常

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