TabOrder inside of Telerik:HeaderedContentControl

2 posts, 0 answers
  1. Rob
    Rob avatar
    238 posts
    Member since:
    Jan 2009

    Posted 03 Feb 2009 Link to this post

    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>

     

  2. Hristo
    Admin
    Hristo avatar
    832 posts

    Posted 06 Feb 2009 Link to this post

    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.
Back to Top