Home / Community & Support / Developer Productivity Tools Forums / Silverlight > PanelBar > RadPanelBar tabbing issue

• Sam

  Posted on Nov 2, 2011 (permalink)

  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

  Reply

• Sam

  Posted on Nov 2, 2011 (permalink)

  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}" />

  Reply

• Petar Mladenov Petar Mladenov

  Posted on Nov 7, 2011 (permalink)

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

  Attached files

  • PanelBarSample.zip

  Reply

• Sam

  Posted on Nov 7, 2011 (permalink)

  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
  
  
  

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / Silverlight > PanelBar > RadPanelBar tabbing issue