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;
        } 
}
...

最后但同样重要的是我的视图模型，其中属性“Scanner”和“Overlay”应该绑定到 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 有依赖性。

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

Xamarin.Forms Binding whole view inside a grid

.net

c#

data-binding

xaml

xamarin.forms