Can Breadcrumb items be bound to commands?

2 posts, 1 answers
  1. Joshua
    Joshua avatar
    4 posts
    Member since:
    Oct 2017

    Posted 30 Mar 2018 Link to this post

    Hi, I have not been able to find documentation yet on how to handle events generated by the RadBreadcrumb control, can you point me at the docs?  I would really like to bind inidividual 'crumbs' to an ICommand using MVVM. (the same way I would bind a button's Command property to an ICommand)  If that's not possible, is there anything else I can do to bind to this control, or do I have to use the events?

  2. Answer
    Dilyan Traykov
    Admin
    Dilyan Traykov avatar
    1031 posts

    Posted 03 Apr 2018 Link to this post

    Hello Joshua,

    When you need to bind events to command in your viewmodel following the MVVM pattern, you can use the EventToCommandBehavior helper class. Here's how you can set it up in this case:

    <telerik:RadBreadcrumb>
        <telerik:EventToCommandBehavior.EventBindings>
            <telerik:EventBinding EventName="MouseLeftButtonDown" Command="{Binding ClickCommand}" PassEventArgsToCommand="True" RaiseOnHandledEvents="True" />
        </telerik:EventToCommandBehavior.EventBindings>
        <!-- ... -->
    </telerik:RadBreadcrumb>

    Note that the MouseLeftButtonDown event is handled internally, you need to set the RaiseOnHandledEvents property of the EventBinding to True.

    In addition, you will probably require the event arguments in your command's logic. This is where the PassEventArgsToCommand property comes in handy.

    Here's how you can get the item that has been clicked:

    public class MainWindowViewModel : ViewModelBase
    {
        public ICommand ClickCommand { get; set; }
     
        public MainWindowViewModel()
        {
            this.ClickCommand = new DelegateCommand(OnClick);
        }
     
        private void OnClick(object obj)
        {
            var args = obj as MouseButtonEventArgs;
            var source = args.OriginalSource as FrameworkElement;
            var item = source.ParentOfType<RadBreadcrumbBarItem>();
            if (item != null)
            {
                Debug.WriteLine(item.Header);
            }
        }
    }

    For your convenience, I'm also attaching a sample project with the implementation.

    I hope you find all of this helpful. Should any further questions or concerns arise, please let me know.

    Regards,
    Dilyan Traykov
    Progress Telerik
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
Back to Top