RadPanelBar tabbing issue

4 posts, 0 answers
  1. Sam
    Sam avatar
    67 posts
    Member since:
    Jun 2011

    Posted 02 Nov 2011 Link to this post

    I'm trying to get the tab sequence right for some controls that are in a RadPanelBar.

    What is happening is that when I tab from the last control of one top-level panel bar item, it takes an extra tab to reach the first control in the next panel bar item.

    After debugging, it looks like the extra tab-stop is actually the second-level panel bar item control, which contains the controls themselves. IsTabStop is set to True on this, if I set the value to False via the debugger then the tab sequence works as expected.

    However the problem here is that I can't access this second-level item in XAML as it created during the layout of the parent control. I really don't know how I can set IsTabStop=False on second-level templates.

    I've already extracted the control templates.

    Can you provide a workaround for this issue?

    Thanks!

    Sam
  2. Sam
    Sam avatar
    67 posts
    Member since:
    Jun 2011

    Posted 02 Nov 2011 Link to this post

    Here is the exact XAML we are using for the base styles, if that helps:

    <!-- Telerik RadPanelBar -->
        <LinearGradientBrush x:Key="ControlItem_Background_Normal" EndPoint="0.5, 1" StartPoint="0.5, 0">
            <GradientStop Color="#FFEBF3FF" Offset="0" />
            <GradientStop Color="#FFD0E8FF" Offset="1" />
            <GradientStop Color="#FFABC9EE" Offset="0.43" />
            <GradientStop Color="#FFC6DFFF" Offset="0.42" />
        </LinearGradientBrush>
     
        <SolidColorBrush x:Key="ControlItem_OuterBorder_Normal" Color="#FF83A5D2" />
     
        <SolidColorBrush x:Key="ControlForeground_Normal" Color="#FF000000" />
     
        <SolidColorBrush x:Key="ControlItem_InnerBorder_Normal" Color="#FFFFFFFF" />
     
        <SolidColorBrush x:Key="ControlItem_OuterBorder_MouseOver" Color="#FFFFC92B" />
     
        <SolidColorBrush x:Key="ControlItem_InnerBorder_MouseOver" Color="#FFFFFFFF" />
     
        <LinearGradientBrush x:Key="ControlItem_Background_MouseOver" EndPoint="0.5, 1" StartPoint="0.5, 0">
            <GradientStop Color="#FFFFFBA3" Offset="1" />
            <GradientStop Color="#FFFFFBDA" Offset="0" />
            <GradientStop Color="#FFFFD25A" Offset="0.43" />
            <GradientStop Color="#FFFEEBAE" Offset="0.42" />
        </LinearGradientBrush>
     
        <SolidColorBrush x:Key="ControlItem_OuterBorder_Selected" Color="#FFFFC92B" />
     
        <LinearGradientBrush x:Key="ControlItem_InnerBorder_Selected" EndPoint="0.5, 1" StartPoint="0.5, 0">
            <GradientStop Color="#FFB69A78" />
            <GradientStop Color="#FFFFE17A" Offset="0.126" />
        </LinearGradientBrush>
     
        <LinearGradientBrush x:Key="ControlItem_Background_Selected" EndPoint="0.5, 1" StartPoint="0.5, 0">
            <GradientStop Color="#FFFFD74E" Offset="0.996" />
            <GradientStop Color="#FFFFDCAB" Offset="0.17" />
            <GradientStop Color="#FFFFB062" Offset="0.57" />
            <GradientStop Color="#FFFFD18F" Offset="0.56" />
            <GradientStop Color="#FFFFBA74"/>
        </LinearGradientBrush>
     
        <SolidColorBrush x:Key="ControlOuterBorder_Disabled" Color="#FF989898" />
     
        <SolidColorBrush x:Key="ControlInnerBorder_Disabled" Color="Transparent" />
     
        <SolidColorBrush x:Key="ControlBackground_Disabled" Color="#FFE0E0E0" />
     
        <SolidColorBrush x:Key="ControlElement_Normal" Color="#FF000000" />
     
        <ControlTemplate x:Key="PanelBarItemTopLevelTemplate" TargetType="telerik:RadPanelBarItem">
            <Grid x:Name="RootElement">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                  
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal" />
     
                        <VisualState x:Name="Disabled">
                            <Storyboard>
                                <DoubleAnimation Duration="0" To="0"
                                    Storyboard.TargetProperty="Opacity" Storyboard.TargetName="NormalVisual" />
     
                                <DoubleAnimation Duration="0" To="1"
                                    Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisual" />
     
                                <DoubleAnimation Duration="0" To="0.5"
                                    Storyboard.TargetProperty="Opacity" Storyboard.TargetName="arrow" />
     
                                <DoubleAnimation Duration="0" To="0.5"
                                    Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Header" />
                            </Storyboard>
                        </VisualState>
     
                        <VisualState x:Name="MouseOver">
                            <Storyboard>
                                <DoubleAnimation Duration="0" To="1"
                                    Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverVisual" />
                            </Storyboard>
                        </VisualState>
     
                        <VisualState x:Name="MouseOut" />
                    </VisualStateGroup>
     
                    <VisualStateGroup x:Name="SelectionStates">
                        <VisualState x:Name="Unselected" />
     
                        <VisualState x:Name="Selected" />
                    </VisualStateGroup>
     
                    <VisualStateGroup x:Name="ExpandStates">
                        <VisualState x:Name="Expanded">
                            <Storyboard>
                                <DoubleAnimation Duration="0" To="180"
                                    Storyboard.TargetProperty="Angle" Storyboard.TargetName="directionRotation" />
     
                                <ObjectAnimationUsingKeyFrames Duration="0"
                                    Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ItemsContainer">
     
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                </ObjectAnimationUsingKeyFrames>
     
                                <DoubleAnimation Duration="0:0:0.2" From="0.0" To="1.0"
                                    Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ItemsContainer" />
                            </Storyboard>
                        </VisualState>
     
                        <VisualState x:Name="Collapsed" />
                    </VisualStateGroup>
     
                    <VisualStateGroup x:Name="FocusStates">
                        <VisualState x:Name="Focused">
                            <Storyboard>
                                <DoubleAnimation Duration="0" To="1"
                                    Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverVisual" />
                            </Storyboard>
                        </VisualState>
     
                        <VisualState x:Name="Unfocused" />
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
     
                <Grid x:Name="HeaderRow">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
     
                    <Border x:Name="NormalVisual"
                        BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"
                        Grid.ColumnSpan="5">
     
                        <Border BorderBrush="{StaticResource ControlItem_InnerBorder_Normal}"
                            BorderThickness="1" Background="{TemplateBinding Background}"/>
                    </Border>
     
                    <Border x:Name="MouseOverVisual"
                        BorderBrush="{StaticResource ControlItem_OuterBorder_MouseOver}" BorderThickness="1"
                        Grid.ColumnSpan="5" Opacity="0">
     
                        <Border BorderBrush="{StaticResource ControlItem_InnerBorder_MouseOver}"
                            BorderThickness="1" Background="{StaticResource ControlItem_Background_MouseOver}"/>
                    </Border>
     
                    <Border x:Name="SelectVisual"
                        BorderBrush="{StaticResource ControlItem_OuterBorder_Selected}" BorderThickness="1"
                        Grid.ColumnSpan="5" Opacity="0">
     
                        <Border BorderBrush="{StaticResource ControlItem_InnerBorder_Selected}"
                            BorderThickness="1" Background="{StaticResource ControlItem_Background_Selected}"/>
                    </Border>
     
                    <Border x:Name="DisabledVisual"
                        BorderBrush="{StaticResource ControlOuterBorder_Disabled}" BorderThickness="1"
                        Grid.ColumnSpan="5" Opacity="0">
     
                        <Border BorderBrush="{StaticResource ControlInnerBorder_Disabled}"
                            BorderThickness="1" Background="{StaticResource ControlBackground_Disabled}"/>
                    </Border>
     
                    <Path x:Name="arrow" Grid.Column="5" Data="M 1, 1.5 L 4.5, 5 L 8,1.5"
                        HorizontalAlignment="Right" Margin="7 0" Opacity="1" RenderTransformOrigin="0.5 0.5"
                        Stretch="None" Stroke="{StaticResource ControlElement_Normal}"
                        StrokeThickness="2" VerticalAlignment="Center">
     
                        <Path.RenderTransform>
                            <RotateTransform x:Name="directionRotation" Angle="0" />
                        </Path.RenderTransform>
                    </Path>
                     
                    <ContentPresenter x:Name="Header" Grid.ColumnSpan="4"
                        ContentTemplate="{TemplateBinding HeaderTemplate}"
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                        Margin="{TemplateBinding Padding}"
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                </Grid>
     
                <Grid x:Name="ItemsContainer" Grid.Row="1" Visibility="Collapsed">
                    <telerik:LayoutTransformControl x:Name="transformationRoot">
                        <ItemsPresenter/>
                    </telerik:LayoutTransformControl>
                </Grid>
            </Grid>
        </ControlTemplate>
             
        <ControlTemplate x:Key="PanelBarItemSecondLevelTemplate" TargetType="telerik:RadPanelBarItem">
            <Grid x:Name="RootElement">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
     
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal" />
                        <VisualState x:Name="Disabled" />
                        <VisualState x:Name="MouseOver" />                   
                        <VisualState x:Name="MouseOut" />  
                    </VisualStateGroup>
     
                    <VisualStateGroup x:Name="SelectionStates">
                        <VisualState x:Name="Unselected"/>
                        <VisualState x:Name="Selected" />                     
                    </VisualStateGroup>
     
                    <VisualStateGroup x:Name="ExpandStates">
                        <VisualState x:Name="Expanded">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Duration="0"
                                    Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ItemsContainer">
     
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                </ObjectAnimationUsingKeyFrames>
     
                                <DoubleAnimation Duration="0:0:0.2" From="0.0" To="1.0"
                                    Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ItemsContainer" />
                            </Storyboard>
                        </VisualState>
     
                        <VisualState x:Name="Collapsed"/>
                    </VisualStateGroup>
     
                    <VisualStateGroup x:Name="FocusStates">
                        <VisualState x:Name="Focused" />
                        <VisualState x:Name="Unfocused" />
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
     
                <Grid x:Name="HeaderRow" Background="Transparent">
                    <ContentPresenter x:Name="Header"
                        ContentTemplate="{TemplateBinding HeaderTemplate}"
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                        Margin="{TemplateBinding Padding}"
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                </Grid>
     
                <Grid x:Name="ItemsContainer" Grid.Row="1" Visibility="Collapsed">
                    <ItemsPresenter />
                </Grid>
            </Grid>
        </ControlTemplate>
     
        <Style x:Key="BasePanelBarItemStyle" TargetType="telerik:RadPanelBarItem">
            <Setter Property="Background" Value="{StaticResource ControlItem_Background_Normal}" />
            <Setter Property="BorderBrush" Value="{StaticResource ControlItem_OuterBorder_Normal}" />
            <Setter Property="Foreground" Value="{StaticResource ControlForeground_Normal}" />
            <Setter Property="Template" Value="{StaticResource PanelBarItemTopLevelTemplate}" />
            <Setter Property="ChildItemsTemplate" Value="{StaticResource PanelBarItemSecondLevelTemplate}" />
        </Style>
     
        <Style TargetType="telerik:RadPanelBarItem" BasedOn="{StaticResource BasePanelBarItemStyle}" />
  3. DevCraft banner
  4. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 07 Nov 2011 Link to this post

    Hi Sam,

     Unfortunately, setting the IsTabStop on a different PanelBar levels cannot be implemented by just editing the default Style of the PanelBarItem. The key moment is that there is ChildItemsTemplate but there isn't "ChildItemsStyle" in Silverlight. I prepared a project for you that demonstrates how to bind the IstabStob property of the PanelBarItems in databinding scenarios. Please note that after pressing Tab key on the right TextBox the focus is stolen but it does not go into the Content, you can examine this by playing with TabStop = {true , false} on the child item.
    Please let us know if this satisfies you.

    Regards,
    Petar Mladenov
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  5. Sam
    Sam avatar
    67 posts
    Member since:
    Jun 2011

    Posted 07 Nov 2011 Link to this post

    Thanks Peter.

    This is a useful example, but we're not using data-binding to create the layout in our RadPanelBar scenarios so this approach is quite difficult to implement for us - we would have to rejig all our panel bars to use hierarchical data-binding instead of static declaration in XAML, which is a serious amount of refactoring work to fix a minor issue.

    I was hoping that it would just be a simple tweak to the control templates which wouldn't impact the usages of the control. Maybe this will become easier to fix in future versions of Silverlight and the Telerik framework.

    Thanks for your assistance anyway.

    Sam


Back to Top