PanelBarItem Header removal

8 posts, 0 answers
  1. Ali Rafiee
    Ali Rafiee avatar
    23 posts
    Member since:
    May 2010

    Posted 02 Aug 2011 Link to this post

    Hi,

    I have a page with a RabPanelBar, which has 4 RadPanelBarItems in it. For only the last RadPanelBarItem i want to remove the header.

    I have looked at the following thread:
    http://www.telerik.com/community/forums/silverlight/panelbar/how-to-remove-header-from-the-panelbaritem.aspx

    But couldn't figure out how to do it. The last panel has a single button for it's content, and when I tried the method in the link above, it would put the button in the header of the panel.

    Can anyone please help me with this?

    Just so you guys know I have followed the tutorial below to change the style of the panelbar so that it doesn't do any highlighting:
    http://www.screencast.com/users/Dimitrina/folders/Jing/media/1743bafd-3bd1-4507-a9af-ef5b1a66b3d0

    Thanks.
  2. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 08 Aug 2011 Link to this post

    Hello Ali Rafiee,

    Have you tried using an empty string as a header of the last RadPanelBarItem. Please check out the attached project and let us know if this could fit in your scenario. Thank you for your cooperation.

    Regards,
    Petar Mladenov
    the Telerik team

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

  3. DevCraft banner
  4. Ali Rafiee
    Ali Rafiee avatar
    23 posts
    Member since:
    May 2010

    Posted 08 Aug 2011 Link to this post

    Hi Petar,

    Thank you for the reply.  I'm attempting to remove the header all together, not just the text part.

    The only thing I have managed to do so far is to reduce the size of the header, but it is still there.
    See the attached image.

    Please let me know if there is any way I can remove/hide the header for the last RadPanelBarItem.

    Thanks
    Ali
  5. Ali Rafiee
    Ali Rafiee avatar
    23 posts
    Member since:
    May 2010

    Posted 08 Aug 2011 Link to this post

    Hi Petar,

    I figured it out.  I loaded the project in Blend, edited the style for the last RadPanelbarItem. And set the visibility of the header to collapsed.
    Worked great.

    Ali
  6. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2891 posts

    Posted 11 Aug 2011 Link to this post

    Hi Ali Rafiee,

     I'm glad to hear that you have succeeded. Please let us know if you need further assistance or info. 

    Best wishes,
    Petar Mladenov
    the Telerik team

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

  7. Eirik H
    Eirik H avatar
    36 posts
    Member since:
    Mar 2010

    Posted 09 Sep 2011 Link to this post

    @Ali

    So what did you end up with after editing the style in Blend XAML-wise? I'm trying to do the same, but we don't have Blend ..
  8. Ali Rafiee
    Ali Rafiee avatar
    23 posts
    Member since:
    May 2010

    Posted 09 Sep 2011 Link to this post

    Hi Eirik,

    Here is the modifications to the style for the PanelBarItem.  The resource that I'm positing has two different styles "RadPanelBarItemNoHeaderStyle" and "RadPanelBarItemNoHiLiteStyle", one for removing the header of an item and one to remove the highlighting feature of the panelbar.  The NoHeaderStyle also implements the no highlight.

        <UserControl.Resources>
            <LinearGradientBrush x:Key="ControlItem_Background_Normal" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="White"/>
                <GradientStop Color="Gainsboro" Offset="0.43"/>
                <GradientStop Color="#FFADADAD" Offset="0.44"/>
                <GradientStop Color="#FFD4D4D4" Offset="1"/>
            </LinearGradientBrush>
            <SolidColorBrush x:Key="ControlItem_OuterBorder_Normal" Color="#FF848484"/>
            <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>
            <LinearGradientBrush x:Key="ControlItem_OuterBorder_Selected" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FF282828"/>
                <GradientStop Color="#FF5F5F5F" Offset="1"/>
            </LinearGradientBrush>
            <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"/>
            <SolidColorBrush x:Key="FocusBrushBlack" 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">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectVisual"/>
                                </Storyboard>
                            </VisualState>
                        </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>
                                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisual">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unfocused">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisual">
                                        <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" 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}"/>
                        <Rectangle x:Name="FocusVisual" Grid.ColumnSpan="5" Grid.Column="0" IsHitTestVisible="False" Stroke="{StaticResource FocusBrushBlack}" StrokeThickness="1" StrokeDashArray="1 2" Visibility="Collapsed"/>
                    </Grid>
                    <Grid x:Name="ItemsContainer" Grid.Row="1" Visibility="Collapsed">
                        <telerik:LayoutTransformControl x:Name="transformationRoot">
                            <ItemsPresenter/>
                        </telerik:LayoutTransformControl>
                    </Grid>
                </Grid>
            </ControlTemplate>
     
            <ControlTemplate x:Key="PanelBarItemTopLevelNoHeaderTemplate" 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">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectVisual"/>
                                </Storyboard>
                            </VisualState>
                        </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>
                                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisual">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unfocused">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisual">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Grid x:Name="HeaderRow" Visibility="Collapsed">
                        <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}"/>
                        <Rectangle x:Name="FocusVisual" Grid.ColumnSpan="5" Grid.Column="0" IsHitTestVisible="False" Stroke="{StaticResource FocusBrushBlack}" StrokeThickness="1" StrokeDashArray="1 2" Visibility="Collapsed"/>
                    </Grid>
                    <Grid x:Name="ItemsContainer" Grid.Row="1" Visibility="Collapsed">
                        <telerik:LayoutTransformControl x:Name="transformationRoot">
                            <ItemsPresenter/>
                        </telerik:LayoutTransformControl>
                    </Grid>
                </Grid>
            </ControlTemplate>
     
     
     
            <SolidColorBrush x:Key="ControlSubItem_OuterBorder_MouseOver" Color="#FFFFC92B"/>
            <Thickness x:Key="ControlSubItem_OuterBorderThickness">1</Thickness>
            <SolidColorBrush x:Key="ControlSubItem_InnerBorder_MouseOver" Color="#FFFFFFFF"/>
            <Thickness x:Key="ControlSubItem_InnerBorderThickness">1</Thickness>
            <LinearGradientBrush x:Key="ControlSubItem_Background_MouseOver" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFFFFBA3" Offset="1"/>
                <GradientStop Color="#FFFFFBDA" Offset="0"/>
            </LinearGradientBrush>
            <CornerRadius x:Key="ControlSubItem_InnerCornerRadius">0</CornerRadius>
            <CornerRadius x:Key="ControlSubItem_OuterCornerRadius">1</CornerRadius>
            <SolidColorBrush x:Key="ControlSubItem_OuterBorder_Selected" Color="#FFFFC92B"/>
            <SolidColorBrush x:Key="ControlSubItem_InnerBorder_Selected" Color="#FFFFFFFF"/>
            <LinearGradientBrush x:Key="ControlSubItem_Background_Selected" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFFCE79F" Offset="1"/>
                <GradientStop Color="#FFFDD3A8"/>
            </LinearGradientBrush>
             
            <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" To="1.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisual"/>
                                </Storyboard>
                            </VisualState>
    <!--                        <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <DoubleAnimation Duration="0:0:0.2" To="1.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverVisual"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="MouseOut">
                                <Storyboard>
                                    <DoubleAnimation Duration="0:0:0.2" To="0.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverVisual"/>
                                </Storyboard>
                            </VisualState> -->
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="SelectionStates">
                            <VisualState x:Name="Unselected"/>
    <!--                        <VisualState x:Name="Selected">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectionVisual"/>
                                </Storyboard>
                            </VisualState> -->
                        </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">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisual">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unfocused">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisual">
                                        <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 BorderBrush="{StaticResource ControlSubItem_InnerBorder_MouseOver}" BorderThickness="{StaticResource ControlSubItem_InnerBorderThickness}" Background="{StaticResource ControlSubItem_Background_MouseOver}" 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 BorderBrush="{StaticResource ControlSubItem_InnerBorder_Selected}" BorderThickness="{StaticResource ControlSubItem_InnerBorderThickness}" Background="{StaticResource ControlSubItem_Background_Selected}" CornerRadius="{StaticResource ControlSubItem_InnerCornerRadius}"/>
                        </Border> -->
                        <Border x:Name="DisabledVisual" BorderBrush="{StaticResource ControlOuterBorder_Disabled}" BorderThickness="{StaticResource ControlSubItem_OuterBorderThickness}" CornerRadius="{StaticResource ControlSubItem_OuterCornerRadius}" Opacity="0">
                            <Border BorderBrush="{StaticResource ControlInnerBorder_Disabled}" BorderThickness="{StaticResource ControlSubItem_InnerBorderThickness}" Background="{StaticResource ControlBackground_Disabled}" CornerRadius="{StaticResource ControlSubItem_InnerCornerRadius}"/>
                        </Border>
                        <ContentPresenter x:Name="Header" ContentTemplate="{TemplateBinding HeaderTemplate}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        <Rectangle x:Name="FocusVisual" IsHitTestVisible="False" RadiusY="2" RadiusX="2" Stroke="{StaticResource FocusBrushBlack}" StrokeThickness="1" StrokeDashArray="1 2" Visibility="Collapsed"/>
                    </Grid>
                    <Grid x:Name="ItemsContainer" Grid.Row="1" Visibility="Collapsed">
                        <ItemsPresenter/>
                    </Grid>
                </Grid>
            </ControlTemplate>
     
            <Style x:Key="RadPanelBarItemNoHiLiteStyle" TargetType="telerik:RadPanelBarItem">
                <Setter Property="Background" Value="{StaticResource ControlItem_Background_Normal}"/>
                <Setter Property="BorderBrush" Value="{StaticResource ControlItem_OuterBorder_Normal}"/>
                <Setter Property="BorderThickness" Value="1"/>
                <Setter Property="Foreground" Value="{StaticResource ControlForeground_Normal}"/>
                <Setter Property="TabNavigation" Value="Once"/>
                <Setter Property="IsTabStop" Value="True"/>
                <Setter Property="Template" Value="{StaticResource PanelBarItemTopLevelTemplate}"/>
                <Setter Property="Padding" Value="3"/>
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                <Setter Property="VerticalContentAlignment" Value="Stretch"/>
                <Setter Property="ChildItemsTemplate" Value="{StaticResource PanelBarItemSecondLevelTemplate}"/>
                <Setter Property="ItemsPanel">
                    <Setter.Value>
                        <ItemsPanelTemplate>
                            <telerik:PanelBarPanel/>
                        </ItemsPanelTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
     
            <Style x:Key="RadPanelBarItemNoHeaderStyle" TargetType="telerik:RadPanelBarItem">
                <Setter Property="Background" Value="{StaticResource ControlItem_Background_Normal}"/>
                <Setter Property="BorderBrush" Value="{StaticResource ControlItem_OuterBorder_Normal}"/>
                <Setter Property="BorderThickness" Value="1"/>
                <Setter Property="Foreground" Value="{StaticResource ControlForeground_Normal}"/>
                <Setter Property="TabNavigation" Value="Once"/>
                <Setter Property="IsTabStop" Value="True"/>
                <Setter Property="Template" Value="{StaticResource PanelBarItemTopLevelNoHeaderTemplate}"/>
                <Setter Property="Padding" Value="3"/>
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                <Setter Property="VerticalContentAlignment" Value="Stretch"/>
                <Setter Property="ChildItemsTemplate" Value="{StaticResource PanelBarItemSecondLevelTemplate}"/>
                <Setter Property="ItemsPanel">
                    <Setter.Value>
                        <ItemsPanelTemplate>
                            <telerik:PanelBarPanel/>
                        </ItemsPanelTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
     
     
        </UserControl.Resources>


    And here is an example of how to apply it:
    <telerik:RadPanelBarItem Name="startPanel" IsExpanded="True" IsEnabled="False" Style="{StaticResource RadPanelBarItemNoHeaderStyle}" >
        <Button Content="Start Activity" FontSize="20" Height="35" HorizontalAlignment="Center" Margin="14,20,0,20" Name="startButton" VerticalAlignment="Top" Width="200" Click="startButton_Click" />
    </telerik:RadPanelBarItem>

    I hope this helps you out. 
    Let me know if you need clarification on anything.

    Ali

  9. Eirik H
    Eirik H avatar
    36 posts
    Member since:
    Mar 2010

    Posted 12 Sep 2011 Link to this post

    Thank you, Ali. Saved my day!

    Edit: Btw, can't believe one needs to build a whole new control template and that it took that many lines of XAML just to remove the 10 pixels or so the header renders as when there is no header text set ... 
Back to Top
DevCraft banner