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
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
3 Answers, 1 is accepted
0
Sam
Top achievements
Rank 1
answered on 03 Nov 2011, 03:43 AM
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}"
/>
0
Hi Sam,
Petar Mladenov
the Telerik team
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.
Petar Mladenov
the Telerik team
Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
0
Sam
Top achievements
Rank 1
answered on 08 Nov 2011, 12:58 AM
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
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