TabOrder inside of Telerik:HeaderedContentControl

[Rob]

I am having some trouble with the HeaderedContentControl.  When I place several items inside the "Content" of this control, the Tab Order seems to work properly, however before moving to the next HeaderContentControl, the focus is dissappearing from sight and I need to tab twice.  Any idea where the focus is going?  I've attached a sample project demonstrating my problem.

<

UserControl.Resources>

 

 

<Style x:Key="DetailField" TargetType="telerik:HeaderedContentControl">

 

 

<Setter Property="Background" Value="Transparent"/>

 

 

<Setter Property="Foreground" Value="#FF002D62"/>

 

 

<Setter Property="FontFamily" Value="Portable User Interface" />

 

 

<Setter Property="FontSize" Value="10.5" />

 

 

<Setter Property="Padding" Value="5,2,5,2"/>

 

 

<Setter Property="BorderThickness" Value="0"/>

 

 

<Setter Property="BorderBrush" Value="Transparent" />

 

 

<Setter Property="HorizontalContentAlignment" Value="Stretch" />

 

 

<Setter Property="VerticalContentAlignment" Value="Top" />

 

 

<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>

 

 

<Border Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}">

 

 

<Grid>

 

 

<Grid.RowDefinitions>

 

 

<RowDefinition Height="Auto" />

 

 

</Grid.RowDefinitions>

 

 

<Grid.ColumnDefinitions>

 

 

<ColumnDefinition Width="125" />

 

 

<ColumnDefinition Width="Auto" />

 

 

<ColumnDefinition Width="1*" />

 

 

</Grid.ColumnDefinitions>

 

 

<!-- Label -->

 

 

<ContentPresenter x:Name="HeaderElement" Grid.Row="0" Grid.Column="0" Content="{TemplateBinding Header}" HorizontalAlignment="Right" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="0,4,1,0" ToolTipService.ToolTip="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" IsHitTestVisible="False" />

 

 

 

<!-- Colon -->

 

 

<TextBlock x:Name="ColonElement" Grid.Row="0" Grid.Column="1" Text=":" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="0,4,3,0" IsHitTestVisible="False" />

 

 

 

<!-- Control -->

 

 

<ContentPresenter Grid.Row="0" Grid.Column="2" />

 

 

 

</Grid>

 

 

</Border>

 

 

<Border x:Name="FocusVisualElement" IsHitTestVisible="False" Visibility="Collapsed" Opacity="0" Height="0" Width="0" />

 

 

</Grid>

 

 

</ControlTemplate>

 

 

</Setter.Value>

 

 

</Setter>

 

 

</Style>

 

 

<Style x:Key="DetailSection" TargetType="telerik:HeaderedContentControl">

 

 

<Setter Property="Background" Value="#FFFFFFFF"/>

 

 

<Setter Property="Foreground" Value="#FF002D62"/>

 

 

<Setter Property="FontFamily" Value="Portable User Interface" />

 

 

<Setter Property="FontSize" Value="10.5" />

 

 

<Setter Property="Padding" Value="5,2,5,2"/>

 

 

<Setter Property="BorderThickness" Value="0"/>

 

 

<Setter Property="BorderBrush" Value="Transparent" />

 

 

<Setter Property="HorizontalContentAlignment" Value="Stretch" />

 

 

<Setter Property="VerticalContentAlignment" Value="Top" />

 

 

<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>

 

 

<Border Grid.Row="0" Grid.RowSpan="2" Grid.Column="0" Grid.ColumnSpan="1" CornerRadius="5,5,5,5" Margin="10,10,10,10" Padding="5,5,5,5" BorderThickness="0" BorderBrush="Transparent">

 

 

<Border.Background>

 

 

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

 

 

<GradientStop Color="#FFEAEAEA" Offset="1"/>

 

 

<GradientStop Color="#FFF7F7F7"/>

 

 

</LinearGradientBrush>

 

 

</Border.Background>

 

 

<Grid>

 

 

<Grid.RowDefinitions>

 

 

<RowDefinition Height="Auto" />

 

 

<RowDefinition Height="1*" />

 

 

</Grid.RowDefinitions>

 

 

<Grid.ColumnDefinitions>

 

 

<ColumnDefinition Width="1*" />

 

 

</Grid.ColumnDefinitions>

 

 

<Border Grid.Row="0" Grid.Column="0" Margin="0,3,0,3" BorderBrush="#FF002D62" BorderThickness="0,0,0,2">

 

 

<ContentPresenter x:Name="HeaderElement" Grid.Row="0" Grid.Column="0" Content="{TemplateBinding Header}" HorizontalAlignment="Stretch" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" ToolTipService.ToolTip="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" IsHitTestVisible="False" />

 

 

</Border>

 

 

<ContentPresenter Grid.Row="1" Grid.Column="0" />

 

 

 

</Grid>

 

 

 

</Border>

 

 

<Border x:Name="FocusVisualElement" IsHitTestVisible="False" Visibility="Collapsed" Opacity="0" Height="0" Width="0" />

 

 

</Grid>

 

 

</ControlTemplate>

 

 

</Setter.Value>

 

 

</Setter>

 

 

</Style>

 

 

</UserControl.Resources>

 

<

telerik:HeaderedContentControl Header="SECTION HEADER" Style="{StaticResource DetailSection}" >

 

 

 

 

<StackPanel>

 

 

 

 

<!-- Text Box -->

 

 

 

 

<telerik:HeaderedContentControl Header="FieldCaption" Style="{StaticResource DetailField}" >

 

 

 

 

<StackPanel>

 

 

 

 

<TextBox Text="Text Box 1" Height="24" />

 

 

 

 

<TextBox Text="Text Box 2" Height="24" />

 

 

 

 

<TextBox Text="Text Box 3" Height="24" />

 

 

 

 

</StackPanel>

 

 

 

 

</telerik:HeaderedContentControl>

 

 

 

 

<!-- Text Area -->

 

 

 

 

<telerik:HeaderedContentControl Header="FieldCaption" Style="{StaticResource DetailField}" >

 

 

 

 

<TextBox Text="Text Area" Height="100" AcceptsReturn="True" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible" />

 

 

 

 

</telerik:HeaderedContentControl>

 

 

 

 

<!-- ComboBox -->

 

 

 

 

<telerik:HeaderedContentControl Header="FieldCaption" Style="{StaticResource DetailField}" >

 

 

 

 

<ComboBox x:Name="cbox" Height="24" />

 

 

 

 

</telerik:HeaderedContentControl>

 

 

 

 

</StackPanel>

 

 

 

 

</telerik:HeaderedContentControl>

 

[Hristo]

Hi Rob,

In your project you have HeaderedContentControl inside other HeaderedContentControl. When using Tab key you are moving the focus from one element to the next element. But when leaving the first HeaderedContentControl you focus the next HeaderedContentControl and on second Tab then focus moves to the content of the HeaderedContentControl. This is why you need to hit Tab twice when moving from one HeaderedContentControl to another.
In WPF you can set the TabIndex property and when hitting Tab key focus will move from the element with TabIndex=0 to the element with next TabIndex but unfortunately this is not working in Silverlight 2.

We will try to find some workaround of this limitation.

Best wishes,
Hristo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.