Xamarin.Forms Binding whole view inside a grid

I am currently training a bit of bindings and MVVM in Xamarin.Forms XAML. I have a view with a grid and I want to bind a whole View to it as a child.

Further I am using ZXing.Net.Mobile.Forms and their views, which I want to display.

Programmatically it is no problem with grid.Children.Add(MyView);

But how can I achieve the same result with bindings in XAML?

Thanks in advance!

My Xaml in which the View should be binded to:

<?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>

my Xaml.cs with the viewmodel:

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

and last but not least my viewmodel, where the properties "Scanner" and "Overlay" should be binded into the 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;
        }
...
}

Make custom "Grid" like

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

Then in your Xaml instead of Grid use View1 (in my case, plz pick some nicer name :)).

//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>

Note: It is not a good practice to have ViewModel that contains Views. Imagine that you want to use this ViewModel in a different application, let's say WPF. You can't because there is a dependency on Zxing.

Xamarin.Forms Binding whole view inside a grid

Related

Recent Posts