Xamarin.Forms 使用 Xamarin.Essentials 媒體選擇器
在這篇文章將會逐步說明，如何使用 Xamarin.Essentials 套件提供的 媒體選擇器 功能，幫 Xamarin.Forms 可以製作出可以使用照相機鏡頭的拍照功能。
建立專案
- 開啟 Visual Studio 2019
- 在 [Visual Studio 2019] 對話窗中，選擇 [建立新的專案]
- 在 [建立新專案] 對話窗，選擇 [Prism Blank App (Xamarin.Forms)]
- 點選 [下一步] 按鈕
- 在 [設定新的專案] 對話窗， [專案名稱] 欄位輸入 xfMediaPicker
- 點選 [建立] 按鈕
- 在 [RPISM PROJECT WIZARD] 對話窗內，勾選 [ANDROID] & [iOS]
- 點選 [CREATE PROJECT] 按鈕
加入與更新套件
- 在 [方案總管] 視窗內，展開 Xamarin.Forms 專案節點，也就是 [xfMediaPicker]
- 滑鼠右擊 [相依性節點]，點選 [管理 NuGet 套件]
- 當 [NuGet: xfMediaPicker] 視窗出現後，點選 [瀏覽] 標籤頁次
- 在文字輸入盒內輸入 PropertyChanged.Fody ，搜尋出這個套件
- 點選 [PropertyChanged.Fody] 這個套件，安裝到 Xamarin.Forms 專案內
- 滑鼠右擊 [方案總管] 最上方的節點 [解決方案 xfMediaPicker]
- 點選 [管理方案的 NuGet 套件]
- 當 [NuGet: 解決方案] 視窗出現後，點選 [更新] 標籤頁次
- 點選 [選取所有封裝] ，接著點選 [更新按鈕]
- 將選取套件更新到最新版本
查看 Xamarin.Essentials 媒體選擇器 使用方式
打開 Xamarin.Essentials 媒體選擇器 文件，可以看到這個 Xamarin.Essentials 媒體選擇器 使用說明
Android 專案修正
- 找到 Android 專案 [xfMediaPicker.Android]
- 開啟 [Properties] 資料夾下的 AssemblyInfo.cs 檔案
- 在最後面加入底下宣告
// Add some common permissions, these can be removed if not needed
[assembly: UsesPermission(Android.Manifest.Permission.Internet)]
[assembly: UsesPermission(Android.Manifest.Permission.WriteExternalStorage)]
// Needed for Picking photo/video
[assembly: UsesPermission(Android.Manifest.Permission.ReadExternalStorage)]
// Needed for Taking photo/video
[assembly: UsesPermission(Android.Manifest.Permission.WriteExternalStorage)]
[assembly: UsesPermission(Android.Manifest.Permission.Camera)]
// Add these properties if you would like to filter out devices that do not have cameras, or set to false to make them optional
[assembly: UsesFeature("android.hardware.camera", Required = true)]
[assembly: UsesFeature("android.hardware.camera.autofocus", Required = true)]iOS 專案修正
- 找到 Android 專案 [xfMediaPicker.iOS]
- 滑鼠右擊 [Info.plist] 檔案，選擇 [開啟方式]
- 在 [開啟方式 - Info.plist] 對話窗出現後，選擇 [XML (文字) 編輯器]
- 將底下內容輸入到
</dict>文字前面
<key>NSCameraUsageDescription</key>
<string>This app needs access to the camera to take photos.</string>
<key>NSMicrophoneUsageDescription</key>
<string>This app needs access to microphone for taking videos.</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>This app needs access to the photo gallery for picking photos and videos.</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>This app needs access to photos gallery for picking photos and videos.</string>修正首頁頁面
- 打開 MainPage.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"
x:Class="xfMediaPicker.Views.MainPage"
Title="Xamarin.Essentials 媒體選擇器">
<StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
<Label Text="Welcome to Xamarin Forms and Prism!" />
<Button Text="Take Photo"
Command="{Binding TakePhotoCommand}"/>
<Label Text="{Binding FilePath}"/>
<Image Source="{Binding Photo}"/>
</StackLayout>
</ContentPage>修正首頁 ViewModel
- 打開 MainPageViewModel.cs 檔案
- 將這個檔案內容替換為底下內容
using Prism.Commands;
using System;
namespace xfMediaPicker.ViewModels
{
using System.ComponentModel;
using System.IO;
using System.Threading.Tasks;
using Prism.Navigation;
using Xamarin.Essentials;
using Xamarin.Forms;
public class MainPageViewModel : INotifyPropertyChanged, INavigationAware
{
public event PropertyChangedEventHandler PropertyChanged;
private readonly INavigationService navigationService;
public string FilePath { get; set; }
public ImageSource Photo { get; set; }
public DelegateCommand TakePhotoCommand { get; set; }
public MainPageViewModel(INavigationService navigationService)
{
this.navigationService = navigationService;
TakePhotoCommand = new DelegateCommand(async () =>
{
try
{
FileResult photo = await MediaPicker.CapturePhotoAsync();
await LoadPhotoAsync(photo);
}
catch (Exception ex)
{
Console.WriteLine($"CapturePhotoAsync THREW: {ex.Message}");
}
});
}
async Task LoadPhotoAsync(FileResult photo)
{
// canceled
if (photo == null)
{
FilePath = "";
return;
}
// save the file into local storage
var newFile = Path.Combine(FileSystem.CacheDirectory, "MyPhoto.png");
using (var stream = await photo.OpenReadAsync())
using (var newStream = File.OpenWrite(newFile))
await stream.CopyToAsync(newStream);
File.Delete(photo.FullPath);
FilePath = newFile;
FileResult showFile = new FileResult(FilePath);
Photo = ImageSource.FromStream( () =>
{
Stream stream = showFile.OpenReadAsync().Result;
return stream;
});
}
public void OnNavigatedFrom(INavigationParameters parameters)
{
}
public void OnNavigatedTo(INavigationParameters parameters)
{
}
}
}開始執行這個專案
- 選擇在 Android 模擬器下來執行這個專案
- 當應用程式啟動之後，就會看到底下畫面
- 點選 [TAKE PHOTO] 按鈕
- 將會出現對話窗，詢問是否允許這個應用程式可以允許拍照或者錄影功能
- 點選 [ALLOW] 按鈕
- 現在將會出現底下對話窗，詢問這個應用程式是否可以允許存取圖片、媒體、檔案詢問這個應用程式是否可以允許存取圖片、媒體、檔案
- 點選 [ALLOW] 按鈕
- 現在，先回到 Visual Studio 內，打開 [MainPageViewModel.cs]
- 找到
if (photo == null)這行 - 標示這行為中斷點
- 現在將會看到模擬器出現了模擬的照相功能
- 請點選最下方的 [照相機] 圖示，表示要拍照
- 當出現下圖，點選底下的 [打勾] 按鈕
- 現在程式停在剛剛設定中斷點上
- 現在可以查看 LoadPhotoAsync 方法的參數 photo 的屬性值內容
- 可以看到這次拍照的照片檔案存在在哪裡
- 在我這台電腦上，所拍照的照片將會為這個檔案
/data/user/0/com.companyname.appname/cache/2203693cc04e0be7f4f024d5f9499e13/e5c347e3599d44ddb2f3c0ded01ab830/3fc6f9320d3a49018828d889843a03a7.jpg
- 繼續執行這個專案，將會看到底下畫面
