Rank 1
I'm unable to get rid of the background of the mouseovervisual. I've followed the example provided in the project here with no luck http://www.telerik.com/community/forums/wpf/panelbar/turn-off-mouse-over-effect-in-item-panel.aspx.
The problem is that when the panels are expanded, the mouseovervisual effect of the default orange background still appears on hover, even when applying the PanelBarItemSecondLevelTemplateStyle to the RadPanelBarItem.
The xaml:
<Grid x:Name="MainContent" Margin="0,2,2,0">
<Border BorderBrush="#FF336687" BorderThickness="1" CornerRadius="4" Margin="0" Width="Auto" Height="Auto">
<telerikNavigation:RadPanelBar x:Name="PresentationPanel" Template="{DynamicResource PresentationPanelBar}" Background="Transparent"
dragDrop:RadDragAndDropManager.AllowDrop="True" Orientation="Vertical" ExpandMode="Multiple">
<telerikNavigation:RadPanelBarItem Name="DetailsPanel" IsExpanded="{Binding IsDetailsExpanded}" Template="{DynamicResource PanelBarItemSecondLevelTemplateStyle}">
<telerikNavigation:RadPanelBarItem.Header>
<ContentControl Cursor="Hand">
<TextBlock Text="Details" Foreground="#FFFFFF" Margin="5 4 5 5"/>
</ContentControl>
</telerikNavigation:RadPanelBarItem.Header>
<local:DraggableListBox x:Name="DetailDraggableListBox" ItemsSource="{Binding AvailableDetails}"
ItemTemplate="{StaticResource Test}"
ItemsPanel="{StaticResource DefaultWorkspacePanelTemplate}"
Background="Transparent"
BorderThickness="0" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
</local:DraggableListBox>
</telerikNavigation:RadPanelBarItem>
<telerikNavigation:RadPanelBarItem Name="TopicsPanel" IsExpanded="{Binding IsTopicsExpanded}" Template="{DynamicResource PanelBarItemSecondLevelTemplateStyle}">
<telerikNavigation:RadPanelBarItem.Header>
<ContentControl Cursor="Hand">
<TextBlock Text="Topics" Foreground="#FFFFFF" Name="txtTopicsHeader" Margin="5 4 5 5" />
</ContentControl>
</telerikNavigation:RadPanelBarItem.Header>
<local:DraggableListBox ItemsSource="{Binding TopicsForSelectedDetail}"
ItemTemplate="{StaticResource Test}"
ItemsPanel="{StaticResource DefaultWorkspacePanelTemplate}"
Background="Transparent"
BorderThickness="0" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
</local:DraggableListBox>
</telerikNavigation:RadPanelBarItem>
<telerikNavigation:RadPanelBarItem Name="ContentPanel" IsExpanded="{Binding IsContentExpanded}" Template="{DynamicResource PanelBarItemSecondLevelTemplateStyle}">
<telerikNavigation:RadPanelBarItem.Header>
<ContentControl Cursor="Hand">
<TextBlock Text="Content" Foreground="#FFFFFF" Margin="5 4 5 5"/>
</ContentControl>
</telerikNavigation:RadPanelBarItem.Header>
<local:DraggableListBox ItemsSource="{Binding ContentForSelectedTopic}"
ItemTemplate="{StaticResource Test}"
ItemsPanel="{StaticResource DefaultWorkspacePanelTemplate}"
Background="Transparent"
BorderThickness="0" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
</local:DraggableListBox>
</telerikNavigation:RadPanelBarItem>
</telerikNavigation:RadPanelBar>
</Border>
</Grid>
...and here's what I added to our Style.xaml resources file (per the example in the link above):
<Style TargetType="telerikNavigation:RadPanelBarItem" x:Key="PanelBarItemSecondLevelTemplateStyle">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="telerikNavigation:RadPanelBarItem">
<Grid x:Name="RootElement">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid x:Name="HeaderRow" Background="Transparent">
<!-- Hover -->
<!--<Border x:Name="MouseOverVisual" Opacity="0"
CornerRadius="{StaticResource ControlSubItem_OuterCornerRadius}"
BorderBrush="{StaticResource ControlSubItem_OuterBorder_MouseOver}"
BorderThickness="{StaticResource ControlSubItem_OuterBorderThickness}">
<Border BorderBrush="{StaticResource ControlSubItem_InnerBorder_MouseOver}"
CornerRadius="{StaticResource ControlSubItem_InnerCornerRadius}"
BorderThickness="{StaticResource ControlSubItem_InnerBorderThickness}"
Background="{StaticResource ControlSubItem_Background_MouseOver}" />
</Border>-->
<!-- Select -->
<!--<Border x:Name="SelectionVisual" Opacity="0"
CornerRadius="{StaticResource ControlSubItem_OuterCornerRadius}"
BorderBrush="{StaticResource ControlSubItem_OuterBorder_Selected}"
BorderThickness="{StaticResource ControlSubItem_OuterBorderThickness}">
<Border BorderBrush="{StaticResource ControlSubItem_InnerBorder_Selected}"
CornerRadius="{StaticResource ControlSubItem_InnerCornerRadius}"
BorderThickness="{StaticResource ControlSubItem_InnerBorderThickness}"
Background="{StaticResource ControlSubItem_Background_Selected}" />
</Border>-->
<!-- Disabled -->
<Border x:Name="DisabledVisual" Opacity="0"
BorderBrush="{StaticResource ControlOuterBorder_Disabled}"
CornerRadius="{StaticResource ControlSubItem_OuterCornerRadius}"
BorderThickness="{StaticResource ControlSubItem_OuterBorderThickness}">
<Border
BorderBrush="{StaticResource ControlInnerBorder_Disabled}"
CornerRadius="{StaticResource ControlSubItem_InnerCornerRadius}"
BorderThickness="{StaticResource ControlSubItem_InnerBorderThickness}"
Background="{StaticResource ControlBackground_Disabled}" />
</Border>
<!-- Header -->
<ContentControl x:Name="Header" Margin="{TemplateBinding Padding}"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}"
Foreground="{TemplateBinding Foreground}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
<!-- Focus -->
<Rectangle x:Name="FocusVisual" Visibility="Collapsed"
Stroke="{StaticResource FocusBrushBlack}"
StrokeThickness="1" StrokeDashArray="1 2"
IsHitTestVisible="False" RadiusX="2" RadiusY="2" />
</Grid>
<!-- Content -->
<Grid Visibility="Collapsed" Grid.Row="1" x:Name="ItemsContainer">
<telerikPrimitives:LayoutTransformControl
x:Name="transformationRoot">
<ItemsPresenter />
</telerikPrimitives:LayoutTransformControl>
</Grid>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<!--<Setter Property="Opacity" Value="1" TargetName="SelectionVisual" />-->
</Trigger>
<Trigger Property="IsFocused" Value="True">
<Setter Property="Visibility" Value="Visible"
TargetName="FocusVisual" />
</Trigger>
<Trigger Property="IsExpanded" Value="True">
<Setter Property="Visibility" Value="Visible"
TargetName="ItemsContainer" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="1" TargetName="DisabledVisual" />
</Trigger>
<!--<EventTrigger RoutedEvent="UIElement.MouseEnter" SourceName="HeaderRow">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="MouseOverVisual" To="1.0"
Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="UIElement.MouseLeave" SourceName="HeaderRow">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity"
Storyboard.TargetName="MouseOverVisual" To="0"
Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>-->
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
