This is a migrated thread and some comments may be shown as answers.

Remove orange background color on mouseovervisual

1 Answer 168 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Ove Markstrom
Top achievements
Rank 1
Ove Markstrom asked on 02 Jun 2010, 05:08 PM
I really need some help on this!! :)

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>

 

1 Answer, 1 is accepted

Sort by
0
Dimitrina
Telerik team
answered on 07 Jun 2010, 01:00 PM
Hi Ove,

Please find attached an example with a custom style of the RadPanelBar control.

If you have further questions please do not hesitate to ask us.
I hope this will help you.


Greetings,
Dimitrina
the Telerik team
Tags
PanelBar
Asked by
Ove Markstrom
Top achievements
Rank 1
Answers by
Dimitrina
Telerik team
Share this question
or