Xaml 按钮命令不会触发答案

【问题标题】：Xaml button Command does not fireXaml 按钮命令不会触发
【发布时间】：2021-08-09 16:02:04
【问题描述】：

我正在使用 XamarinCommunityToolKit 中的 CameraView。为什么单击按钮命令“捕获”时不会触发它？是不是因为代码是在模拟器中运行的，而不是在带有真实摄像头的实际手机中？

<?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:xct="http://xamarin.com/schemas/2020/toolkit"
         x:Class="App2.Views.CapturePage">

<StackLayout>

    <xct:CameraView
            x:Name="cameraView"
            CaptureMode="Photo"
            FlashMode="Off"
            HorizontalOptions="FillAndExpand"
            MediaCaptured="CameraView_MediaCaptured"
            OnAvailable="CameraView_OnAvailable"
            VerticalOptions="FillAndExpand" />

    <Button
                x:Name="doCameraThings"
                Command="{Binding CaptureCommand, Source={x:Reference cameraView}}"
                IsEnabled="True"
                Text="Capture" />
    
    <Image
                x:Name="previewPicture"
                Aspect="AspectFit"
                BackgroundColor="LightGray"
                HeightRequest="250"
                IsVisible="False" />

    </StackLayout>
</ContentPage>

ViewModel 看起来像这样：

public class CaptureViewModel : BaseViewModel
{
    public Command CaptureCommand { get; }
   
    public CaptureViewModel()
    {
        CaptureCommand = new Command(CapturePageClicked);
    }

    private async void CapturePageClicked()
    {
        //Some code here
    }
}

【问题讨论】：

你为什么有Source={x:Reference cameraView}？该命令未在cameraView中定义@
我只是从 XamarinCommunityToolKit 示例项目中复制了它。以下是示例中的原样：
他们正在使用 CameraView 中定义的“ShutterCommand”。
我明白了。不幸的是，文档和示例并不清楚如何使用此 CameraView。

标签： c# android xaml xamarin mobile

【解决方案1】：

来自Xamarin Community Toolkit CameraView，CameraView 有一个Icommand ShutterCommand，所以你可以将ShutterCommand 绑定到Button.Command。

 <StackLayout>
        <xct:CameraView
            x:Name="cameraview"
            CaptureMode="Photo"
            FlashMode="On"
            HorizontalOptions="FillAndExpand"
            MediaCaptured="cameraView_MediaCaptured"
            VerticalOptions="FillAndExpand"
            />
        <Button
            x:Name="doCameraThings"
            Command="{Binding ShutterCommand, Source={x:Reference cameraview}}"
            IsEnabled="True"
            Text="Capture" />
      
        <Image
            x:Name="previewPicture"
            Aspect="AspectFit"
            BackgroundColor="LightGray"
            HeightRequest="250"
            IsVisible="False" />
    </StackLayout>

public partial class Page6 : ContentPage
{
    public Page6()
    {
        InitializeComponent();
      
    }     

    private void cameraView_MediaCaptured(object sender, Xamarin.CommunityToolkit.UI.Views.MediaCapturedEventArgs e)
    {
        switch (cameraview.CaptureMode)
        {
            default:
            case CameraCaptureMode.Default:
            case CameraCaptureMode.Photo:
                previewPicture.IsVisible = true;
                previewPicture.Rotation = e.Rotation;
                previewPicture.Source = e.Image;
              
                break;
            case CameraCaptureMode.Video:
                previewPicture.IsVisible = false;
               
                break;
        }
    }
}

但您也可以在 Viewmodel 中将另一个命令绑定到 Button.click。

<xct:CameraView
            x:Name="cameraview"
            CaptureMode="Photo"
            FlashMode="On"
            HorizontalOptions="FillAndExpand"
            MediaCaptured="cameraView_MediaCaptured"
            VerticalOptions="FillAndExpand"
            />
      
        <Button
            x:Name="doCameraThings"
            Command="{Binding CaptureCommand}"
            IsEnabled="True"
            Text="Capture" />

        <Image
            x:Name="previewPicture"
            Aspect="AspectFit"
            BackgroundColor="LightGray"
            HeightRequest="250"
            IsVisible="False" />

  public class CaptureViewModel
{
    public Command CaptureCommand { get; }
    public CaptureViewModel()
    {
        CaptureCommand = new Command(CapturePageClicked);
    }
    private async void CapturePageClicked()
    {

        //Some code here
    }
}

将 ViewModel 绑定到当前页面 BindingContext

 public Page6()
    {
        InitializeComponent();
        this.BindingContext = new CaptureViewModel();
        
    }

关于CameraView的简单示例，大家可以看看：

https://github.com/xamarin/XamarinCommunityToolkit/blob/main/samples/XCT.Sample/Pages/Views/CameraViewPage.xaml

【讨论】：