Hightlighting items in RadPanelBar by tabbing to item

[Robert]

Hi,

I'm trying to figure out how to have individual RadPanelBarItems have their background colors changed when a user tabs through the RadPanelBar.  Currently when a user selects (left mouse click) a specific RadPanelBarItem, the color changes to orange (the default color); I want to be able to do the same if the user tabs to the item as well. The usage of IsTabStop and TabStop does not seem to work; I could perhaps be setting it incorrectly.   The following is a code snippet of xaml implementation:


 <telerikNavigation:RadPanelBar IsTabStop="True" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" VerticalAlignment="Stretch" x:Name="SummaryMenu" HorizontalAlignment="Stretch" Margin="0,-1,0,-1">

                    <telerikNavigation:RadPanelBar.Background>
                        <ImageBrush ImageSource="pack://application:,,,/Resources/Images/Left-Menu-Back.png" />
                    </telerikNavigation:RadPanelBar.Background>


                    <telerikNavigation:RadPanelBarItem IsExpanded="True" IsTabStop="True" BorderThickness="0">
                            <telerikNavigation:RadPanelBarItem.Header>
                                <TextBlock Text="VIEWS" Style="{StaticResource SmallMenuHeaderIconLabel}" />
                            </telerikNavigation:RadPanelBarItem.Header>

                        <telerikNavigation:RadPanelBarItem IsTabStop="True" TabIndex="1"  MouseLeftButtonDown="SummaryMenuDockingItemLeftButtonDownClick" MouseLeftButtonUp="SummaryMenuDockingItemLeftButtonUpClick" Keyboard.KeyUp="OnKeyPressEnterViewsMenuItem" Tag="MainViewLogicalConfiguration" IsSelected="True">
                                <telerikNavigation:RadPanelBarItem.Header>
                                    <StackPanel Orientation="Vertical">
                                        <Image Source="/Resources/Images/MenuIcons/MainView.png" ToolTip="Main" Style="{StaticResource SmallMenuIcon}"/>
                                        <TextBlock Text="Main" Style="{StaticResource SmallMenuIconLabel}" />
                                    </StackPanel>
                                </telerikNavigation:RadPanelBarItem.Header>
                            </telerikNavigation:RadPanelBarItem>

                        <telerikNavigation:RadPanelBarItem IsTabStop="True" TabIndex="2" MouseLeftButtonDown="SummaryMenuDockingItemLeftButtonDownClick" MouseLeftButtonUp="SummaryMenuDockingItemLeftButtonUpClick" Keyboard.KeyUp="OnKeyPressEnterViewsMenuItem" Tag="PhysicalLayout" >
                                <telerikNavigation:RadPanelBarItem.Header>
                                    <StackPanel Orientation="Vertical">
                                        <Image Source="/Resources/Images/MenuIcons/Physical-Configuration.png" ToolTip="Physical Configuration" Style="{StaticResource SmallMenuIcon}"/>
                                        <TextBlock Text="Physical Configuration" Style="{StaticResource SmallMenuIconLabel}" />
                                    </StackPanel>
                                </telerikNavigation:RadPanelBarItem.Header>
                            </telerikNavigation:RadPanelBarItem>
                        ......
                        ......
               </<telerikNavigation:RadPanelBar>

Thanks for the help,
Robert Quan

[Hristo]

Hi Robert,

By default RadPanelBar style (i.e. RadPanelBarItem style) contains a VisualState section containing the logic about visual behavior when item is selected, expanded, focused and so on. When item is clicked with the left mouse button it is selected and the corresponding selected visual state is triggered. In the selected visual state the selection visual is made visible and displayed to the user (the orange rectangle).

First approach would be to programmatically select the item when it is focused (when user presses tab and the focus moves to the item).
Furthermore, if you want to change the default color, you could customize the default visual states and control template. You could use the following article for reference: http://www.telerik.com/help/silverlight/common-styling-appearance-edit-control-templates-blend.html .

Another approach would be to edit the control template and visual states by showing the selection visual (or another element) in the focused state. Thus the item will look as if it is selected.

Hope this helps. Please let us know if you need more info.

Regards,
Hristo
Telerik

[Robert]

Hi Hristo,

Thank you for the response.  Per your suggestion I added a GotFocus event handler in the individual RadPanelBarItems to catch the tab event.  In the event handler, I  set the item's IsSelected flag to true and it solved the problem.

Thanks again,
Robert