Remove orange background color on mouseovervisual

2 posts, 0 answers
  1. Ove Markstrom
    Ove Markstrom avatar
    2 posts
    Member since:
    May 2010

    Posted 02 Jun 2010 Link to this post

    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>

     

  2. Dimitrina
    Admin
    Dimitrina avatar
    442 posts

    Posted 07 Jun 2010 Link to this post

    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
  3. UI for WPF is Visual Studio 2017 Ready
Back to Top