Default resources for RadPanelBarItem control template?

[Sam]

Hi there, I've copied and pasted the default control template for the RadPanelBarItem into our default styles dictionary so I can customize the look and feel.

There are a whole host of resources that are being referenced in this template though and I need to know what they are so I can include them, otherwise I can't use this template.

Could you provide XAML for the default resources used by this control template? I've included it below for reference:

<!-- Telerik RadPanelBarItem -->
    <ControlTemplate TargetType="telerik:RadPanelBarItem" x:Key="PanelBarItemTopLevelTemplate">
        <Grid x:Name="RootElement">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>

            <vsm:VisualStateManager.VisualStateGroups>
                <vsm:VisualStateGroup x:Name="CommonStates">
                    <vsm:VisualState x:Name="Normal" />

                    <vsm:VisualState x:Name="Disabled">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames
                                Storyboard.TargetName="DisabledVisual"
                                Storyboard.TargetProperty="Visibility"
                                Duration="0">

                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </vsm:VisualState>

                    <vsm:VisualState x:Name="MouseOver">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames
                                Storyboard.TargetName="MouseOverVisual"
                                Storyboard.TargetProperty="Opacity"
                                Duration="0">

                                <DiscreteObjectKeyFrame KeyTime="0" Value="1" />
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </vsm:VisualState>

                    <vsm:VisualState x:Name="MouseOut" />
                </vsm:VisualStateGroup>

                <vsm:VisualStateGroup x:Name="SelectionStates">
                    <vsm:VisualState x:Name="Unselected" />

                    <vsm:VisualState x:Name="Selected">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames
                                Storyboard.TargetName="SelectVisual"
                                Storyboard.TargetProperty="Opacity"
                                Duration="0">

                                <DiscreteObjectKeyFrame KeyTime="0" Value="1" />
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </vsm:VisualState>
                </vsm:VisualStateGroup>

                <vsm:VisualStateGroup x:Name="ExpandStates">
                    <vsm:VisualState x:Name="Expanded">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames
                                Storyboard.TargetName="arrowSelect"
                                Storyboard.TargetProperty="Visibility"
                                Duration="0">

                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                            </ObjectAnimationUsingKeyFrames>

                            <ObjectAnimationUsingKeyFrames
                                Storyboard.TargetName="arrow"
                                Storyboard.TargetProperty="Opacity"
                                Duration="0">

                                <DiscreteObjectKeyFrame KeyTime="0" Value="0" />
                            </ObjectAnimationUsingKeyFrames>

                            <ObjectAnimationUsingKeyFrames
                                Storyboard.TargetName="ItemsContainer"
                                Storyboard.TargetProperty="Visibility"
                                Duration="0">

                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                            </ObjectAnimationUsingKeyFrames>

                            <DoubleAnimation
                                Storyboard.TargetProperty="Opacity"
                                Storyboard.TargetName="ExpandedVisual"
                                To="0.5"
                                Duration="0:0:0.2" />

                            <DoubleAnimation
                                Storyboard.TargetName="ItemsContainer"
                                Storyboard.TargetProperty="Opacity"
                                From="0.0"
                                To="1.0"
                                Duration="0:0:0.2" />
                        </Storyboard>
                    </vsm:VisualState>

                    <vsm:VisualState x:Name="Collapsed" />
                </vsm:VisualStateGroup>

                <vsm:VisualStateGroup x:Name="FocusStates">
                    <vsm:VisualState x:Name="Focused">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames
                                Storyboard.TargetName="FocusVisual"
                                Storyboard.TargetProperty="Visibility"
                                Duration="0">

                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </vsm:VisualState>

                    <vsm:VisualState x:Name="Unfocused">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames
                                Storyboard.TargetName="FocusVisual"
                                Storyboard.TargetProperty="Visibility"
                                Duration="0">

                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </vsm:VisualState>
                </vsm:VisualStateGroup>
            </vsm:VisualStateManager.VisualStateGroups>

            <Grid x:Name="HeaderRow" >
                <Grid.ColumnDefinitions>
                    <!-- indent -->
                    <ColumnDefinition Width="Auto" />

                    <!-- collapse/expand -->
                    <ColumnDefinition Width="Auto" />

                    <!-- left image -->
                    <ColumnDefinition Width="Auto" />

                    <!-- selection, text, edit element -->
                    <ColumnDefinition Width="*" />

                    <!-- empty -->
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>

                <!-- normal-->
                <Border Grid.ColumnSpan="5"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}">

                    <Border
                        BorderBrush="{StaticResource RadPanelBar_BorderMiddle}"
                        BorderThickness="1"
                        Background="{TemplateBinding Background}" />
                </Border>

                <!-- Hover -->
                <Border x:Name="MouseOverVisual" Opacity="0"
                    Grid.ColumnSpan="5"
                    BorderBrush="{StaticResource RadPanelBar_BorderTopOver}"
                    BorderThickness="1">

                    <Border BorderBrush="{StaticResource RadPanelBar_BorderMiddleOver}"
                        BorderThickness="1"
                        Background="{StaticResource RadPanelBar_TopItemBackgroundOver}" />
                </Border>

                <!-- Select -->
                <Border x:Name="SelectVisual" Opacity="0" Grid.ColumnSpan="5"
                    BorderBrush="{StaticResource RadPanelBar_BorderTopOver}"
                    BorderThickness="1">

                    <Border BorderBrush="{StaticResource RadPanelBar_BorderMiddleOver}"
                        BorderThickness="1" Background="{StaticResource RadPanelBar_TopItemBackgroundOver}" />
                </Border>

                <!-- Arrow-->
                <Path x:Name="arrow" Opacity="1" Margin="7 0" HorizontalAlignment="Right"
                    Grid.Column="5" VerticalAlignment="Center" Stroke="{TemplateBinding Foreground}"
                    StrokeThickness="2" UseLayoutRounding="false" Data="M 1,1.5 L 4.5,5 L 8,1.5" />

                <!-- Arrow Select-->
                <Path x:Name="arrowSelect" Visibility="Collapsed" Margin="7 0" Grid.Column="5" HorizontalAlignment="Right"
                    VerticalAlignment="Center" Stroke="#FFFFFF" StrokeThickness="2" UseLayoutRounding="false"
                    Data="M 1,1.5 L 4.5,5 L 8,1.5" RenderTransformOrigin="0.5 0.5">

                    <Path.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform ScaleX="1" ScaleY="1" />
                            <SkewTransform AngleX="0" AngleY="0" />
                            <RotateTransform Angle="-180" />
                            <TranslateTransform X="0" Y="0" />
                        </TransformGroup>
                    </Path.RenderTransform>
                </Path>

                <!-- Expanded Visual -->
                <Rectangle x:Name="ExpandedVisual" Opacity="0" Grid.Column="0" Grid.ColumnSpan="5" />

                <Border Padding="{TemplateBinding Padding}" Grid.ColumnSpan="4">
                    <ContentPresenter x:Name="Header" Content="{TemplateBinding Header}"
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                        ContentTemplate="{TemplateBinding HeaderTemplate}" />
                </Border>

                <!-- Disabled -->
                <Rectangle x:Name="DisabledVisual" Fill="{StaticResource DisabledBrush}"
                    Grid.Column="0" Grid.ColumnSpan="5" Opacity="0.7" IsHitTestVisible="true" Visibility="Collapsed" />

                <!-- Focus -->
                <Rectangle x:Name="FocusVisual" Visibility="Collapsed" StrokeThickness="1"
                    Grid.Column="0" Grid.ColumnSpan="5" Margin="1" UseLayoutRounding="true"
                    IsHitTestVisible="False" Stroke="Transparent" StrokeDashArray="1 2" />
            </Grid>

            <Grid Grid.Row="1" Visibility="Collapsed" x:Name="ItemsContainer">
                <telerik:LayoutTransformControl x:Name="transformationRoot">
                    <ItemsPresenter />
                </telerik:LayoutTransformControl>
            </Grid>
        </Grid>
    </ControlTemplate>

Thanks!

Sam

[Tina Stancheva]

Hi Sam,

I attached a sample project with the RadPanelBarItem default style and ControlTemplate and the required resources.

You can get the default style of the RadControls along with all required resources by editing them in Expression Blend following the approach described here. Also, you can find the style of the RadControls and all related resources in the Themes solution (read more). 

I hope this info will help you. Let us know if we can further assist you.
 
Regards,
Tina Stancheva
the Telerik team