Move over color change in RadPanelBarItem

[Priya]

I would like my PanelBarItem to not change the background color while I move my move over it.

This is what is happening and not desired

This is what is desired

Is there an easy and simple way to accomplish this?

Note: I am okay with the Header area changing color while the mouse is over that area. (area containing text A,B,C.).

I would like to avoid extracting and changing the entire template just for this one small change.

Thanks in advance.

[Stenly]

Hello Priya,

To achieve the desired result without extracting the default control template of the RadPanelBarItem element, you could subscribe to the Loaded event of the RadPanelBar control. After that, iterate the Items collection and using the ChildrenOfType extension method, inside a Dispatcher, retrieve the last Border element with x:Name="MouseOverVisual". Then, modify the Background and BorderBrush properties of the returned element.

The following code snippet shows a sample implementation of this suggestion:

private void RadPanelBar_Loaded(object sender, RoutedEventArgs e)
{
    var panelBar = (RadPanelBar)sender;

    foreach (RadPanelBarItem item in panelBar.Items)
    {
        item.IsExpanded = true;

        this.Dispatcher.BeginInvoke((Action)(() =>
        {
            var border = item.ChildrenOfType<Border>().Where(x => x.Name == "MouseOverVisual").Skip(1).Take(1).FirstOrDefault();

            if (border != null)
            {
                border.Background = Brushes.Transparent;
                border.BorderBrush = Brushes.Transparent;
            }
        }), System.Windows.Threading.DispatcherPriority.ApplicationIdle);

        item.IsExpanded = false;
    }
}

An important thing to consider is that the above-shared code would only work when there aren't any nested RadPanelBarItem elements. If there are any nested items, the code would have to be customized, in order to cover this scenario.

The produced result is as follows:

With this said, I hope the provided suggestion would be of help to you.

Regards,
Stenly
Progress Telerik

[Priya]

Hi Stenly,

Since I do not have nested PanelBars, your solution works for me. Thank you.

I have 2 follow up questions

1) I would also like to avoid the background color change that happens on clicking the PanelBarItems.

ie: I would like to avoid this (white'ish) change to the background 

2. Is there a way to apply the theme (in my case Expression_DarkTheme) to non-Telerik controls.

For example: Adding a text box and/or label shows up as below.

Notice that text is in black color (default)

Whereas adding a telerik control such as RadGridView shows up in the "right" colors ( text is in white)

[Stenly]

Regarding the first requirement, which is to change the color of the selected visual, you could follow the approach that was suggested for the mouse over visual. The Border element responsible for this visual state has an x:Name="SelectedVisual". 

With this being said, the following code snippet shows the modified Loaded event, in order to include this behavior:

private void RadPanelBar_Loaded(object sender, RoutedEventArgs e)
{
    var panelBar = (RadPanelBar)sender;

    foreach (RadPanelBarItem item in panelBar.Items)
    {
        item.IsExpanded = true;

        this.Dispatcher.BeginInvoke((Action)(() =>
        {
            //MouseOver border
            var mouseOverBorder = item.ChildrenOfType<Border>().Where(x => x.Name == "MouseOverVisual").Skip(1).Take(1).FirstOrDefault();
            
            //Selected border
            var selectedBorder = item.ChildrenOfType<Border>().Where(x => x.Name == "SelectedVisual").Skip(1).Take(1).FirstOrDefault();

            if (mouseOverBorder != null && selectedBorder != null)
            {
                //Mouse over colors
                mouseOverBorder.Background = Brushes.Transparent;
                mouseOverBorder.BorderBrush = Brushes.Transparent;

                //Selected colors
                selectedBorder.Background = Brushes.Transparent;
                selectedBorder.BorderBrush = Brushes.Transparent;
            }
        }), System.Windows.Threading.DispatcherPriority.ApplicationIdle);

        item.IsExpanded = false;
    }
}

Concerning the second inquiry, this section of the Use StyleManager to Apply Theme on MS Controls article provides information on the native WPF controls that are supported by the Telerik theming mechanism. The TextBox element is one of the supported ones and if the StyleManager theming approach is used, the following style could be used to apply the Expression_Dark theme:
<Style TargetType="TextBox">
    <Setter Property="telerik:StyleManager.Theme" Value="Expression_Dark"/>
</Style>
If the Implicit Styles theming approach is used (when NoXaml assemblies are referenced) adding the following ResourceDictionary to the App.xaml file will apply the chosen theme to every native WPF control that is supported by our theming mechanism:
<ResourceDictionary Source="/Telerik.Windows.Themes.Expression_Dark;component/Themes/System.Windows.xaml"/> 
Currently, the Label element is not one of the supported controls, so, would it be possible to use the native TextBlock control instead?

[Priya]

Hi Stenly,

Both of your suggestions above worked perfect. Thanks again!