Controls / RadPanelBar / Styling and Appearance

Required Parts

The RadPanelBar control needs a set of two control templates - one for the overall look of the control and another one for the individual items.

Below you can see the default template:

<ControlTemplate x:Key="PanelBarControlTemplate" TargetType="telerik:RadPanelBar"> 
    <Grid> 
        <VisualStateManager.VisualStateGroups> 
            <VisualStateGroup x:Name="OrientationStates"> 
                <VisualState x:Name="Vertical"> 
                    <Storyboard> 
                        <ObjectAnimationUsingKeyFrames Duration="00:00:00"  
                                               Storyboard.TargetName="transformationRoot"  
                                               Storyboard.TargetProperty="(LayoutTransformControl.LayoutTransform)"> 
                            <DiscreteObjectKeyFrame KeyTime="00:00:00"> 
                                <DiscreteObjectKeyFrame.Value> 
                                    <RotateTransform Angle="0" /> 
                                </DiscreteObjectKeyFrame.Value> 
                            </DiscreteObjectKeyFrame> 
                        </ObjectAnimationUsingKeyFrames> 
                    </Storyboard> 
                </VisualState> 
                <VisualState x:Name="Horizontal"> 
                    <Storyboard> 
                        <ObjectAnimationUsingKeyFrames Duration="00:00:00"  
                                               Storyboard.TargetName="transformationRoot" 
                                               Storyboard.TargetProperty="(LayoutTransformControl.LayoutTransform)"> 
                            <DiscreteObjectKeyFrame KeyTime="00:00:00"> 
                                <DiscreteObjectKeyFrame.Value> 
                                    <RotateTransform Angle="-90" /> 
                                </DiscreteObjectKeyFrame.Value> 
                            </DiscreteObjectKeyFrame> 
                        </ObjectAnimationUsingKeyFrames> 
                    </Storyboard> 
                </VisualState> 
            </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 
        <telerik:LayoutTransformControl x:Name="transformationRoot"> 
            <Border Background="{TemplateBinding Background}"  
            BorderBrush="{TemplateBinding BorderBrush}" 
            BorderThickness="{TemplateBinding BorderThickness}"> 
                <ScrollViewer x:Name="ScrollViewer"  
                      HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
                      HorizontalScrollBarVisibility="Auto" 
                      IsTabStop="False" 
                      Padding="{TemplateBinding Padding}"  
                      Telerik:ScrollViewerExtensions.EnableMouseWheel="True" 
                      telerik:StyleManager.Theme="{StaticResource Theme}" 
                      VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" 
                      VerticalScrollBarVisibility="Auto"> 
                    <ItemsPresenter /> 
                </ScrollViewer> 
            </Border> 
        </telerik:LayoutTransformControl> 
    </Grid> 
</ControlTemplate>

We will now briefly describe the purpose of the main elements:

  • TransformationRoot - this element is needed for changing the orientation of the control.

  • ScrollViewer - this element take care of the cases when there is not enough available space to render the panelbar items.

The other control template required by the RadPanelBar control is the one for the panelbar items. Below you can see the default template:

<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"  
                                 Storyboard.TargetName="NormalVisual" 
                                 Storyboard.TargetProperty="Opacity" 
                                 To="0" /> 
                        <DoubleAnimation Duration="0"  
                                 Storyboard.TargetName="DisabledVisual" 
                                 Storyboard.TargetProperty="Opacity" 
                                 To="1" /> 
                        <DoubleAnimation Duration="0"  
                                 Storyboard.TargetName="arrow" 
                                 Storyboard.TargetProperty="Opacity" 
                                 To="0.5" /> 
                        <DoubleAnimation Duration="0"  
                                 Storyboard.TargetName="Header" 
                                 Storyboard.TargetProperty="Opacity" 
                                 To="0.5" /> 
                    </Storyboard> 
                </VisualState> 
                <VisualState x:Name="MouseOver"> 
                    <Storyboard> 
                        <DoubleAnimation Duration="0"  
                                 Storyboard.TargetName="MouseOverVisual" 
                                 Storyboard.TargetProperty="Opacity" 
                                 To="1" /> 
                    </Storyboard> 
                </VisualState> 
                <VisualState x:Name="MouseOut" /> 
            </VisualStateGroup> 
            <VisualStateGroup x:Name="SelectionStates"> 
                <VisualState x:Name="Unselected" /> 
                <VisualState x:Name="Selected"> 
                    <Storyboard> 
                        <DoubleAnimation Duration="0"  
                                 Storyboard.TargetName="SelectVisual" 
                                 Storyboard.TargetProperty="Opacity" 
                                 To="1" /> 
                    </Storyboard> 
                </VisualState> 
            </VisualStateGroup> 
            <VisualStateGroup x:Name="ExpandStates"> 
                <VisualState x:Name="Expanded"> 
                    <Storyboard> 
                        <DoubleAnimation Duration="0"  
                                 Storyboard.TargetName="directionRotation" 
                                 Storyboard.TargetProperty="Angle" 
                                 To="180" /> 
                        <ObjectAnimationUsingKeyFrames Duration="0"  
                                               Storyboard.TargetName="ItemsContainer" 
                                               Storyboard.TargetProperty="Visibility"> 
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" /> 
                        </ObjectAnimationUsingKeyFrames> 
                        <DoubleAnimation Duration="0:0:0.2"  
                                 From="0.0" 
                                 Storyboard.TargetName="ItemsContainer" 
                                 Storyboard.TargetProperty="Opacity" 
                                 To="1.0" /> 
                    </Storyboard> 
                </VisualState> 
                <VisualState x:Name="Collapsed" /> 
            </VisualStateGroup> 
            <VisualStateGroup x:Name="FocusStates"> 
                <VisualState x:Name="Focused"> 
                    <Storyboard> 
                        <ObjectAnimationUsingKeyFrames Duration="0"  
                                               Storyboard.TargetName="FocusVisual" 
                                               Storyboard.TargetProperty="Visibility"> 
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" /> 
                        </ObjectAnimationUsingKeyFrames> 
                    </Storyboard> 
                </VisualState> 
                <VisualState x:Name="Unfocused"> 
                    <Storyboard> 
                        <ObjectAnimationUsingKeyFrames Duration="0"  
                                               Storyboard.TargetName="FocusVisual" 
                                               Storyboard.TargetProperty="Visibility"> 
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" /> 
                        </ObjectAnimationUsingKeyFrames> 
                    </Storyboard> 
                </VisualState> 
            </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"  
            Grid.ColumnSpan="5" 
            BorderBrush="{TemplateBinding BorderBrush}" 
            BorderThickness="{TemplateBinding BorderThickness}"> 
                <Border Background="{TemplateBinding Background}"  
                BorderBrush="{StaticResource ControlItem_InnerBorder_Normal}" 
                BorderThickness="1" /> 
            </Border> 
            <Border x:Name="MouseOverVisual"  
            Grid.ColumnSpan="5" 
            BorderBrush="{StaticResource ControlItem_OuterBorder_MouseOver}" 
            BorderThickness="1" 
            Opacity="0"> 
                <Border Background="{StaticResource ControlItem_Background_MouseOver}"  
                BorderBrush="{StaticResource ControlItem_InnerBorder_MouseOver}" 
                BorderThickness="1" /> 
            </Border> 
            <Border x:Name="SelectVisual"  
            Grid.ColumnSpan="5" 
            BorderBrush="{StaticResource ControlItem_OuterBorder_Selected}" 
            BorderThickness="1" 
            Opacity="0"> 
                <Border Background="{StaticResource ControlItem_Background_Selected}"  
                BorderBrush="{StaticResource ControlItem_InnerBorder_Selected}" 
                BorderThickness="1" /> 
            </Border> 
            <Border x:Name="DisabledVisual"  
            Grid.ColumnSpan="5" 
            BorderBrush="{StaticResource ControlOuterBorder_Disabled}" 
            BorderThickness="1" 
            Opacity="0"> 
                <Border Background="{StaticResource ControlBackground_Disabled}"  
                BorderBrush="{StaticResource ControlInnerBorder_Disabled}" 
                BorderThickness="1" /> 
            </Border> 
            <Path x:Name="arrow"  
          Grid.Column="5" 
          Margin="7 0" 
          HorizontalAlignment="Right" 
          VerticalAlignment="Center" 
          Data="M 1,1.5 L 4.5,5 L 8,1.5" 
          Opacity="1" 
          RenderTransformOrigin="0.5 0.5" 
          Stretch="None" 
          Stroke="{StaticResource ControlElement_Normal}" 
          StrokeThickness="2"> 
                <Path.RenderTransform> 
                    <RotateTransform x:Name="directionRotation" Angle="0" /> 
                </Path.RenderTransform> 
            </Path> 
            <ContentPresenter x:Name="Header"  
                      Grid.ColumnSpan="4" 
                      Margin="{TemplateBinding Padding}" 
                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
                      ContentTemplate="{TemplateBinding HeaderTemplate}" /> 
            <Rectangle x:Name="FocusVisual"  
               Grid.Column="0" 
               Grid.ColumnSpan="5" 
               IsHitTestVisible="False" 
               Stroke="{StaticResource FocusBrushBlack}" 
               StrokeDashArray="1 2" 
               StrokeThickness="1" 
               Visibility="Collapsed" /> 
        </Grid> 
        <Grid x:Name="ItemsContainer"  
      Grid.Row="1" 
      Visibility="Collapsed"> 
            <telerik:LayoutTransformControl x:Name="transformationRoot"> 
                <ItemsPresenter /> 
            </telerik:LayoutTransformControl> 
        </Grid> 
    </Grid> 
</ControlTemplate>

Following is a short description of the major elements in the template:

  • RootElement - as the name suggests, this is the root element wrapping all other parts of the template.

  • HeaderRow - this Grid element contains all elements that comprise the header of a panelbar item i.e. what is visible when the item is collapsed.

  • MouseOverVisual - this element is displayed when the mouse cursor moves over an item.

  • SelectVisual - this element is displayed whenever an item gets selected.

  • Arrow and ArrowSelect - the expander arrow displayed in the right-hand corner of the item header.

  • ExpandedVisual - this element is displayed when an item is expanded.

  • Header - this element is responsible for rendering the value of the Header property.

  • DisabledVisual - this element is displayed when an item's IsEnabled property is set to false.

  • FocusVisual - this element is displayed when an item is focused.

  • ItemsContainer - this Grid element contains an item's child items.

  • TransformationRoot - this element is used when the Orientation property of the parent panelbar is changed.

And the default ControlTemplate of the RadPanelBarItem.Items is:

<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"> 
                    <Storyboard> 
                        <DoubleAnimation Duration="0"  
                                 Storyboard.TargetName="DisabledVisual" 
                                 Storyboard.TargetProperty="Opacity" 
                                 To="1.0" /> 
                    </Storyboard> 
                </VisualState> 
                <VisualState x:Name="MouseOver"> 
                    <Storyboard> 
                        <DoubleAnimation Duration="0:0:0.2"  
                                 Storyboard.TargetName="MouseOverVisual" 
                                 Storyboard.TargetProperty="Opacity" 
                                 To="1.0" /> 
                    </Storyboard> 
                </VisualState> 
                <VisualState x:Name="MouseOut"> 
                    <Storyboard> 
                        <DoubleAnimation Duration="0:0:0.2"  
                                 Storyboard.TargetName="MouseOverVisual" 
                                 Storyboard.TargetProperty="Opacity" 
                                 To="0.0" /> 
                    </Storyboard> 
                </VisualState> 
            </VisualStateGroup> 
            <VisualStateGroup x:Name="SelectionStates"> 
                <VisualState x:Name="Unselected" /> 
                <VisualState x:Name="Selected"> 
                    <Storyboard> 
                        <DoubleAnimation Duration="0"  
                                 Storyboard.TargetName="SelectionVisual" 
                                 Storyboard.TargetProperty="Opacity" 
                                 To="1" /> 
                    </Storyboard> 
                </VisualState> 
            </VisualStateGroup> 
            <VisualStateGroup x:Name="ExpandStates"> 
                <VisualState x:Name="Expanded"> 
                    <Storyboard> 
                        <ObjectAnimationUsingKeyFrames Duration="0"  
                                               Storyboard.TargetName="ItemsContainer" 
                                               Storyboard.TargetProperty="Visibility"> 
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" /> 
                        </ObjectAnimationUsingKeyFrames> 
                        <DoubleAnimation Duration="0:0:0.2"  
                                 From="0.0" 
                                 Storyboard.TargetName="ItemsContainer" 
                                 Storyboard.TargetProperty="Opacity" 
                                 To="1.0" /> 
                    </Storyboard> 
                </VisualState> 
                <VisualState x:Name="Collapsed" /> 
            </VisualStateGroup> 
            <VisualStateGroup x:Name="FocusStates"> 
                <VisualState x:Name="Focused"> 
                    <Storyboard> 
                        <ObjectAnimationUsingKeyFrames Duration="0"  
                                               Storyboard.TargetName="FocusVisual" 
                                               Storyboard.TargetProperty="Visibility"> 
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" /> 
                        </ObjectAnimationUsingKeyFrames> 
                    </Storyboard> 
                </VisualState> 
                <VisualState x:Name="Unfocused"> 
                    <Storyboard> 
                        <ObjectAnimationUsingKeyFrames Duration="0"  
                                               Storyboard.TargetName="FocusVisual" 
                                               Storyboard.TargetProperty="Visibility"> 
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" /> 
                        </ObjectAnimationUsingKeyFrames> 
                    </Storyboard> 
                </VisualState> 
            </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 
        <Grid x:Name="HeaderRow" Background="Transparent"> 
            <Border x:Name="MouseOverVisual"  
            BorderBrush="{StaticResource ControlSubItem_OuterBorder_MouseOver}" 
            BorderThickness="{StaticResource ControlSubItem_OuterBorderThickness}" 
            CornerRadius="{StaticResource ControlSubItem_OuterCornerRadius}" 
            Opacity="0"> 
                <Border Background="{StaticResource ControlSubItem_Background_MouseOver}"  
                BorderBrush="{StaticResource ControlSubItem_InnerBorder_MouseOver}" 
                BorderThickness="{StaticResource ControlSubItem_InnerBorderThickness}" 
                CornerRadius="{StaticResource ControlSubItem_InnerCornerRadius}" /> 
            </Border> 
            <Border x:Name="SelectionVisual"  
            BorderBrush="{StaticResource ControlSubItem_OuterBorder_Selected}" 
            BorderThickness="{StaticResource ControlSubItem_OuterBorderThickness}" 
            CornerRadius="{StaticResource ControlSubItem_OuterCornerRadius}" 
            Opacity="0"> 
                <Border Background="{StaticResource ControlSubItem_Background_Selected}"  
                BorderBrush="{StaticResource ControlSubItem_InnerBorder_Selected}" 
                BorderThickness="{StaticResource ControlSubItem_InnerBorderThickness}" 
                CornerRadius="{StaticResource ControlSubItem_InnerCornerRadius}" /> 
            </Border> 
            <Border x:Name="DisabledVisual"  
            BorderBrush="{StaticResource ControlOuterBorder_Disabled}" 
            BorderThickness="{StaticResource ControlSubItem_OuterBorderThickness}" 
            CornerRadius="{StaticResource ControlSubItem_OuterCornerRadius}" 
            Opacity="0"> 
                <Border Background="{StaticResource ControlBackground_Disabled}"  
                BorderBrush="{StaticResource ControlInnerBorder_Disabled}" 
                BorderThickness="{StaticResource ControlSubItem_InnerBorderThickness}" 
                CornerRadius="{StaticResource ControlSubItem_InnerCornerRadius}" /> 
            </Border> 
            <ContentPresenter x:Name="Header"  
                      Margin="{TemplateBinding Padding}" 
                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
                      ContentTemplate="{TemplateBinding HeaderTemplate}" /> 
            <Rectangle x:Name="FocusVisual"  
               IsHitTestVisible="False" 
               RadiusX="2" 
               RadiusY="2" 
               Stroke="{StaticResource FocusBrushBlack}" 
               StrokeDashArray="1 2" 
               StrokeThickness="1" 
               Visibility="Collapsed" /> 
        </Grid> 
        <Grid x:Name="ItemsContainer"  
      Grid.Row="1" 
      Visibility="Collapsed"> 
            <ItemsPresenter /> 
        </Grid> 
    </Grid> 
</ControlTemplate>
In this article
Related articles
Not finding the help you need? Improve this article