Trying to create a control template that inherits parent class and calls?

Question

Hello everyone,I am trying to make a template for a form on my Xamarin.Forms project. I want to use a SyncFusion Carousel control, and since I reuse it on a number of forms, I would like to make a xaml view that I can just instantiate on the target form saving from having to recreate the control every time. Here is the problem, I have TapGestureRecognizers and several other Data objects that get passed to this control. Here are the samples of how it gets implemented as this time. .... .... What I would like to do is this.TemplateCarouselView.xaml The problems I have are thus. Can this implementation inherit the ViewModel within the template? or do I need to create BindableProperty elements for each then {Binding Path=xxx} The implementation for the OnTapped is not handing off to the TapGestureRecognizer I cannot figure out how to overload the incoming property to be accepted by the xaml implementation. Each instance that implements this View needs to have it's own overloaded OnTapped function, so I cannot just make it an internal call within the TemplateView. Can I make this template use it's own internal ViewModel while still being able to inherit the parent forms ViewModel?Can I use this type of a template to make a `CardView`, defining custom cards in this manner then creating an `ObservableCollection()` Thank you for any ideas or pointers! Cheers!Jesse

Jesse Knott · Answer

Hello everyone,I am trying to make a template for a form on my Xamarin.Forms project. I want to use a SyncFusion Carousel control, and since I reuse it on a number of forms, I would like to make a xaml view that I can just instantiate on the target form saving from having to recreate the control every time. Here is the problem, I have TapGestureRecognizers and several other Data objects that get passed to this control. Here are the samples of how it gets implemented as this time. .... .... What I would like to do is this.TemplateCarouselView.xaml The problems I have are thus. Can this implementation inherit the ViewModel within the template? or do I need to create BindableProperty elements for each then {Binding Path=xxx} The implementation for the OnTapped is not handing off to the TapGestureRecognizer I cannot figure out how to overload the incoming property to be accepted by the xaml implementation. Each instance that implements this View needs to have it's own overloaded OnTapped function, so I cannot just make it an internal call within the TemplateView. Can I make this template use it's own internal ViewModel while still being able to inherit the parent forms ViewModel?Can I use this type of a template to make a `CardView`, defining custom cards in this manner then creating an `ObservableCollection()` Thank you for any ideas or pointers! Cheers!JesseOkay, I have gotten the page view to work, but I cannot bind to the Tapped event for the TapGestureRecognizer. How can I overload, or Bind to the event handler so I can pass the command over to it?Cheers! Jesse

Jesse Knott · Answer

I got this part done, I was able to do it with creating a bunch of parameters, and creating a base prototype function for the tap handler.

Here is the template class I had to make

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using BoomStick.Models;
using BoomStick.Services;

using Syncfusion.SfCarousel.XForms;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace BoomStick.Views
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class TemplateCarouselView : SfCarousel
    {
        public DataTemplate dt;

        public TemplateCarouselView()
        {
            InitializeComponent();

            dt = new DataTemplate(() =>
            {
                var keyLayout = new StackLayout();

                var bindPhoto = new Binding()
                {
                    Converter = new FillImageFromBytes(),
                    Path = "Image"
                };

                var bindTapped = new Binding()
                {
                    Path = "OnTapped"
                };

                var bindLocalPath = new Binding()
                {
                    Converter = new FillImageFromBytes(),
                    Path = "."
                };

                var tgRec = new TapGestureRecognizer()
                {
                    CommandParameter = bindLocalPath,
                    NumberOfTapsRequired = 1
                };

                tgRec.Tapped += async (s, e) =>
                {
                    var act = await Application.Current.MainPage.DisplayActionSheet(
                                        StringTools.GetStringResource("szPhotoOptions"),
                                        null,
                                        StringTools.GetStringResource("szOK"),
                                        ActionList.ToArray());
                    await TapHandler.ImageTapHandler((Photos)((TappedEventArgs)e).Parameter, act, KeyButton, ParentObject);
                };

                tgRec.SetBinding(TapGestureRecognizer.CommandProperty, bindTapped);
                tgRec.SetBinding(TapGestureRecognizer.CommandParameterProperty, ".");
                keyLayout.GestureRecognizers.Add(tgRec);

                var img = new Image()
                {
                    Aspect = Aspect.AspectFit,
                    HeightRequest = 350,
                    WidthRequest = 250,
                };
                img.SetBinding(Image.SourceProperty, bindPhoto);
                var lblFileName = new Label()
                {
                    HorizontalTextAlignment = TextAlignment.Center,
                };
                lblFileName.SetBinding(Label.TextProperty, "FileName");
                keyLayout.Children.Add(img);
                keyLayout.Children.Add(lblFileName);

                return new ViewCell { View = keyLayout };
            });

            Carousel.ItemTemplate = dt;
        }

        public static readonly BindableProperty ActionListProperty = BindableProperty.Create(nameof(ActionList), typeof(List<string>), typeof(List<string>));

        public List<string> ActionList
        {
            get
            {
                return (List<string>)GetValue(ParentObjectProperty);
            }

            set
            {
                SetValue(ParentObjectProperty, value);
            }
        }

        public static readonly BindableProperty ParentObjectProperty = BindableProperty.Create(nameof(ParentObject), typeof(Object), typeof(Object));

        public Object ParentObject
        {
            get
            {
                return (Object)GetValue(ParentObjectProperty);
            }

            set
            {
                SetValue(ParentObjectProperty, value);
            }
        }

        public static readonly BindableProperty KeyButtonProperty = BindableProperty.Create(nameof(KeyButton), typeof(ImageButton), typeof(ImageButton));

        public ImageButton KeyButton
        {
            get
            {
                return (ImageButton)GetValue(KeyButtonProperty);
            }

            set
            {
                SetValue(KeyButtonProperty, value);
            }
        }
    }
}

I can then instantiate it like this

        <core:TemplateCarouselView
                            x:Name="carousel"
                            ActionList="{Binding Path=ActionList}"
                            KeyButton="{x:Reference KeyImageButton}"
                            ParentObject="{Binding Path=MyClass}" />

It took some time, and I couldn't have done it without some help!

Cheers!

Suganya Sethuraman · Answer

Hi Jesse Knott,Greetings from Syncfusion.We are glad to that you found the solution, please let us know if you need any other assistance.Regards,Suganya Sethuraman.