HeaderedContentControl - TabIndex not working...

[Rob]

I have posted about this issue previously and was told that the problem existed in SL2.  I am wondering if anybody has had any luck with SL3.

I have copied a quick sample project below where I attempt to use both the Telerik HeaderedContentControl and the SL HeaderedContentControl to create a "Label: Control" layout for my application.  Both controls exhibit the same problem.  I am unable to switch focus from one control to the next using the tab key.  Users of the application have remarked on this as a pretty big problem considering there is a fair bit of data entry type screens...  If I press the tab key twice, the focus moves to the next control.  Is there a way to force the tabto work properly?  I'm under the impression that the TabIndex property should fix this but it doesn't seem to work...
    

	<UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
	xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls" xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
	x:Class="SilverlightApplication5.MainControl">
	<UserControl.Resources>
	<Style x:Key="HeaderedContentControlStyle1" TargetType="controls:HeaderedContentControl">
	<Setter Property="Foreground" Value="#FF000000"/>
	<Setter Property="HorizontalContentAlignment" Value="Left"/>
	<Setter Property="VerticalContentAlignment" Value="Center"/>
	<Setter Property="Template">
	<Setter.Value>
	<ControlTemplate TargetType="controls:HeaderedContentControl">
	<StackPanel Orientation="Horizontal" Margin="0,5,0,5">
	<ContentPresenter Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}"/>
	<ContentPresenter Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
	</StackPanel>
	</ControlTemplate>
	</Setter.Value>
	</Setter>
	</Style>
	<SolidColorBrush x:Key="FocusBrush" Color="#ffbd69"/>
	<Style x:Key="HeaderedContentControlStyle2" TargetType="telerik:HeaderedContentControl">
	<Setter Property="Template">
	<Setter.Value>
	<ControlTemplate TargetType="telerik:HeaderedContentControl">
	<Grid>
	<vsm:VisualStateManager.VisualStateGroups>
	<vsm:VisualStateGroup x:Name="CommonStates">
	<vsm:VisualState x:Name="Normal"/>
	<vsm:VisualState x:Name="Disabled"/>
	</vsm:VisualStateGroup>
	<vsm:VisualStateGroup x:Name="FocusStates">
	<vsm:VisualState x:Name="Focused" />
	<vsm:VisualState x:Name="Unfocused"/>
	</vsm:VisualStateGroup>
	</vsm:VisualStateManager.VisualStateGroups>
	<StackPanel Orientation="Horizontal" Margin="0,5,0,5">
	<ContentPresenter x:Name="HeaderElement" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}"/>
	<ContentPresenter/>
	</StackPanel>
	</Grid>
	</ControlTemplate>
	</Setter.Value>
	</Setter>
	</Style>
	</UserControl.Resources>
	<StackPanel x:Name="LayoutRoot" Background="#FFFAFAFA">
	<controls:HeaderedContentControl Style="{StaticResource HeaderedContentControlStyle1}">
	<controls:HeaderedContentControl.Header>
	<TextBlock Text="Label1:" />
	</controls:HeaderedContentControl.Header>
	<TextBox TabIndex="1" Text="Control1" />
	</controls:HeaderedContentControl>
	<controls:HeaderedContentControl Style="{StaticResource HeaderedContentControlStyle1}">
	<controls:HeaderedContentControl.Header>
	<TextBlock Text="Label2:" />
	</controls:HeaderedContentControl.Header>
	<TextBox TabIndex="2" Text="Control2" />
	</controls:HeaderedContentControl>
	<telerik:HeaderedContentControl Style="{StaticResource HeaderedContentControlStyle2}">
	<telerik:HeaderedContentControl.Header>
	<TextBlock Text="Label3:" />
	</telerik:HeaderedContentControl.Header>
	<TextBox TabIndex="3" Text="Control3" />
	</telerik:HeaderedContentControl>
	<telerik:HeaderedContentControl Style="{StaticResource HeaderedContentControlStyle2}">
	<telerik:HeaderedContentControl.Header>
	<TextBlock Text="Label4:" />
	</telerik:HeaderedContentControl.Header>
	<TextBox TabIndex="4" Text="Control4" />
	</telerik:HeaderedContentControl>
	</StackPanel>
	</UserControl>

[Miroslav]

Hi Rob,

Sorry for the delayed reply, we were busy with the SP2 release which will be out soon.

Unfortunately as far as I know there have been no focus/tabbing changes from SL 2 to SL 3.

Normally this beahavior occurs when there is a control that has its IsTabStop enabled to true when it shouldn't. Some controls (like ContentControls) by defautl have this property to true and receive the Tab focus. They have no special visual state and it is hard to realize that this is happening.

To debug this I can suggest: override the KeyDown on the root page and on some key combination Debug.WriteLine() the currently focused item (Which you can get from the FocusManager static class). Once you identify which control takes the focus when it shouldnt (the first of the two tabs), go and set its IsTabStop property to false. Setting this property affects only the given control but NOT its children.

Please note that you will still be able to force focusing the control with control.Focus().

Hopefully this will help you figure what is going on.

Also if you notice any bad behavior during tabbing through a Telerik control, do tell us.

Greetings,

Miroslav
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.