How to bind command ?

[Pierre]

Hi, I am stuck at:

I can set the SlidingToIndex command, but I can't define the {binding} part like for the RadListview (for exemple: <telerikListViewCommands:ListViewUserCommand Id="ItemTap" Command="{Binding ItemTapCommand}" />)

Any idea?

 

<telerikPrimitives:RadSlideView x:Name="slideView">
    <telerikPrimitives:RadSlideView.ItemsSource>
        <x:Array Type="{x:Type ContentView}">
            <ContentView>
                <telerikInput:RadCalendar Margin="50, 30"/>
            </ContentView>
            <ContentView>
                <Label HorizontalOptions="Center" VerticalOptions="CenterAndExpand" Text="Other View" TextColor="Blue" />
            </ContentView>
            <ContentView>
                <Label HorizontalOptions="Center" VerticalOptions="CenterAndExpand" Text="Another View" TextColor="Red" />
            </ContentView>
        </x:Array>
    </telerikPrimitives:RadSlideView.ItemsSource>
    <telerikPrimitives:RadSlideView.Commands>
        <telerikSlideViewCommands:SlideViewCommand Id="SlidingToIndex" />
    </telerikPrimitives:RadSlideView.Commands>
</telerikPrimitives:RadSlideView>

[Lance | Senior Manager Technical Support]

Hi Pierre,

The SlideViewCommand is not meant to be used in a concrete implementation, which is why it doesn't have a Command/CommandParameter property. Rather it is the base class to extend to be extended. See the Commands documentation for an explanation and example.

Event To Command

If you need a pure MVVM binding, you would be better off using can use a Xamarin.Forms EventToCommandBehavior instead. Go to that article 

Here's an example:

<telerikPrimitives:RadSlideView ItemsSource="{Binding StepItems}">
    <telerikPrimitives:RadSlideView.Behaviors>
        <portable:EventToCommandBehavior EventName="SlidedToIndex" Command="{Binding NextStepShowedCommand}" />
        <portable:EventToCommandBehavior EventName="SlidingToIndex" Command="{Binding NextStepShowingCommand}" />
    </telerikPrimitives:RadSlideView.Behaviors>
</telerikPrimitives:RadSlideView>

public class ViewModel
{
    public ViewModel()
    {
        NextStepShowingCommand = new Command(ExecuteNextStepShowingCommand);
        NextStepShowedCommand = new Command(ExecuteNextStepShowedCommand);
    }

    public ObservableCollection<string> StepItems { get; set; } = new ObservableCollection<string>{"One", "Two", "Three"};

    public Command NextStepShowingCommand { get; set; }

    public Command NextStepShowedCommand { get; set; }

    private void ExecuteNextStepShowingCommand(object obj)
    {
        if (obj is SlideViewSlidingToIndexEventArgs args)
        {
            var index = args.Index;
            //args.Cancel = true;
        }
    }

    private void ExecuteNextStepShowedCommand(object obj)
    {
        if (obj is SlideViewSlidedToIndexEventArgs args)
        {
            var index = args.Index;
        }
    }
}

Note: Visit the linked Xamarin article for the EventToCommandBehavior classes.


Advanced Custom Command

If you can't use a behavior, and must have a view model binding with a base SlideViewCommand, you can add a BindableProperty to your custom SlideViewCommand and invoke the command instead.

Here's an example of such a custom class. You can reuse it for all the commands, as long as you set the CommandID in the XAML when it is instantiated by the XAML parser.

public class MyCustomSlideViewCommand : SlideViewCommand
{
    public static readonly BindableProperty CommandProperty = BindableProperty.Create("Command", typeof(ICommand), typeof(MyCustomSlideViewCommand));

    public ICommand Command
    {
        get => (ICommand)GetValue(CommandProperty);
        set => SetValue(CommandProperty, value);
    }

    public override bool CanExecute(object parameter)
    {
        return true;
    }

    public override void Execute(object parameter)
    {
        if (Command == null)
        {
            base.Execute(parameter);
        }
        else
        {
            Command.Execute(parameter);
        }
    }
}

public class MainViewModel
{
    public MainViewModel()
    {
        SlidingToCommand = new Command(SlidingToIndex);
    }

    public Command SlidingToCommand { get; set; }

    public void SlidingToIndex(object obj)
    {
        if (obj is SlideViewSlidingToIndexCommandContext context)
        {
            var index = context.Index;
            //context.Cancel = true;

            Debug.WriteLine($"SlidingToIndex: {index}");
        }
    }
}

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Name="Page"
             xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:CommandBindingDemo.Portable"
             xmlns:telerikPrimitives="clr-namespace:Telerik.XamarinForms.Primitives;assembly=Telerik.XamarinForms.Primitives"
             xmlns:telerikInput="clr-namespace:Telerik.XamarinForms.Input;assembly=Telerik.XamarinForms.Input"
             x:Class="CommandBindingDemo.Portable.MainPage">

    <ContentPage.BindingContext>
        <local:MainViewModel x:Name="ViewModel"/>
    </ContentPage.BindingContext>

    <telerikPrimitives:RadSlideView x:Name="slideView">
        <telerikPrimitives:RadSlideView.Commands>
            <local:MyCustomSlideViewCommand Id="SlidingToIndex" Command="{Binding BindingContext.SlidingToCommand, Source={x:Reference Page}}"/>
        </telerikPrimitives:RadSlideView.Commands>
        <telerikPrimitives:RadSlideView.ItemsSource>
            <x:Array Type="{x:Type ContentView}">
                <ContentView>
                    <telerikInput:RadCalendar Margin="50, 30" />
                </ContentView>
                <ContentView>
                    <Label HorizontalOptions="Center"
                           VerticalOptions="CenterAndExpand"
                           Text="Other View"
                           TextColor="Blue" />
                </ContentView>
                <ContentView>
                    <Label HorizontalOptions="Center"
                           VerticalOptions="CenterAndExpand"
                           Text="Another View"
                           TextColor="Red" />
                </ContentView>
            </x:Array>
        </telerikPrimitives:RadSlideView.ItemsSource>
    </telerikPrimitives:RadSlideView>
</ContentPage>

Please note the highlighted code above. The BindingContext of the page must be passed to the binding. This is because the Commands property doesn't have scope to the parent's BindingContext.

Demo

Since the blog article from Xamarin already shows how to write an EventToCommandBehavior, I have attached a demo using the extended command option.

I hope this explains the scenario and provides you with enough options to move forward.

Regards,
Lance | Technical Support Engineer, Principal
Progress Telerik

[Pierre]

I use the second option to be more consistent with the lIstView. Thanks.