Removing RadPanelBar highlighting in wpf

7 posts, 0 answers
  1. Sayali
    Sayali avatar
    2 posts
    Member since:
    Sep 2010

    Posted 07 Sep 2010 Link to this post

    I am facing issue in removing the highlighting effect(yellow color on mouse hover) of RadPaneBar in wpf application.
    How to remove mouse hover effect from RadPanebar or any specific styles to be applied to remove highlighting.
    Let me know.
  2. Dimitrina
    Admin
    Dimitrina avatar
    442 posts

    Posted 10 Sep 2010 Link to this post

    Hello Sayali,

    You can apply a custom theme to any of the controls. For more information you can follow the link below:

    http://www.telerik.com/help/wpf/common-styling-appearance-edit-control-templates-blend.html

    Please find attached an example.

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



    Kind regards,
    Dimitrina
    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
  3. UI for WPF is Visual Studio 2017 Ready
  4. Craig
    Craig avatar
    10 posts
    Member since:
    Mar 2012

    Posted 30 Apr 2012 Link to this post

    I followed the link referenced in this thread to investigate styling of the RadPanelBar control.
    However, it does not work if you add "content" into a RadPanelBarItem.  e.g. If I add a simple <TextBlock> as content to one of the items, it still gets highlighted in yellow etc.

    My modified MainWindow.xaml of the referenced sample is below.  You can see that I have added a <TextBlock> to "RadPanelBarItem1.2", which still gets styled in yellow.

    How can I change the style of this element?

    Thanks and regards
    Craig Littlewood

    <Window
        x:Class="WpfApplication1.MainWindow"
        x:Name="Window"
        Title="MainWindow"
        UseLayoutRounding="True"
        Width="640" Height="480">
        <Window.Resources>
            <Style x:Key="RadPanelBarItemStyle1" TargetType="{x:Type 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="Black"/>
                <Setter Property="Padding" Value="3"/>
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                <Setter Property="VerticalContentAlignment" Value="Stretch"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type telerik:RadPanelBarItem}">
                            <Grid x:Name="RootElement">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="*"/>
                                </Grid.RowDefinitions>
                                <Grid x:Name="HeaderRow" Background="Transparent">
                                    <!--<Border x:Name="MouseOverVisual" BorderBrush="#FFFFC92B" BorderThickness="1" CornerRadius="1" Opacity="0">
                                        <Border BorderBrush="White" BorderThickness="1" CornerRadius="0">
                                            <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>
                                    </Border>
                                    <Border x:Name="SelectionVisual" BorderBrush="#FFFFC92B" BorderThickness="1" CornerRadius="1" Opacity="0">
                                        <Border BorderBrush="White" BorderThickness="1" CornerRadius="0">
                                            <Border.Background>
                                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                    <GradientStop Color="#FFFCE79F" Offset="1"/>
                                                    <GradientStop Color="#FFFDD3A8"/>
                                                </LinearGradientBrush>
                                            </Border.Background>
                                        </Border>
                                    </Border>-->
                                    <Border x:Name="DisabledVisual" BorderBrush="#FF989898" BorderThickness="1" CornerRadius="1" Opacity="0">
                                        <Border BorderBrush="Transparent" BorderThickness="1" Background="#FFE0E0E0" CornerRadius="0"/>
                                    </Border>
                                    <ContentControl x:Name="Header" ContentTemplate="{TemplateBinding HeaderTemplate}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                    <Rectangle x:Name="FocusVisual" IsHitTestVisible="False" RadiusY="2" RadiusX="2" Stroke="Black" StrokeThickness="1" StrokeDashArray="1 2" Visibility="Collapsed"/>
                                </Grid>
                                <Grid x:Name="ItemsContainer" Grid.Row="1" Visibility="Collapsed">
                                    <ItemsPresenter/>
                                </Grid>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <!--<Trigger Property="IsSelected" Value="True">
                                    <Setter Property="Opacity" TargetName="SelectionVisual" Value="1"/>
                                </Trigger>-->
                                <Trigger Property="IsFocused" Value="True">
                                    <Setter Property="Visibility" TargetName="FocusVisual" Value="Visible"/>
                                </Trigger>
                                <Trigger Property="IsExpanded" Value="True">
                                    <Setter Property="Visibility" TargetName="ItemsContainer" Value="Visible"/>
                                </Trigger>
                                <Trigger Property="IsEnabled" Value="False">
                                    <Setter Property="Opacity" TargetName="DisabledVisual" Value="1"/>
                                </Trigger>
                                <!--<EventTrigger RoutedEvent="Mouse.MouseEnter" SourceName="HeaderRow">
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Duration="0:0:0.2" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverVisual"/>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger>
                                <EventTrigger RoutedEvent="Mouse.MouseLeave" SourceName="HeaderRow">
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation Duration="0:0:0.2" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverVisual"/>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger>-->
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Setter Property="ItemsPanel">
                    <Setter.Value>
                        <ItemsPanelTemplate>
                            <telerik:PanelBarPanel IsItemsHost="True"/>
                        </ItemsPanelTemplate>
                    </Setter.Value>
                </Setter>
                <Style.Triggers>
                    <Trigger Property="Level" Value="1">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="{x:Type telerik:RadPanelBarItem}">
                                    <Grid x:Name="RootElement" SnapsToDevicePixels="True">
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto"/>
                                            <RowDefinition Height="*"/>
                                        </Grid.RowDefinitions>
                                        <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="White" BorderThickness="1" Background="{TemplateBinding Background}"/>
                                            </Border>
                                            <!--<Border x:Name="MouseOverVisual" BorderBrush="#FFFFC92B" BorderThickness="1" Grid.ColumnSpan="5" Opacity="0">
                                                <Border BorderBrush="White" BorderThickness="1">
                                                    <Border.Background>
                                                        <LinearGradientBrush 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>
                                                    </Border.Background>
                                                </Border>
                                            </Border>-->
                                            <!--<Border x:Name="SelectVisual" BorderThickness="1" Grid.ColumnSpan="5" Opacity="0">
                                                <Border.BorderBrush>
                                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                        <GradientStop Color="#FF282828"/>
                                                        <GradientStop Color="#FF5F5F5F" Offset="1"/>
                                                    </LinearGradientBrush>
                                                </Border.BorderBrush>
                                                <Border BorderThickness="1">
                                                    <Border.BorderBrush>
                                                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                                            <GradientStop Color="#FFB69A78"/>
                                                            <GradientStop Color="#FFFFE17A" Offset="0.126"/>
                                                        </LinearGradientBrush>
                                                    </Border.BorderBrush>
                                                    <Border.Background>
                                                        <LinearGradientBrush 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>
                                                    </Border.Background>
                                                </Border>
                                            </Border>-->
                                            <Border x:Name="DisabledVisual" BorderBrush="#FF989898" BorderThickness="1" Grid.ColumnSpan="5" Opacity="0">
                                                <Border BorderBrush="Transparent" BorderThickness="1" Background="#FFE0E0E0"/>
                                            </Border>
                                            <Path x:Name="arrow" Grid.Column="5" Data="M1,1.5L4.5,5 8,1.5" HorizontalAlignment="Right" Margin="7,0" Opacity="1" RenderTransformOrigin="0.5,0.5" Stretch="None" Stroke="Black" StrokeThickness="2" VerticalAlignment="Center">
                                                <Path.RenderTransform>
                                                    <RotateTransform Angle="0"/>
                                                </Path.RenderTransform>
                                            </Path>
                                            <ContentControl x:Name="Header" Grid.ColumnSpan="4" ContentTemplate="{TemplateBinding HeaderTemplate}" Foreground="{TemplateBinding Foreground}" FontSize="{TemplateBinding FontSize}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                            <Rectangle x:Name="FocusVisual" Grid.ColumnSpan="5" Grid.Column="0" IsHitTestVisible="False" Stroke="Black" StrokeThickness="1" StrokeDashArray="1 2" Visibility="Collapsed"/>
                                        </Grid>
                                        <Grid x:Name="ItemsContainer" Grid.Row="1" Visibility="Collapsed">
                                            <telerik:LayoutTransformControl x:Name="transformationRoot" IsTabStop="False">
                                                <ItemsPresenter/>
                                            </telerik:LayoutTransformControl>
                                        </Grid>
                                    </Grid>
                                    <ControlTemplate.Triggers>
                                        <!--<Trigger Property="IsSelected" Value="True">
                                            <Setter Property="Opacity" TargetName="SelectVisual" Value="1"/>
                                        </Trigger>-->
                                        <Trigger Property="IsFocused" Value="True">
                                            <Setter Property="Visibility" TargetName="FocusVisual" Value="Visible"/>
                                        </Trigger>
                                        <Trigger Property="IsExpanded" Value="True">
                                            <Trigger.EnterActions>
                                                <BeginStoryboard>
                                                    <Storyboard>
                                                        <DoubleAnimation Duration="0:0:0.2" From="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ItemsContainer"/>
                                                    </Storyboard>
                                                </BeginStoryboard>
                                            </Trigger.EnterActions>
                                            <Trigger.ExitActions>
                                                <BeginStoryboard>
                                                    <Storyboard>
                                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="arrow"/>
                                                        <DoubleAnimation Duration="0:0:0.2" From="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ItemsContainer"/>
                                                    </Storyboard>
                                                </BeginStoryboard>
                                            </Trigger.ExitActions>
                                            <!--<Setter Property="Opacity" TargetName="SelectVisual" Value="1"/>-->
                                            <Setter Property="LayoutTransform" TargetName="arrow">
                                                <Setter.Value>
                                                    <TransformGroup>
                                                        <RotateTransform Angle="180"/>
                                                    </TransformGroup>
                                                </Setter.Value>
                                            </Setter>
                                            <Setter Property="Visibility" TargetName="ItemsContainer" Value="Visible"/>
                                        </Trigger>
                                        <Trigger Property="IsEnabled" Value="False">
                                            <Setter Property="Opacity" TargetName="DisabledVisual" Value="1"/>
                                            <Setter Property="Opacity" TargetName="NormalVisual" Value="0"/>
                                        </Trigger>
                                        <!--<Trigger Property="IsMouseOver" Value="True">
                                            <Setter Property="Opacity" TargetName="MouseOverVisual" Value="1"/>
                                        </Trigger>-->
                                    </ControlTemplate.Triggers>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Window.Resources>
     
        <Grid x:Name="LayoutRoot">
            <telerik:RadPanelBar HorizontalAlignment="Left" VerticalAlignment="Top" >
                <telerik:RadPanelBarItem Header="RadPanelBarItem1" IsExpanded="True" Style="{DynamicResource RadPanelBarItemStyle1}">
                    <telerik:RadPanelBarItem Header="RadPanelBarItem1.1" Style="{DynamicResource RadPanelBarItemStyle1}"/>
                    <telerik:RadPanelBarItem Header="RadPanelBarItem1.2" Style="{DynamicResource RadPanelBarItemStyle1}">
                        <TextBlock Text="RadPanelBarItem1.2 TextBlock content"/>
                    </telerik:RadPanelBarItem>
                </telerik:RadPanelBarItem>
                <telerik:RadPanelBarItem Header="RadPanelBarItem2" Style="{DynamicResource RadPanelBarItemStyle1}">
                    <telerik:RadPanelBarItem Header="RadPanelBarItem2.1" Style="{DynamicResource RadPanelBarItemStyle1}"/>
                    <telerik:RadPanelBarItem Header="RadPanelBarItem2.2" Style="{DynamicResource RadPanelBarItemStyle1}"/>
                </telerik:RadPanelBarItem>
                <telerik:RadPanelBarItem Header="RadPanelBarItem3" Style="{DynamicResource RadPanelBarItemStyle1}">
                    <telerik:RadPanelBarItem Header="RadPanelBarItem3.1" Style="{DynamicResource RadPanelBarItemStyle1}"/>
                    <telerik:RadPanelBarItem Header="RadPanelBarItem3.2" Style="{DynamicResource RadPanelBarItemStyle1}"/>
                </telerik:RadPanelBarItem>
                <telerik:RadPanelBarItem Header="RadPanelBarItem4" Style="{DynamicResource RadPanelBarItemStyle1}">
                    <telerik:RadPanelBarItem Header="RadPanelBarItem4.1" Style="{DynamicResource RadPanelBarItemStyle1}"/>
                    <telerik:RadPanelBarItem Header="RadPanelBarItem4.2" Style="{DynamicResource RadPanelBarItemStyle1}"/>
                </telerik:RadPanelBarItem>
            </telerik:RadPanelBar>
        </Grid>
    </Window>
  5. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 03 May 2012 Link to this post

    Hi Craig,

    The issue is caused by the fact that the RadPanelBarItemStyle1 custom style isn't applied on the RadPanelBarItem wrapping the TextBlock. In order to apply the RadPanelBarItemStyle1 style to all RadPanelBarItems you can make it implicit (remove its x:Key setting) or you can set the RadPanelBarItem1.2 ItemContainerStyle property so that it can apply your custom style to all children RadPanelBarItems:
    <telerik:RadPanelBar HorizontalAlignment="Left" VerticalAlignment="Top" >
        <telerik:RadPanelBarItem Header="RadPanelBarItem1"
                    IsExpanded="True"
                    Style="{DynamicResource RadPanelBarItemStyle1}">
            <telerik:RadPanelBarItem Header="RadPanelBarItem1.1"
                   Style="{DynamicResource RadPanelBarItemStyle1}"/>
            <telerik:RadPanelBarItem Header="RadPanelBarItem1.2"
                   Style="{DynamicResource RadPanelBarItemStyle1}"
          ItemContainerStyle="{DynamicResource RadPanelBarItemStyle1}">
                <TextBlock Text="RadPanelBarItem1.2 TextBlock content"/>
            </telerik:RadPanelBarItem>
        </telerik:RadPanelBarItem>
        ...
    </telerik:RadPanelBar>

    I attached a sample solution based on your code snippet where I made the style implicit so that it can dynamically be applied to all RadPanelBarItems in the Window. I hope it helps.

    Greetings,
    Tina Stancheva
    the Telerik team

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

  6. Craig
    Craig avatar
    10 posts
    Member since:
    Mar 2012

    Posted 09 May 2012 Link to this post

    Tina

    This resolved my problem.

    Thanks for your help.

    Regards
    Craig
  7. Pepe
    Pepe avatar
    2 posts
    Member since:
    Oct 2012

    Posted 15 Oct 2012 Link to this post

    Hello,
    I am testing the rad controls for wpf.
    Is there any way to do this without changing the style of the header?
    I am interested in the header matches the selected template.

    Thanks and sorry for my english.
  8. Pepe
    Pepe avatar
    2 posts
    Member since:
    Oct 2012

    Posted 16 Oct 2012 Link to this post

    I've seen that this example is useful in my case.
    Thanks!
Back to Top
UI for WPF is Visual Studio 2017 Ready