Home / Community & Support / Developer Productivity Tools Forums / Silverlight > TabControl > Change Tab Background onFocus

• YYZRichard

  Posted on Jan 20, 2012 (permalink)

  I cannot figure out how to change the BACKGROUND of the RadTabItem when the tab is selected.
  
  I've been trying to use FocusVisualStyle, but it doesn't seem to work.
  Can somebody post an example? '
  Thank you
  

  Reply

• Petar Mladenov Petar Mladenov

  Posted on Jan 25, 2012 (permalink)

  Hi YYZRichard,

   A possible solution is to edit the Default Style of the RadTabItem like so:

  <UserControl.Resources>

          <Thickness x:Key="TabItem_OuterBorderThickness">1 1 1 0</Thickness>

          <SolidColorBrush x:Key="ControlForeground_Normal" Color="#FF000000"/>

          <SolidColorBrush x:Key="TabItem_Background_Normal" Color="Transparent"/>

          <SolidColorBrush x:Key="TabItem_OuterBorder_Normal" Color="Transparent"/>

          <SolidColorBrush x:Key="TabItem_InnerBorder_Normal" Color="Transparent"/>

          <Thickness x:Key="TabItem_InnerBorderThickness">1 1 1 0</Thickness>

          <CornerRadius x:Key="TabItem_InnerCornerRadius">2 2 0 0</CornerRadius>

          <CornerRadius x:Key="TabItem_OuterCornerRadius">3 3 0 0</CornerRadius>

          <Thickness x:Key="TabItem_Margin">0 2 0 0</Thickness>

          <SolidColorBrush x:Key="TabItem_OuterBorder_MouseOver" Color="#FF848484"/>

          <LinearGradientBrush x:Key="TabItem_Background_MouseOver" EndPoint="0.5,1" StartPoint="0.5,0">

              <GradientStop Color="#FFFFFBA3" Offset="1"/>

              <GradientStop Color="#FFFFFBDA"/>

          </LinearGradientBrush>

          <SolidColorBrush x:Key="TabItem_InnerBorder_MouseOver" Color="#FFFFFFFF"/>

          <SolidColorBrush x:Key="TabItem_OuterBorder_Selected" Color="#FF848484"/>

          <LinearGradientBrush x:Key="TabItem_Background_Selected" EndPoint="0.5,1" StartPoint="0.5,0">

              <GradientStop Color="White"/>

              <GradientStop Color="#FFFAFAFA" Offset="1"/>

          </LinearGradientBrush>

          <SolidColorBrush x:Key="TabItem_InnerBorder_Selected" Color="#FFFFFFFF"/>

   

          <Thickness x:Key="TabItem_Margin_Selected">0</Thickness>

          <SolidColorBrush x:Key="TabItem_OuterBorder_SelectedMouseOver" Color="#FFFFC92B"/>

          <ControlTemplate x:Key="TabItemTemplate" TargetType="telerik:RadTabItem">

              <Grid x:Name="wrapper">

                  <VisualStateManager.VisualStateGroups>

                      <VisualStateGroup x:Name="CommonStateGroup">

                          <VisualState x:Name="MouseOver">

                              <Storyboard>

                                  <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="MouseOverVisual"/>

                              </Storyboard>

                          </VisualState>

                          <VisualState x:Name="Normal"/>

                          <VisualState x:Name="Selected">

                              <Storyboard>

                                  <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="SelectionVisual"/>

                                  <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="MouseOverVisual"/>

                              </Storyboard>

                          </VisualState>

                          <VisualState x:Name="SelectedMouseOver">

                              <Storyboard>

                                  <DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="MouseOverVisual"/>

                                  <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="SelectionVisual"/>

                                  <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="SelectionVisual">

                                      <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TabItem_OuterBorder_SelectedMouseOver}"/>

                                  </ObjectAnimationUsingKeyFrames>

                              </Storyboard>

                          </VisualState>

                          <VisualState x:Name="Disabled">

                              <Storyboard>

                                  <DoubleAnimation Duration="0:0:0.1" To="0.3" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HeaderElement"/>

                                  <DoubleAnimation Duration="0:0:0.1" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="NormalVisual"/>

                              </Storyboard>

                          </VisualState>

                      </VisualStateGroup>

                      <VisualStateGroup x:Name="PlacementStates">

                          <VisualState x:Name="HorizontalTop"/>

                          <VisualState x:Name="HorizontalLeft">

                              <Storyboard>

                                  <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="LayoutTransform" Storyboard.TargetName="OrientationTransform">

                                      <DiscreteObjectKeyFrame KeyTime="0">

                                          <DiscreteObjectKeyFrame.Value>

                                              <RotateTransform Angle="180"/>

                                          </DiscreteObjectKeyFrame.Value>

                                      </DiscreteObjectKeyFrame>

                                  </ObjectAnimationUsingKeyFrames>

                              </Storyboard>

                          </VisualState>

                          <VisualState x:Name="HorizontalRight"/>

                          <VisualState x:Name="HorizontalBottom">

                              <Storyboard>

                                  <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="LayoutTransform" Storyboard.TargetName="OrientationTransform">

                                      <DiscreteObjectKeyFrame KeyTime="0">

                                          <DiscreteObjectKeyFrame.Value>

                                              <RotateTransform Angle="180"/>

                                          </DiscreteObjectKeyFrame.Value>

                                      </DiscreteObjectKeyFrame>

                                  </ObjectAnimationUsingKeyFrames>

                              </Storyboard>

                          </VisualState>

                          <VisualState x:Name="VerticalTop">

                              <Storyboard>

                                  <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="LayoutTransform" Storyboard.TargetName="OrientationTransform">

                                      <DiscreteObjectKeyFrame KeyTime="0">

                                          <DiscreteObjectKeyFrame.Value>

                                              <RotateTransform Angle="-90"/>

                                          </DiscreteObjectKeyFrame.Value>

                                      </DiscreteObjectKeyFrame>

                                  </ObjectAnimationUsingKeyFrames>

                              </Storyboard>

                          </VisualState>

                          <VisualState x:Name="VerticalLeft">

                              <Storyboard>

                                  <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="LayoutTransform" Storyboard.TargetName="OrientationTransform">

                                      <DiscreteObjectKeyFrame KeyTime="0">

                                          <DiscreteObjectKeyFrame.Value>

                                              <RotateTransform Angle="90"/>

                                          </DiscreteObjectKeyFrame.Value>

                                      </DiscreteObjectKeyFrame>

                                  </ObjectAnimationUsingKeyFrames>

                              </Storyboard>

                          </VisualState>

                          <VisualState x:Name="VerticalRight">

                              <Storyboard>

                                  <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="LayoutTransform" Storyboard.TargetName="OrientationTransform">

                                      <DiscreteObjectKeyFrame KeyTime="0">

                                          <DiscreteObjectKeyFrame.Value>

                                              <RotateTransform Angle="-90"/>

                                          </DiscreteObjectKeyFrame.Value>

                                      </DiscreteObjectKeyFrame>

                                  </ObjectAnimationUsingKeyFrames>

                              </Storyboard>

                          </VisualState>

                          <VisualState x:Name="VerticalBottom">

                              <Storyboard>

                                  <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="LayoutTransform" Storyboard.TargetName="OrientationTransform">

                                      <DiscreteObjectKeyFrame KeyTime="0">

                                          <DiscreteObjectKeyFrame.Value>

                                              <RotateTransform Angle="-90"/>

                                          </DiscreteObjectKeyFrame.Value>

                                      </DiscreteObjectKeyFrame>

                                  </ObjectAnimationUsingKeyFrames>

                              </Storyboard>

                          </VisualState>

                      </VisualStateGroup>

                      <VisualStateGroup x:Name="FocusStates">

                          <VisualState x:Name="Unfocused"/>

                          <VisualState x:Name="Focused"/>

                      </VisualStateGroup>

                  </VisualStateManager.VisualStateGroups>

                  <Border x:Name="NormalVisual" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="{StaticResource TabItem_OuterCornerRadius}" Margin="{StaticResource TabItem_Margin}">

                      <Border BorderBrush="{StaticResource TabItem_InnerBorder_Normal}" BorderThickness="{StaticResource TabItem_InnerBorderThickness}" CornerRadius="{StaticResource TabItem_InnerCornerRadius}"/>

                  </Border>

                  <Border x:Name="MouseOverVisual" BorderBrush="{StaticResource TabItem_OuterBorder_MouseOver}" BorderThickness="{StaticResource TabItem_OuterBorderThickness}" Background="{StaticResource TabItem_Background_MouseOver}" CornerRadius="{StaticResource TabItem_OuterCornerRadius}" Margin="{StaticResource TabItem_Margin}" Opacity="0">

                      <Border BorderBrush="{StaticResource TabItem_InnerBorder_MouseOver}" BorderThickness="{StaticResource TabItem_InnerBorderThickness}" CornerRadius="{StaticResource TabItem_InnerCornerRadius}"/>

                  </Border>

                  <Border x:Name="SelectionVisual" BorderBrush="{StaticResource TabItem_OuterBorder_Selected}" BorderThickness="{StaticResource TabItem_OuterBorderThickness}" Background="{StaticResource TabItem_Background_Selected}" CornerRadius="{StaticResource TabItem_OuterCornerRadius}" Margin="{StaticResource TabItem_Margin_Selected}" Opacity="0">

                      <Border BorderBrush="{StaticResource TabItem_InnerBorder_Selected}" Background="DeepSkyBlue" BorderThickness="{StaticResource TabItem_InnerBorderThickness}" CornerRadius="{StaticResource TabItem_InnerCornerRadius}"/>

                  </Border>

                  <telerik:LayoutTransformControl x:Name="OrientationTransform">

                      <ContentPresenter x:Name="HeaderElement" ContentTemplate="{TemplateBinding HeaderTemplate}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

                  </telerik:LayoutTransformControl>

              </Grid>

          </ControlTemplate>

          <Style x:Key="RadTabItemStyle1" TargetType="telerik:RadTabItem">

              <Setter Property="MinWidth" Value="5"/>

              <Setter Property="BorderThickness" Value="{StaticResource TabItem_OuterBorderThickness}"/>

              <Setter Property="Foreground" Value="{StaticResource ControlForeground_Normal}"/>

              <Setter Property="MinHeight" Value="5"/>

              <Setter Property="Background" Value="{StaticResource TabItem_Background_Normal}"/>

              <Setter Property="BorderBrush" Value="{StaticResource TabItem_OuterBorder_Normal}"/>

              <Setter Property="HorizontalContentAlignment" Value="Center"/>

              <Setter Property="VerticalContentAlignment" Value="Center"/>

              <Setter Property="Padding" Value="6 3"/>

              <Setter Property="Template" Value="{StaticResource TabItemTemplate}"/>

          </Style>

      </UserControl.Resources>   

      <Grid x:Name="LayoutRoot" Background="White">

   

          <telerik:RadTabControl>

   

              <telerik:RadTabItem  Header="Header One" Style="{StaticResource RadTabItemStyle1}" />

   

          </telerik:RadTabControl>

      </Grid>

  You can find this realized in the attached solution. Please let us know if it helps you. Kind regards,
  Petar Mladenov
  the Telerik team

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

  Attached files

  • TabControlHeader.zip

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / Silverlight > TabControl > Change Tab Background onFocus