Xamarin.Forms 在网格内绑定整个视图

Question

我目前正在 Xamarin.Forms XAML 中训练一些绑定和 MVVM。 我有一个带有网格的视图，我想将整个视图作为一个孩子绑定到它。

此外，我正在使用 ZXing.Net.Mobile.Forms 和他们想要显示的视图。

以编程方式没有问题 grid.Children.Add(MyView);

但是如何使用 XAML 中的绑定实现相同的结果？

提前致谢！

视图应绑定到的我的 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="ZxingNetMobileTemplate.ScannerView">
    <Grid BindingContext="{Binding .}" x:Name="test">
        
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="*" ></RowDefinition>
        </Grid.RowDefinitions>
        
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        
        <StackLayout Orientation="Horizontal">
            <Image Source="{Binding ImgSource}" HeightRequest="30" WidthRequest="30" HorizontalOptions="End" VerticalOptions="Start">
                <Image.GestureRecognizers>
                    <TapGestureRecognizer Tapped="OnTorchTapped"></TapGestureRecognizer>
                </Image.GestureRecognizers>
            </Image>
        </StackLayout>         
    </Grid>       
</ContentPage>

我的 Xaml.cs 和视图模型：

 public partial class ScannerView : ContentPage
    {
        public CameraViewModel CameraViewModel { get; private set; }

        public ScannerView(IEnumerable<BarcodeFormat> formats = null)
        {
            InitializeComponent();
            BindingContext = CameraViewModel is null ? CameraViewModel = new CameraViewModel(formats) : CameraViewModel;
        }

        protected override void OnAppearing()
        {
            base.OnAppearing();
            CameraViewModel.ScanAsync();
            //test.Children.Add(CameraViewModel.Scanner);
            //test.Children.Add(CameraViewModel.Overlay);
            SubscribeScanResult();
            CameraViewModel.Scanner.IsAnalyzing = true;
            CameraViewModel.Scanner.IsScanning = true;
        } 
}
... 

最后但并非最不重要的是我的视图模型，其中属性“扫描仪”和“覆盖”应绑定到 xaml

  public class CameraViewModel
    {
        public ZXingScannerView Scanner { get; private set; }
        public ZXingDefaultOverlay Overlay { get; private set; }
        public IEnumerable<BarcodeFormat> CustomFormats { get; private set; }
        public string ImgSource => Device.RuntimePlatform == Device.Android ? "thunder.png" : "Images/thunder.png";

        public CameraViewModel(IEnumerable<BarcodeFormat> formats)
        {
            CustomFormats = formats;
        }
...
}

Answer 1

像这样自定义“网格”

XAML

<ContentView
  ....>
  <ContentView.Content>
     <Grid x:Name="Grid">
         .... here is your default content
     </Grid>
   </ContentView.Content>
</ContentView>

.cs

[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class View1 : ContentView
{
      public static readonly BindableProperty CustomViewProperty = BindableProperty.Create(nameof(CustomView), typeof(View), typeof(View1), null, propertyChanged: OnCustomViewChanged);
    
      public View1()
      {
         InitializeComponent();
      }
    
      public View CustomView
      {
          get { return (View)GetValue(CustomViewProperty); }
          set { SetValue(CustomViewProperty, value); }
      }
    
      static void OnCustomViewChanged(BindableObject bindable, object oldValue, object newValue)
      {
          //x:name Grid xaml
          //not sure if you want to clear grid before add new control
          //((View1)bindable).Grid.Children.Clear();
    
          ((View1)bindable).Grid.Children.Add((View)newValue);
      }
}

然后在您的 Xaml 而不是 Grid 中使用 View1（在我的情况下，请选择一些更好的名称 :)）。

//not sure if you want to bind Scanner property
<?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="ZxingNetMobileTemplate.ScannerView">
    <View1 CustomView="{Binding Scanner}">   
</ContentPage>

注意：拥有包含视图的 ViewModel 不是一个好习惯。想象一下，你想在不同的应用程序中使用这个 ViewModel，比如说 WPF。你不能，因为对 Zxing 有依赖。