Remove mouseover for radpanelitem

5 posts, 1 answers
  1. Chester
    Chester avatar
    13 posts
    Member since:
    Mar 2011

    Posted 30 Mar 2011 Link to this post

    Hi Telerik,

    Can you help me on how to remove this mouseover effect everytime I hover around the items (bunch of hyperlink buttons) inside my radpanel item?

    Thanks,
    Chester
  2. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 30 Mar 2011 Link to this post

    Hi Chester,

    I couldn't rerproduce this issue on our side. It seems that you have defined a custom style? Is this the case? Can you please send us a sample application rerpoducing the issue? You can also have a look at the attached sample that I used for testing - can you reproduce the issue there and how?

    Thank you in advance for your cooperation.

    Best wishes,
    Tina Stancheva
    the Telerik team
  3. DevCraft banner
  4. Chester
    Chester avatar
    13 posts
    Member since:
    Mar 2011

    Posted 30 Mar 2011 Link to this post

    Hi Tina,

    Below is my code for my radpanel project. I assume that the yellow effect when a user hovers to the stackpanel group of hyperlink is caused by the ButtonChrome of telerik controls. But I dont know how to modify it. SImply I just want to disable the mouseover effect. Also, I recently discovered that it can also be pressed (see attached image), maybe that's because of the Button Chrome?

    <UserControl
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" mc:Ignorable="d"
        x:Class="Custom_RadPanel.MainPage"
        Width="640" Height="480">
      
        <UserControl.Resources>
            <!--custom brushes-->
            <LinearGradientBrush x:Key="shinyblack_expander_fill" EndPoint="0.5,0" StartPoint="0.5,1">
                <GradientStop Color="#FF2A2A2A" Offset="0"/>
                <GradientStop Color="#FF2A2A2A" Offset="0.5"/>
                <GradientStop Color="#FF3D3D3D" Offset="1"/>
            </LinearGradientBrush>
            <SolidColorBrush x:Key="shinyblack_outline" Color="#FF1A1A1A"/>
            <LinearGradientBrush x:Key="shinywhite_fill" EndPoint="0.5,0" StartPoint="0.5,1">
                <GradientStop Color="White" Offset="0"/>
                <GradientStop Color="sc#1, 0.9743777, 0.9743777, 0.9743777" Offset="0.45783233642578125"/>
                <GradientStop Color="sc#1, 0.918671131, 0.918671131, 0.918671131" Offset="0.57741710543632507"/>
                <GradientStop Color="sc#1, 0.844770849, 0.844770849, 0.844770849" Offset="0.65749369561672211"/>
                <GradientStop Color="sc#1, 0.756390154, 0.756390154, 0.756390154" Offset="0.71980445086956024"/>
                <GradientStop Color="sc#1, 0.7011019, 0.7011019, 0.7011019" Offset="0.75"/>
                <GradientStop Color="#FFDADADA" Offset="0.75"/>
                <GradientStop Color="#FFDADADA" Offset="1"/>
            </LinearGradientBrush>
            <LinearGradientBrush x:Key="SVG_hyperlink_pressed" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFB0BBC5" Offset="0"/>
                <GradientStop Color="#FF919AA3" Offset="0.7"/>
            </LinearGradientBrush>
            <LinearGradientBrush x:Key="shinyblack_normal" EndPoint="0.5,0" StartPoint="0.5,1">
                <GradientStop Color="#FF3D3D3D" Offset="0"/>
                <GradientStop Color="#FF3D3D3D" Offset="0.5"/>
                <GradientStop Color="Gray" Offset="1"/>
            </LinearGradientBrush>
            <SolidColorBrush x:Key="shinyblack_innerborder" Color="#FF4D4D4D"/>
            <LinearGradientBrush x:Key="shinyblack_mouseover" EndPoint="0.5,0" StartPoint="0.5,1">
                <GradientStop Color="#FF2A2A2A" Offset="0"/>
                <GradientStop Color="#FF2A2A2A" Offset="0.5"/>
                <GradientStop Color="Gray" Offset="1"/>
            </LinearGradientBrush>
              
              
            <Style x:Key="SVG_HyperlinkButtonStyle" TargetType="HyperlinkButton">
                <Setter Property="Foreground" Value="#FF73A9D8"/>
                <Setter Property="Padding" Value="2,0,2,0"/>
                <Setter Property="Cursor" Value="Hand"/>
                <Setter Property="HorizontalContentAlignment" Value="Left"/>
                <Setter Property="VerticalContentAlignment" Value="Top"/>
                <Setter Property="Background" Value="Transparent"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="HyperlinkButton">
                            <Grid Height="18">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualStateGroup.Transitions>
                                            <VisualTransition GeneratedDuration="0:0:0.1">
                                                <VisualTransition.GeneratedEasingFunction>
                                                    <CubicEase EasingMode="EaseIn"/>
                                                </VisualTransition.GeneratedEasingFunction>
                                            </VisualTransition>
                                            <VisualTransition From="MouseOver" GeneratedDuration="0" To="Pressed">
                                                <VisualTransition.GeneratedEasingFunction>
                                                    <CircleEase EasingMode="EaseIn"/>
                                                </VisualTransition.GeneratedEasingFunction>
                                            </VisualTransition>
                                        </VisualStateGroup.Transitions>
                                        <VisualState x:Name="Normal"/>
                                        <VisualState x:Name="MouseOver">
                                            <Storyboard>
                                                <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="normal_fill" d:IsOptimized="True"/>
                                                <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="mouseover_fill" d:IsOptimized="True"/>
                                                <ColorAnimation Duration="0" To="White" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="mouseover_fill" d:IsOptimized="True"/>
                                                <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="contentPresenter" d:IsOptimized="True"/>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Pressed">
                                            <Storyboard>
                                                <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="normal_fill" d:IsOptimized="True"/>
                                                <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="pressed_fill" d:IsOptimized="True"/>
                                                <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="contentPresenter" d:IsOptimized="True"/>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Disabled"/>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="FocusStates">
                                        <VisualState x:Name="Focused">
                                            <Storyboard>
                                                <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualElement"/>
                                                <DoubleAnimation Duration="0" To="4" Storyboard.TargetProperty="(Rectangle.RadiusX)" Storyboard.TargetName="FocusVisualElement" d:IsOptimized="True"/>
                                                <DoubleAnimation Duration="0" To="4" Storyboard.TargetProperty="(Rectangle.RadiusY)" Storyboard.TargetName="FocusVisualElement" d:IsOptimized="True"/>
                                                <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="pressed_fill" d:IsOptimized="True"/>
                                                <DoubleAnimation Duration="0" To="2" Storyboard.TargetProperty="(Shape.StrokeThickness)" Storyboard.TargetName="FocusVisualElement" d:IsOptimized="True"/>
                                                <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="contentPresenter" d:IsOptimized="True"/>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Unfocused"/>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Border x:Name="normal_fill" BorderThickness="1" Grid.ColumnSpan="2" Margin="0" CornerRadius="5" Background="{StaticResource shinywhite_fill}"/>
                                <Border x:Name="mouseover_fill" BorderThickness="1" Grid.ColumnSpan="2" Margin="0" CornerRadius="5" Background="White" Opacity="0"/>
                                <Border x:Name="pressed_fill" BorderThickness="1" Margin="0" CornerRadius="5" d:LayoutOverrides="GridBox" Opacity="0" Background="{StaticResource SVG_hyperlink_pressed}"/>
                                <Rectangle x:Name="FocusVisualElement" IsHitTestVisible="false" Opacity="0" Stroke="{StaticResource shinywhite_fill}" StrokeThickness="2" Grid.ColumnSpan="2" RadiusX="4" RadiusY="4"/>
                                <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" VerticalAlignment="Center" Margin="30,0,0,0" d:LayoutOverrides="Width" Opacity="0.7"/>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
      
            <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">
                            <VisualStateGroup.Transitions>
                                <VisualTransition GeneratedDuration="0:0:0.2">
                                    <VisualTransition.GeneratedEasingFunction>
                                        <QuadraticEase EasingMode="EaseInOut"/>
                                    </VisualTransition.GeneratedEasingFunction>
                                </VisualTransition>
                            </VisualStateGroup.Transitions>
                            <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.3" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="arrow"/>
                                    <DoubleAnimation Duration="0" To="0.3" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Header"/>
                                    <DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="border" d:IsOptimized="True"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="MouseOver">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverVisual"/>
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="arrow" d:IsOptimized="True"/>
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Header" d:IsOptimized="True"/>
                                </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"/>
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Header" d:IsOptimized="True"/>
                                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="arrow" d:IsOptimized="True"/>
                                </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>
                        <VisualStateGroup x:Name="LoadingOnDemandStates">
                            <VisualState x:Name="LoadingOnDemand"/>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="EditStates">
                            <VisualState x:Name="Display"/>
                            <VisualState x:Name="Edit"/>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Grid x:Name="HeaderRow" Height="24">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <Border x:Name="NormalVisual" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="5" BorderBrush="{StaticResource shinyblack_outline}">
                            <Border BorderBrush="{StaticResource shinyblack_normal}" BorderThickness="1" Background="{StaticResource shinyblack_normal}"/>
                        </Border>
                        <Border x:Name="MouseOverVisual" BorderBrush="{StaticResource shinyblack_outline}" BorderThickness="1" Grid.ColumnSpan="5" Opacity="0">
                            <Border BorderBrush="{StaticResource shinyblack_innerborder}" BorderThickness="1" Background="{StaticResource shinyblack_mouseover}"/>
                        </Border>
                        <Border x:Name="SelectVisual" BorderThickness="1" Grid.ColumnSpan="5" Opacity="0" BorderBrush="{StaticResource shinyblack_outline}">
                            <Border BorderThickness="1" Background="{StaticResource shinyblack_mouseover}" BorderBrush="{StaticResource shinyblack_mouseover}"/>
                        </Border>
                        <Border x:Name="DisabledVisual" BorderBrush="#FF989898" BorderThickness="1" Grid.ColumnSpan="5" Opacity="0">
                            <Border x:Name="border" BorderBrush="Transparent" BorderThickness="1" Background="{StaticResource shinyblack_normal}"/>
                        </Border>
                        <Path x:Name="arrow" Grid.Column="4" Data="M1,1 L5.25,5.25 L9.5,1" HorizontalAlignment="Right" Margin="6,0" Opacity="0.8" RenderTransformOrigin="0.5 0.5" Stretch="None" Stroke="#FFD7D7D7" StrokeThickness="2" VerticalAlignment="Center" Height="6.25" Width="10.5" d:LayoutOverrides="GridBox">
                            <Path.RenderTransform>
                                <RotateTransform x:Name="directionRotation" Angle="0"/>
                            </Path.RenderTransform>
                        </Path>
                        <ContentPresenter x:Name="Header" Grid.ColumnSpan="4" ContentTemplate="{TemplateBinding HeaderTemplate}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Height="14" Margin="8,0,0,0" Opacity="0.8"/>
                        <Rectangle x:Name="FocusVisual" Grid.ColumnSpan="5" Grid.Column="0" IsHitTestVisible="False" Stroke="#FF000000" 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="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="#FFFFC92B" Opacity="0">
                            <Border.CornerRadius>
                                <CornerRadius>1</CornerRadius>
                            </Border.CornerRadius>
                            <Border.BorderThickness>
                                <Thickness>1</Thickness>
                            </Border.BorderThickness>
                            <Border BorderBrush="#FFFFFFFF">
                                <Border.CornerRadius>
                                    <CornerRadius>0</CornerRadius>
                                </Border.CornerRadius>
                                <Border.Background>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#FFFFFBA3" Offset="1"/>
                                        <GradientStop Color="#FFFFFBDA" Offset="0"/>
                                    </LinearGradientBrush>
                                </Border.Background>
                                <Border.BorderThickness>
                                    <Thickness>1</Thickness>
                                </Border.BorderThickness>
                            </Border>
                        </Border>
                        <Border x:Name="SelectionVisual" BorderBrush="#FFFFC92B" Opacity="0">
                            <Border.CornerRadius>
                                <CornerRadius>1</CornerRadius>
                            </Border.CornerRadius>
                            <Border.BorderThickness>
                                <Thickness>1</Thickness>
                            </Border.BorderThickness>
                            <Border BorderBrush="#FFFFFFFF">
                                <Border.Background>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#FFFCE79F" Offset="1"/>
                                        <GradientStop Color="#FFFDD3A8"/>
                                    </LinearGradientBrush>
                                </Border.Background>
                                <Border.CornerRadius>
                                    <CornerRadius>0</CornerRadius>
                                </Border.CornerRadius>
                                <Border.BorderThickness>
                                    <Thickness>1</Thickness>
                                </Border.BorderThickness>
                            </Border>
                        </Border>
                        <Border x:Name="DisabledVisual" BorderBrush="#FF989898" Opacity="0">
                            <Border.CornerRadius>
                                <CornerRadius>1</CornerRadius>
                            </Border.CornerRadius>
                            <Border.BorderThickness>
                                <Thickness>1</Thickness>
                            </Border.BorderThickness>
                            <Border BorderBrush="Transparent" Background="#FFE0E0E0">
                                <Border.CornerRadius>
                                    <CornerRadius>0</CornerRadius>
                                </Border.CornerRadius>
                                <Border.BorderThickness>
                                    <Thickness>1</Thickness>
                                </Border.BorderThickness>
                            </Border>
                        </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="#FF000000" StrokeThickness="1" StrokeDashArray="1 2" Visibility="Collapsed"/>
                    </Grid>
                    <Grid x:Name="ItemsContainer" Grid.Row="1" Visibility="Collapsed">
                        <ItemsPresenter/>
                    </Grid>
                </Grid>
            </ControlTemplate>
            <Style x:Key="SVG_RadPanelBarItem" TargetType="telerik:RadPanelBarItem">
                <Setter Property="Background">
                    <Setter.Value>
                        <LinearGradientBrush 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>
                    </Setter.Value>
                </Setter>
                <Setter Property="BorderBrush" Value="#FF848484"/>
                <Setter Property="BorderThickness" Value="1"/>
                <Setter Property="Foreground" Value="#FF000000"/>
                <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="RadPanelBarStyle1" TargetType="telerik:RadPanelBar">
                <Setter Property="ExpandMode" Value="Single"/>
                <Setter Property="IsTabStop" Value="true"/>
                <Setter Property="VerticalAlignment" Value="Top"/>
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                <Setter Property="VerticalContentAlignment" Value="Stretch"/>
                <Setter Property="Foreground" Value="#FF000000"/>
                <Setter Property="UseLayoutRounding" Value="True"/>
                <Setter Property="TabNavigation" Value="Once"/>
                <Setter Property="ItemsPanel">
                    <Setter.Value>
                        <ItemsPanelTemplate>
                            <telerik:PanelBarPanel/>
                        </ItemsPanelTemplate>
                    </Setter.Value>
                </Setter>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="telerik:RadPanelBar">
                            <Grid>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="OrientationStates">
                                        <VisualState x:Name="Vertical">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Duration="00:00:00" Storyboard.TargetProperty="(LayoutTransformControl.LayoutTransform)" Storyboard.TargetName="transformationRoot">
                                                    <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.TargetProperty="(LayoutTransformControl.LayoutTransform)" Storyboard.TargetName="transformationRoot">
                                                    <DiscreteObjectKeyFrame KeyTime="00:00:00">
                                                        <DiscreteObjectKeyFrame.Value>
                                                            <RotateTransform Angle="-90"/>
                                                        </DiscreteObjectKeyFrame.Value>
                                                    </DiscreteObjectKeyFrame>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal"/>
                                        <VisualState x:Name="Disabled"/>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="FocusStates">
                                        <VisualState x:Name="Focused"/>
                                        <VisualState x:Name="Unfocused"/>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <telerik:LayoutTransformControl x:Name="transformationRoot">
                                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                                        <ScrollViewer x:Name="ScrollViewer" telerik:ScrollViewerExtensions.EnableMouseWheel="True" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" HorizontalScrollBarVisibility="Auto" IsTabStop="False" Padding="{TemplateBinding Padding}" VerticalScrollBarVisibility="Auto" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
                                            <ItemsPresenter/>
                                        </ScrollViewer>
                                    </Border>
                                </telerik:LayoutTransformControl>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Setter Property="Orientation" Value="Vertical"/>
            </Style>
        </UserControl.Resources>
      
        <Grid x:Name="LayoutRoot" Background="White">
            <telerik:RadPanelBar Height="340" Width="150" Background="{StaticResource shinyblack_expander_fill}" Foreground="{StaticResource shinyblack_outline}" BorderThickness="1" HorizontalAlignment="Left" Margin="130,70,0,0" Style="{StaticResource RadPanelBarStyle1}">
                <telerik:RadPanelBarItem Header="Product" Style="{StaticResource SVG_RadPanelBarItem}" FontFamily="/SV_Catering_SL;component/Fonts/Fonts.zip#Myriad Web Pro" Foreground="#FFD7D7D7" IsExpanded="True" Background="{x:Null}" BorderBrush="{x:Null}">
                    <StackPanel Margin="0,0,0,22" d:LayoutOverrides="Height">
                        <Grid Height="20" Width="130">  
                            <HyperlinkButton Width="130" Foreground="{StaticResource shinyblack_outline}" FontFamily="Myriad Web Pro" Style="{StaticResource SVG_HyperlinkButtonStyle}" Content="Link" Margin="0"/>
                            <Image Height="12" Margin="10,2,0,2" Source="Document.png" HorizontalAlignment="Left"/>  
      
                        </Grid>
                        <Grid Height="20" Width="130">  
                            <HyperlinkButton Width="130" Foreground="{StaticResource shinyblack_outline}" FontFamily="Myriad Web Pro" Style="{StaticResource SVG_HyperlinkButtonStyle}" Content="Create"/>
                            <Image Height="12" Margin="10,2,0,2" Source="Wizard.png" HorizontalAlignment="Left"/>  
      
                        </Grid>
                        <Grid Height="20" Width="130">  
                            <HyperlinkButton Width="130" Foreground="{StaticResource shinyblack_outline}" FontFamily="Myriad Web Pro" Style="{StaticResource SVG_HyperlinkButtonStyle}" Content="Print"/>
                            <Image Height="12" Margin="10,2,0,2" Source="Printer.png" HorizontalAlignment="Left"/>  
      
                        </Grid>
                        <Grid Height="20" Width="130">  
                            <HyperlinkButton Width="130" Foreground="{StaticResource shinyblack_outline}" FontFamily="Myriad Web Pro" Style="{StaticResource SVG_HyperlinkButtonStyle}" Content="Load Set of Marks" Height="20" VerticalAlignment="Top"/>
                            <Image Height="12" Margin="10,2,0,2" Source="Target.png" HorizontalAlignment="Left"/>  
      
                        </Grid>  
      
                    </StackPanel>
                </telerik:RadPanelBarItem>
                <telerik:RadPanelBarItem Header="Sales Item" Style="{StaticResource SVG_RadPanelBarItem}" FontFamily="/SV_Catering_SL;component/Fonts/Fonts.zip#Myriad Web Pro" Foreground="#FFD7D7D7" BorderBrush="{x:Null}" Background="{x:Null}">
                    <StackPanel>
                        <Grid Height="20" Width="130">  
                            <HyperlinkButton Width="130" Foreground="{StaticResource shinyblack_outline}" FontFamily="Myriad Web Pro" Style="{StaticResource SVG_HyperlinkButtonStyle}" Content="Link" Margin="0"/>
                            <Image Height="12" Margin="10,2,0,2" Source="Document.png" HorizontalAlignment="Left"/>  
      
                        </Grid>
                        <Grid Height="20" Width="130">  
                            <HyperlinkButton Width="130" Foreground="{StaticResource shinyblack_outline}" FontFamily="Myriad Web Pro" Style="{StaticResource SVG_HyperlinkButtonStyle}" Content="Create"/>
                            <Image Height="12" Margin="10,2,0,2" Source="Wizard.png" HorizontalAlignment="Left"/>  
      
                        </Grid>
                        <Grid Height="20" Width="130">  
                            <HyperlinkButton Width="130" Foreground="{StaticResource shinyblack_outline}" FontFamily="Myriad Web Pro" Style="{StaticResource SVG_HyperlinkButtonStyle}" Content="Load Set of Marks"/>
                            <Image Height="12" Margin="10,2,0,2" Source="Target.png" HorizontalAlignment="Left"/>  
      
                        </Grid>  
      
                    </StackPanel>
                </telerik:RadPanelBarItem>
                <telerik:RadPanelBarItem Header="Client" Style="{StaticResource SVG_RadPanelBarItem}" FontFamily="/SV_Catering_SL;component/Fonts/Fonts.zip#Myriad Web Pro" Foreground="#FFD7D7D7" Background="{x:Null}" BorderBrush="{x:Null}"/>
                <telerik:RadPanelBarItem Header="User" Style="{StaticResource SVG_RadPanelBarItem}" FontFamily="/SV_Catering_SL;component/Fonts/Fonts.zip#Myriad Web Pro" Foreground="#FFD7D7D7" BorderBrush="{x:Null}" Background="{x:Null}"/>
                <telerik:RadPanelBarItem Header="Proposal" Style="{StaticResource SVG_RadPanelBarItem}" FontFamily="/SV_Catering_SL;component/Fonts/Fonts.zip#Myriad Web Pro" Foreground="#FFD7D7D7" Background="{x:Null}" BorderBrush="{x:Null}"/>
                <telerik:RadPanelBarItem Header="Invoice" Style="{StaticResource SVG_RadPanelBarItem}" FontFamily="/SV_Catering_SL;component/Fonts/Fonts.zip#Myriad Web Pro" Foreground="#FFD7D7D7" Background="{x:Null}" BorderBrush="{x:Null}"/>
            </telerik:RadPanelBar>
        </Grid>
    </UserControl>

    Thanks,
    Chester

    PS: why is it the Attached FIle doesnt accept .zip files?
  5. Answer
    Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 05 Apr 2011 Link to this post

    Hello Chester,

    Since the RadPanelBar inherits the RadTreeView control, it is designed to display a hierarchy. Therefore when you define a StackPanel inside the RadPanelBarItem, this StackPanel is considered as the first item from the RadPanelBarItem.Items collection and therefore the StackPanel is wrapped in a RadPanelBarItem and the PanelBarItemSecondLevelTemplate ControlTemplate defines how it should be rendered. Therefore if you need to remove the MouseOver effect you can remove the MouseOver and MouseOut VisualStates from the PanelBarItemSecondLevelTemplate template. Furthermore, you might need to remove the SelectionStates as well.

    However, if you need to see each HyperlinkButton as a different PanelBarItem and keep its MouseOver effect, you will have to change the definition of the RadPanelBarItems like so:
    <telerik:RadPanelBarItem Header="Product"
                                FontFamily="/SV_Catering_SL;component/Fonts/Fonts.zip#Myriad Web Pro"
                                Foreground="#FFD7D7D7"
                                IsExpanded="True"
                                Background="{x:Null}"
                                BorderBrush="{x:Null}">
        <telerik:RadPanelBarItem>
            <telerik:RadPanelBarItem.Header>
                <Grid HorizontalAlignment="Stretch">
                    <HyperlinkButton HorizontalAlignment="Stretch"
                                        Foreground="{StaticResource shinyblack_outline}"
                                        FontFamily="Myriad Web Pro"
                                        Style="{StaticResource SVG_HyperlinkButtonStyle}"
                                        Content="Link"
                                        Margin="0" />
                    <Image Height="12"
                            Margin="10,2,0,2"
                            Source="Administration.png"
                            HorizontalAlignment="Left" />
     
                </Grid>
            </telerik:RadPanelBarItem.Header>
        </telerik:RadPanelBarItem>
        <telerik:RadPanelBarItem>
            <telerik:RadPanelBarItem.Header>
                <Grid Height="20"
                        Width="130">
                    <HyperlinkButton Width="130"
                                        Foreground="{StaticResource shinyblack_outline}"
                                        FontFamily="Myriad Web Pro"
                                        Style="{StaticResource SVG_HyperlinkButtonStyle}"
                                        Content="Create" />
                    <Image Height="12"
                            Margin="10,2,0,2"
                            Source="Administration.png"
                            HorizontalAlignment="Left" />
     
                </Grid>
            </telerik:RadPanelBarItem.Header>
        </telerik:RadPanelBarItem>
        <telerik:RadPanelBarItem>
            <telerik:RadPanelBarItem.Header>
                <Grid Height="20"
                        Width="130">
                    <HyperlinkButton Width="130"
                                        Foreground="{StaticResource shinyblack_outline}"
                                        FontFamily="Myriad Web Pro"
                                        Style="{StaticResource SVG_HyperlinkButtonStyle}"
                                        Content="Print" />
                    <Image Height="12"
                            Margin="10,2,0,2"
                            Source="Administration.png"
                            HorizontalAlignment="Left" />
     
                </Grid>
            </telerik:RadPanelBarItem.Header>
        </telerik:RadPanelBarItem>
        <telerik:RadPanelBarItem>
            <telerik:RadPanelBarItem.Header>
                <Grid Height="20"
                        Width="130">
                    <HyperlinkButton Width="130"
                                        Foreground="{StaticResource shinyblack_outline}"
                                        FontFamily="Myriad Web Pro"
                                        Style="{StaticResource SVG_HyperlinkButtonStyle}"
                                        Content="Load Set of Marks"
                                        Height="20"
                                        VerticalAlignment="Top" />
                    <Image Height="12"
                            Margin="10,2,0,2"
                            Source="Administration.png"
                            HorizontalAlignment="Left" />
     
                </Grid>
            </telerik:RadPanelBarItem.Header>
        </telerik:RadPanelBarItem>
    </telerik:RadPanelBarItem>

    I attached a sample project illustrating the first approach. I hope it helps.

    Greetings,
    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
  6. Chester
    Chester avatar
    13 posts
    Member since:
    Mar 2011

    Posted 06 Apr 2011 Link to this post

    Hi Tina,

    It worked! Many thanks! :)

    Chester
Back to Top
DevCraft banner