How to bind command ?

3 posts, 1 answers
  1. Pierre
    Pierre avatar
    257 posts
    Member since:
    Apr 2007

    Posted 24 Jan Link to this post

    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>
  2. Answer
    Lance | Technical Support Engineer, Principal
    Admin
    Lance | Technical Support Engineer, Principal avatar
    957 posts

    Posted 24 Jan Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Pierre
    Pierre avatar
    257 posts
    Member since:
    Apr 2007

    Posted 25 Jan Link to this post

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