RadTabItem InputBindings

1 Answer 24 Views
TabControl
Richard
Top achievements
Rank 2
Veteran
Iron
Iron
Richard asked on 28 Apr 2021, 11:47 AM

Hi

I’m trying to get keyboard shortcuts to work inside several tab items. However, keyboard shortcuts only work after you click on something/anything inside of the tab. Clicking on the Tab header is not enough.

I have tried focusing on the first child in code when the tab is selected but that doesn’t work, it's only after a mouse click inside the tab that it starts to work.

 


<telerik:RadTabItem  Header="Item X"  >

	<telerik:RadTabItem.InputBindings>
		<KeyBinding Key="N" Modifiers="Ctrl" Command="{Binding NewItemXCommand}" />
		<KeyBinding Key="R" Modifiers="Ctrl" Command="{Binding ReloadItemXCommand}" />
	</telerik:RadTabItem.InputBindings>

	<Grid>
		<!-- Content -->
	</Grid>

</telerik:RadTabItem>

<telerik:RadTabItem  Header="Item Y"  >

	<telerik:RadTabItem.InputBindings>
		<KeyBinding Key="N" Modifiers="Ctrl" Command="{Binding NewItemYCommand}" />
		<KeyBinding Key="R" Modifiers="Ctrl" Command="{Binding ReloadItemYCommand}" />
	</telerik:RadTabItem.InputBindings>

	<Grid>
		<!-- Content -->
	</Grid>

</telerik:RadTabItem>

 

Any advice you can offer would be appreciated.

 

Thanks,

Richard

1 Answer, 1 is accepted

Sort by
1
Accepted
Martin Ivanov
Telerik team
answered on 03 May 2021, 06:58 AM

Hello Richard,

In order for the KeyBindings (and also the KeyDown event) to get executed, their owner control (RadTabItem in your case) should have the focus. If I call Focus() on one of the RadTabItems and then press Ctrl+N for example, the corresponding command kicks-in. However, if you focus an element in the content of the selected tab, the key down event won't fire. This is because the RadTabItem's content is shown in a separate visual element and it is not a physical child of the tab item itself. Instead, it is presented in the visual tree of the RadTabControl. 

One way to achieve your requirement is to define the KeyBindings in the InputBindings collection of RadTabControl instead of RadTabItem. However, in this case you will need to provide also a CommandParameter and determine what action to execute in a single command for a key combo. This approach differs than the current one with that you won't have different commands (like NewItemXCommand and NewItemYCommand) but instead you will have one command (for example NewItemCommand) and you can determine which tab is executing it using the SelectedItem of RadTabControl and the CommandParameter of the KeyBinding.

<telerik:RadTabControl x:Name="tabControl">
	<telerik:RadTabControl.InputBindings>
		<KeyBinding Key="N" Modifiers="Ctrl" Command="{Binding NewItemCommand}" CommandParameter="{Binding ElementName=tabControl, Path=SelectedItem.Header}"/>
		<KeyBinding Key="R" Modifiers="Ctrl" Command="{Binding ReloadItemCommand}" CommandParameter="{Binding ElementName=tabControl, Path=SelectedItem.Header}"/>
	</telerik:RadTabControl.InputBindings>
		<telerik:RadTabItem  Header="Item X" />
		<telerik:RadTabItem  Header="Item Y" />
</telerik:RadTabControl>
private void OnNewItemXCommand(object obj)
{
	string tabHeader = (string)obj;
}

I hope this helps.

Regards,
Martin Ivanov
Progress Telerik

Тhe web is about to get a bit better! 

The Progress Hack-For-Good Challenge has started. Learn how to enter and make the web a worthier place: https://progress-worthyweb.devpost.com.

Richard
Top achievements
Rank 2
Veteran
Iron
Iron
commented on 03 May 2021, 01:55 PM

Thanks Martin.

I understand your solution and that will work nicely for me.

Cheers,
Richard
Tags
TabControl
Asked by
Richard
Top achievements
Rank 2
Veteran
Iron
Iron
Answers by
Martin Ivanov
Telerik team
Share this question
or