Style changed on RadPanelBar

[Anthony]

I just installed the Q3 components and updated my current project to use them. I noticed that some of the control styles were tweaked a little bit. For example, one minor problem was fixed where the colors were slightly different between a RadRibbonRadioButton and RadRibbonToggleButton. That's a good thing.

Unfortunately, I also noticed that my RadListBox inside my RadPanelBar is getting a hover border now. I want to get rid of the orange border that appears when I hover over the RadListBox. What do I need to change?

These controls are being dynamically generated in code. This is part of a factory class that handles building prism region content. Please provide a response with code instead of XAML.

[Tina Stancheva]

Hello Anthony,

The hover border comes from the VisualStates of the automatically generated RadPanelBarItem that wraps the RadListBox.

Basically when working with a RadPanelBar you need to consider the fact that the control is build to display hierarchical data. This means that each RadPanelBarItem has a Header and a collection of Items (which is a collection of RadPanelBarItems). This is why if you define a component within a RadPanelBarItem, it will be automatically wrapped in a RadPanelBarItem and it will be then added in the Items collection of the parent item.

In order to remove the visual states or specifically the MouseOver state, you will have to create a custom implicit style for the RadPanelBarItems. But this would mean that you need to use xaml. However, even if you can't add xaml in the factory class, you can define an implicit style targeting the RadPanelBarItem type in the main application resources. This would mean that the style will be applied on all RadPanelBarItem elements within your main application. If this is an approach you'd like to take, you can follow this tutorial to extract the ControlTemplate of a RadPanelBarItem and then you can simply remove the VisualStates from it.

Another option you have is to set a Padding of 0 to the automatically generated RadPanelBarItem:

RadPanelBarItem wrapper = radListBox.ParentOfType<RadPanelBarItem>();
if(wrapper!=null)
    wrapper.Padding = new Thickness(0);

This will make the RadListBox span on the entire width of the PanelBarItem.

Please let me know if I can further assist you.

Regards,
Tina Stancheva
Telerik

[Anthony]

I'm creating a RadPanelBarItem specifically and adding the RadListBox to it. Changing the Padding property does not affect the results. I wish the problem were that simple. I created a basic project to rule out anything in my application and to further illustrate the problem. I cannot attach the project files here, but I took a screen clip (attached) to ensure you understand what I'm seeing.

Here is the XAML you can use to duplicate the problem:

<Window x:Class="RadPanelBarStyleProblem.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        Title="RadPanel Style Problem" Height="350" Width="525">
    <Grid>
        <telerik:RadPanelBar HorizontalAlignment="Left" VerticalAlignment="Stretch"
                             Width="150" Padding="0" Margin="0">
            <telerik:RadPanelBarItem DropPosition="Inside" Header="Item 1"
                                     IsExpanded="True" Padding="0" Margin="0">
                <telerik:RadListBox Padding="0" Margin="0" BorderThickness="0">
                    <telerik:RadButton>Button 1</telerik:RadButton>
                    <telerik:RadButton>Button 2</telerik:RadButton>
                </telerik:RadListBox>
            </telerik:RadPanelBarItem>
        </telerik:RadPanelBar>
    </Grid>
</Window>

(I explicitly and unnecessarily set the Margin and Padding properties to zero on all the elements to show that it's not the cause.)

[Tina Stancheva]

Hi Anthony,

Thank you for getting back to us. Please accept my apology for not describing the issue clearly. The orange border is the visual representation of the MouseOver state of a RadPanelBarItem. It is displayed when a RadPanelBarItem VIsualState is MouseOver. However, this border does not come from the Item 1 PanelBarItem.

Essentially the RadPanelBarItem is a HeaderedItemsControl, which means that it has a Header and a collection of Items. This is why when you add a control in it, behind the scenes RadPanelBar will create a RadPanelBarItem and set your control as its Header. Then this automatically created item will be added to the Items collection of the root item. Therefore your definition actually matches the following definition:

<telerik:RadPanelBar Width="150"
             HorizontalAlignment="Left"
             VerticalAlignment="Stretch">
    <telerik:RadPanelBarItem DropPosition="Inside"
                 Header="Item 1"
                 IsExpanded="True"
                 Padding="3">
    <telerik:RadPanelBarItem>
        <telerik:RadPanelBarItem.Header>
        <telerik:RadListBox BorderThickness="0">
            <telerik:RadButton>Button 1</telerik:RadButton>
            <telerik:RadButton>Button 2</telerik:RadButton>
        </telerik:RadListBox>
        </telerik:RadPanelBarItem.Header>
    </telerik:RadPanelBarItem>
    </telerik:RadPanelBarItem>
</telerik:RadPanelBar>

This is why I suggested applying a Padding of 0 to the automatically generated item. And using an implicit style makes sure that its setters are applied on every RadPanelBarItem within the visual tree in Style's region of action. And looking at your sample code, this still seems like a viable option. I would also recommend applying a Margin:

<Style TargetType="telerik:RadPanelBarItem">
    <Setter Property="Padding" Value="0" />
    <Setter Property="Margin" Value="1" />
</Style>

I prepared a sample project for you so please have a look at it and let me know if this approach is works in your real-life application.

On a side note, please have in mind that the support tickets allow you to upload zipped folders and therefore we recommend creating support tickets if you have a project to attach. The project helps us better understand a case and an issue and allows us to provide a prompt response.




Regards,
Tina Stancheva
Telerik

[Anthony]

Thank you. Using the implicit style solved the problem.

I will likely change the builder code that currently creates a RadPanelBarItem and RadListBox, because the RadPanelBar creates a new RadPanelBarItem automatically -- even when the object being added is already a RadPanelBarItem.