如何在使用Project Reunion模板的WinUI 3.0桌面应用中添加相机功能

问题根因 #

你用到的CameraCaptureUI、Windows.UI.Xaml.Controls.CaptureElement均为UWP专属API，WinUI 3（原Project Reunion）桌面应用的运行环境不支持这类UWP独有界面组件，所以调用会抛出异常。

可行实现方案 #

WinUI 3提供了原生的Microsoft.UI.Xaml.Controls.CaptureElement组件，搭配MediaCaptureAPI即可实现拍照保存需求，具体操作步骤如下：

1. 配置应用权限 #

打开项目中的Package.appxmanifest文件，切换到「功能」标签页，勾选以下权限：

• 网络摄像头
• 图片库（如果需要将拍摄的照片保存到系统图片库）

2. 编写页面XAML #

在需要实现拍照功能的页面中加入预览控件和触发按钮：

<StackPanel Spacing="10">
    <!-- WinUI 3原生CaptureElement，注意命名空间为Microsoft.UI.Xaml.Controls -->
    <CaptureElement x:Name="PhotoCaptureElement" Width="640" Height="480"/>
    <Button x:Name="CaptureBtn" Content="拍摄照片" Click="CaptureBtn_Click"/>
</StackPanel>

3. 实现拍照逻辑 #

页面后台代码示例如下：

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Windows.Media.Capture;
using Windows.Media.MediaProperties;
using Windows.Storage;
using System;

public sealed partial class PhotoCapturePage : Page
{
    private MediaCapture _mediaCapture;
    private bool _isPreviewing = false;

    public PhotoCapturePage()
    {
        this.InitializeComponent();
        this.Loaded += PhotoCapturePage_Loaded;
        this.Unloaded += PhotoCapturePage_Unloaded;
    }

    private async void PhotoCapturePage_Loaded(object sender, RoutedEventArgs e)
    {
        _mediaCapture = new MediaCapture();
        await _mediaCapture.InitializeAsync();
        
        // 启动摄像头预览
        PhotoCaptureElement.Source = _mediaCapture;
        await _mediaCapture.StartPreviewAsync();
        _isPreviewing = true;
    }

    private async void CaptureBtn_Click(object sender, RoutedEventArgs e)
    {
        // 创建保存文件，默认存到应用本地目录，可自行修改存储路径
        StorageFile photoFile = await ApplicationData.Current.LocalFolder.CreateFileAsync("CapturedPhoto.jpg", CreationCollisionOption.GenerateUniqueName);
        // 拍摄照片并保存到文件
        await _mediaCapture.CapturePhotoToStorageFileAsync(ImageEncodingProperties.CreateJpeg(), photoFile);
        // 此处可添加保存成功后的自定义逻辑，比如显示缩略图、跳转到预览页等
    }

    private async void PhotoCapturePage_Unloaded(object sender, RoutedEventArgs e)
    {
        // 页面销毁时清理摄像头资源
        if (_isPreviewing)
        {
            await _mediaCapture.StopPreviewAsync();
        }
        _mediaCapture.Dispose();
        _mediaCapture = null;
    }
}

注意事项 #

如果你之前引用的是Windows.UI.Xaml.Controls.CaptureElement，务必替换为Microsoft.UI.Xaml.Controls命名空间下的同名组件，否则会出现不兼容问题。

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