Navigation hierarchy Item Shortcut ???

[Psyduck]

Hello.

 

I'm trying to use a shortcut key for an item in the navigation child.

It was successful until the view was opened by generating a command by receiving a gesture by key binding.

However, it is not a choice for navigation items.

I set the navigation index, but it didn't work.

Is there a way to open the upper layer and select the lower layer?

 

Thanks.

[Martin Ivanov]

Hello KIM,

Can you show me how you implemented the shortcut keys navigation? Also, can you tell me what keys do you use? 

As for your questions, if by upper layer you mean the root level of items, you should be able to do this with the IsExpanded property of the corresponding RadNavigationViewItem. To select an item, you can set its IsSelected property or assign the item the SelectedItem property of RadNavigationView. 

Regards,
Martin Ivanov
Progress Telerik

[Psyduck]

Hello

Please check the source and image.

 

*.Xaml

<Window.InputBindings>
        <KeyBinding Gesture="Ctrl+1" Command="{Binding Ctrl1Command}" CommandParameter="0"/>
        <KeyBinding Gesture="Ctrl+2" Command="{Binding Ctrl2Command}" CommandParameter="1"/>
        <KeyBinding Gesture="Ctrl+3" Command="{Binding Ctrl3Command}" CommandParameter="2"/>

    </Window.InputBindings>

    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/TelerikNavigation;component/Themes/System.Windows.xaml" />
                <ResourceDictionary Source="pack://application:,,,/TelerikNavigation;component/Themes/Telerik.Windows.Controls.xaml" />
                <ResourceDictionary Source="pack://application:,,,/TelerikNavigation;component/Themes/Telerik.Windows.Controls.Data.xaml" />
                <ResourceDictionary Source="pack://application:,,,/TelerikNavigation;component/Themes/Telerik.Windows.Controls.GridView.xaml" />
                <ResourceDictionary Source="pack://application:,,,/TelerikNavigation;component/Themes/Telerik.Windows.Controls.Input.xaml" />
                <ResourceDictionary Source="pack://application:,,,/TelerikNavigation;component/Themes/Telerik.Windows.Controls.Navigation.xaml" />
            </ResourceDictionary.MergedDictionaries>

            <telerik:StringToGlyphConverter x:Key="StringToGlyphConverter" />
            <telerik:NullToVisibilityConverter x:Key="NullToVisibilityConverter" />
            <Style x:Key="NavigationSubItemStyle" TargetType="telerik:RadNavigationViewItem" BasedOn="{StaticResource RadNavigationViewItemStyle}">
                <Setter Property="FontSize"       Value="14" />
                <Setter Property="Margin"         Value="0,3"/>
            </Style>
        </ResourceDictionary>
    </Window.Resources>

    <Grid>

        <telerik:RadNavigationView Grid.Row="1"
                                   CanKeyboardNavigationSelectItems ="True"
                                   CompactPaneWidth="60"
                                   AutoChangeDisplayMode="False"
                                   DisplayMode="Expanded"
                                   DisplayMemberPath="Title"
                                   PaneHeader    ="Menu"
                                   ItemsSource   ="{Binding Menu}"
                                   SelectedItem  ="{Binding MenuItem,  Mode=TwoWay}"
                                   SelectedIndex ="{Binding MenuIndex, Mode=TwoWay}"
                                   >

            <telerik:RadNavigationView.ItemContainerStyle>
                <Style TargetType="telerik:RadNavigationViewItem" BasedOn="{StaticResource RadNavigationViewItemStyle}">
                    <Setter Property="DisplayMemberPath" Value="Title" />
                    <Setter Property="FontSize"        Value="17" />
                    <Setter Property="Margin"          Value="0,3"/>
                    <Setter Property="BorderBrush"     Value="LightGray"/>
                    <Setter Property="BorderThickness" Value="0,1"/>

                    <Setter Property="ItemsSource" Value="{Binding SubItems}" />
                    <Setter Property="ItemContainerStyle" Value="{StaticResource NavigationSubItemStyle}" />
                </Style>
            </telerik:RadNavigationView.ItemContainerStyle>

            <telerik:RadNavigationView.Content>
                <ContentControl Content="{Binding ViewContent, Mode=TwoWay}"/>
            </telerik:RadNavigationView.Content>
        </telerik:RadNavigationView>

    </Grid>

 

 

*.ViewModel, *.Model

public class Base : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        protected virtual void OnPropertyChanged(string propertyName)
            => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        protected bool SetField<T>(ref T field, T newValue = default, [System.Runtime.CompilerServices.CallerMemberName] string propertyName = null)
        {
            field = newValue;
            if (propertyName != null)
            {
                OnPropertyChanged(propertyName);
                return true;
            }
            return false;
        }
    }

    public class QualityControlNavigationItemModel : Base
    {
        public string Title { get; set; }
        public UserControl TypeUserControl { get; set; }
        public ObservableCollection<QualityControlNavigationItemModel> SubItems { get; set; }
    }



    public class MainWindowViewModel : Base
    {
        private ObservableCollection<QualityControlNavigationItemModel> _menu = new ObservableCollection<QualityControlNavigationItemModel>();
        public ObservableCollection<QualityControlNavigationItemModel> Menu
        {
            get => _menu;
            set => SetField(ref _menu, value);
        }

        private QualityControlNavigationItemModel _menuItem;
        public QualityControlNavigationItemModel MenuItem
        {
            get => _menuItem;
            set
            {
                if (value != null)
                {
                    SetField(ref _menuItem, value);
                    ViewContent = value.TypeUserControl;
                }
            }
        }

        private int _menuIndex = 0;
        public int MenuIndex
        {
            get => _menuIndex;
            set => SetField(ref _menuIndex, value);
        }


        private UserControl _viewContent;
        public UserControl ViewContent
        {
            get => _viewContent;
            set => SetField(ref _viewContent, value);
        }

        private UserControlViewer1 UserControlViewer1 { get; set; } = new UserControlViewer1();
        private UserControlViewer2 UserControlViewer2 { get; set; } = new UserControlViewer2();
        private UserControlViewer3 UserControlViewer3 { get; set; } = new UserControlViewer3();


        public RelayCommand Ctrl1Command { get; private set; }
        public RelayCommand Ctrl2Command { get; private set; }
        public RelayCommand Ctrl3Command { get; private set; }


        public MainWindowViewModel()
        {
            MenuSet();

            Ctrl1Command = new RelayCommand(Ctrl1);
            Ctrl2Command = new RelayCommand(Ctrl2);
            Ctrl3Command = new RelayCommand(Ctrl3);

        }

        private void MenuSet()
        {
            Menu.Add(new QualityControlNavigationItemModel
            {
                Title           = "Viewer1",
                TypeUserControl = UserControlViewer1,
            });

            Menu.Add(new QualityControlNavigationItemModel
            {
                Title    = "Hierarchy",
                SubItems = new ObservableCollection<QualityControlNavigationItemModel>
                {
                    new QualityControlNavigationItemModel
                    {
                        Title           = "Viewer2",
                        TypeUserControl = UserControlViewer2,
                    },
                    new QualityControlNavigationItemModel
                    {
                        Title           = "Viewer3",
                        TypeUserControl = UserControlViewer3,
                    },
                }
            });
        }

        private void Ctrl1(object obj)
        {
            MenuIndex = Convert.ToInt32(obj);
            ViewContent = UserControlViewer1;
        }
        private void Ctrl2(object obj)
        {
            MenuIndex = Convert.ToInt32(obj);
            ViewContent = UserControlViewer2;
        }
        private void Ctrl3(object obj)
        {
            MenuIndex = Convert.ToInt32(obj);
            ViewContent = UserControlViewer3;
        }

    }

 

"Ctrl + 1" : Menu Item works normally.

"Ctrl + 2" is index =1 , The second menu "Hierarchy" is selected and the View2 screen is displayed.

"Ctrl + 2", "Ctrl + 3" Menu Child Item don't work.

 

 

 

Thanks.

[Martin Ivanov]

Hello KIM,

The SelectedIndex property works only for the root items in the RadNavigationView control. To achieve your requirement you can set the SelectedItem property instead. I've updated your example to show this approach. Can you please give it a try and let me know if it helps?

Regards,
Martin Ivanov
Progress Telerik

[Psyduck]

Thank you. This works fine. It's a pity that it only works on root items.

 

I have a question.

You used the DelegateCommand in your source.

Is it the same as the source below?

If it is the same, is it okay to use Telerik.Windows.Controls DelegateCommand?

public class RelayCommand : ICommand
    {
        readonly Action<object> executeAction;
        readonly Func<object, bool> canExecute;

        public RelayCommand(Action<object> executeAction) : this(executeAction, null) { }
        public RelayCommand(Action<object> executeAction, Func<object, bool> canExecute)
        {
            this.executeAction = executeAction ?? throw new ArgumentNullException("Execute Action was null for ICommanding Operation.");
            this.canExecute = canExecute;
        }

        public event EventHandler CanExecuteChanged
        {
            add { CommandManager.RequerySuggested += value; }
            remove { CommandManager.RequerySuggested -= value; }

        }
        public bool CanExecute(object parameter)
        {
            if (parameter?.ToString().Length == 0) return false;
            bool result = this.canExecute == null ? true : this.canExecute.Invoke(parameter);
            return result;
        }

        public void Execute(object parameter)
        {
            executeAction.Invoke(parameter);
        }
    }

 

 

Is there an ICommand wrapping class using Async?

Thanks.

[Martin Ivanov]

Hello KIM,

Yes, the Telerik DelegateCommand implements the RelayCommand design pattern. The implementation is almost the same as in your RelayCommand with the following differences. The canExecute parameter of the class constructor is not a Func<object>, but a Predicate<object>. And the DelegateCommand doesn't subscribe to the CommandManager.RequerySuggested event. Instead it exposes a InvalidateCanExecute() method which should be called manually in case you want to invalidate the CanExecute handler.

There is no async command in the Telerik suite.

I hope this information helps.

Regards,
Martin Ivanov
Progress Telerik