Default resources for RadPanelBarItem control template?

2 posts, 0 answers
  1. Sam
    Sam avatar
    67 posts
    Member since:
    Jun 2011

    Posted 21 Jun 2011 Link to this post


    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
  2. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 24 Jun 2011 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. DevCraft banner
Back to Top