This is a migrated thread and some comments may be shown as answers.

Keyboard navigation in Backstage

9 Answers 133 Views
RibbonView and RibbonWindow
This is a migrated thread and some comments may be shown as answers.
Ivo
Top achievements
Rank 1
Ivo asked on 20 Oct 2020, 07:57 AM
Hi, i need to understand how to implement following thing. We are unable to navigate with Down key to Exit button in the backstage. I think this is a bug. I do not provide any source because it can be seen also in the example provided by your company (look at the attached picture). When user comes with keyboard to "Help" (look in the picture) he is unable to go down to buttons that are only "command" without anything to show on the right side of the backstage menu. This is a BUG. I should be possible to go there and in the area on the right should not be shown anything

9 Answers, 1 is accepted

Sort by
0
Martin Ivanov
Telerik team
answered on 22 Oct 2020, 04:16 PM

Hello Ivo,

The keyboard navigation in the backstage is actually an ordered selection of the backstage items. This said, if an item selection is disabled the built-in navigation won't work for it. 

Can you tell me how exactly you would expect the backstage navigation to behave when it reaches an unselectable item? 

Regards,
Martin Ivanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Ivo
Top achievements
Rank 1
answered on 23 Oct 2020, 09:13 AM

Hi, the problem is that you connected the keyboard navigation with the property IsSelectable. For me IsSelectable does not mean I cannot visit it with Keyboard Navigation, just that the Item is behaving as a Button.

In the help you write it like this:

IsSelectable: Specifies whether an item can be selected. If you set this property to False, the item will behave like a Button.

When is set the Property to True for all items everything runs perfectly, I can navigate by keyboard to all items but the items that I want to behave as a Button do not behave like that. And this is my problem. And I do not understand what is the reason to exclude the items that act as buttons from keyboard navigation.

My logic is saying: If I have the command hanged on the Item -> Act As Button even if there is a child defined on that item. So enter keyboard event will act as click. In this case I don't need IsSelectable at all (exclude item from keyboard navigation can be done in a different way)

But if you could help me, please define workaround for items that I define as IsSelectable = true (I need to go there with keyboard navigation because for end user is not understandable why it is not possible) and want to behave them as a button. I want to have implemention as small as possible. Keyboard navigation and Shortcuts should work....

Thanks a lot for answering soon

Regards, Ivo

 

0
Martin Ivanov
Telerik team
answered on 26 Oct 2020, 12:21 PM

Hello Ivo,

Thank you for the additional feedback. This makes sense when it comes to user interaction, so we will consider adding some API to allow this without breaking current users that use it in the default way. The current behavior appears because the arrow keys navigation in the context of the ribbon backstage is not the same keyboard navigation as the one described here. The backstage is a RadTabControl implementation which has its own built-in keyboard navigation where arrow press means "select previous or next tab item". With this condition the navigation to selectable items only is meaningful. To achieve your requirement, you can use the PreviewKeyDown event of RadRibbonBackstage and implement custom navigation logic there by selecting/deselecting the selectable items and changing the backgrounds of the unselectable items. I've prepared a small example based on the default Office_Black theme that shows one way to do this. Note that the highlighting approach may differ based on the Telerik theme.

Regards,
Martin Ivanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Ivo
Top achievements
Rank 1
answered on 27 Oct 2020, 08:31 AM
Hi, thank you for the understanding, i'll incorporate it into our product and let you know ...
0
Ivo
Top achievements
Rank 1
answered on 27 Oct 2020, 09:13 AM

Could you make me a favor ... we have app not based on that theme.... can you somehow highlight the lines you have change to default behavior in the xaml for templates? You will be definitely much faster and precise to do it. This process is error prone and i have to apply your changes somewhere else ...

 

Thanks a lot

0
Martin Ivanov
Telerik team
answered on 27 Oct 2020, 12:21 PM

Hello Ivo,

The approach shown in my project doesn't rely on changes in the XAML (the template of the control). If you use one of the other Telerik themes let me know which one it is. Also, if you have customization in the styles/templates of the backstage item controls, share them here. I will check those and see if I can adjust my approach to the corresponding theming.

As a side note, in the project I have an extraction of the ControlTemplate of RadRibbonBackstageItem. I've used this to see the visual states that I need to use in order to animate the navigation and then forgot to remove the template. You do not need this to make the sample app work properly.

Regards,
Martin Ivanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Ivo
Top achievements
Rank 1
answered on 27 Oct 2020, 01:38 PM

Hi Martin,

understood, i'll update you in couple of days ... 

0
Ivo
Top achievements
Rank 1
answered on 30 Oct 2020, 10:33 AM

Hi Martin,

the example, what you sent is not working ... the problem is that PreviewKeyDown or KeyDown (i want to react to Key.Enter) is not working on the BackstageItem itself and Command binding is not working as well. The Key.Enter is caught by Backstage itself and e.Handled is set to false but still not working.

I have paid also Support .. so please provide me something working i would really appreciate it

0
Martin Ivanov
Telerik team
answered on 04 Nov 2020, 09:39 AM

Hello Ivo,

In order to enable the key down events of the RadBackstageItem elements you will need to focus them. Any element in WPF should be focused in order to start the key down event. To achieve your requirement with the custom approach, you can manually focus the corresponding RadBackstageItem when highlighted or selected. For example:

newHighlightedItem.Focus();

I hope this helps.

Note that the suggested approach is merely a customization suggestion which is not supported nor it is well tested. This said, I cannot guarantee that it will work properly in all expected scenarios. If you think that this should be a built-in behavior, can you please log it in the feedback portal?

As a side note, the forums are not included in the paid support package. There is no guarantee that you will receive an answer by the Telerik staff here in the forum. If you want to ensure that you will get an answer and also within a specific timeframe, I would recommend you to use the ticketing system in your telerik.com account.

Regards,
Martin Ivanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
RibbonView and RibbonWindow
Asked by
Ivo
Top achievements
Rank 1
Answers by
Martin Ivanov
Telerik team
Ivo
Top achievements
Rank 1
Share this question
or