RadPanelBar selection text color

[Priya]

Hello,

I have a need to customize the header part of the RadPanelBarItems, by adding a checkbox (see below). When I make this change, the text color used for that particular RadPanelBarItem (in this case "Five") is not the same as the defaults (during mouse over or selection).

How can I get the default behavior of the Black color font when selected (or mouse over) on my customized RadPanelBarItem. The only thing I need to do is add a checkbox to the header as shown.

In the picture below items "One", "Two", "Three" and "Four" use default behavior. "Five" has the customized header.

Thanks in advance

Mouse over or selected "Five". Notice the "White" font does not change to Black.

Mouse over or selected "Two". Notice that the font changes to "Black" - desired behavior

 

   <telerik:RadPanelBar>
            <telerik:RadPanelBarItem Header="One">
            </telerik:RadPanelBarItem>
            <telerik:RadPanelBarItem Header="Two">
            </telerik:RadPanelBarItem>
            <telerik:RadPanelBarItem Header="Three" />
            <telerik:RadPanelBarItem Header="Four" />

            <telerik:RadPanelBarItem>
                <telerik:RadPanelBarItem.Header>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <TextBlock Grid.Column="0" Text="Five" />
                        <CheckBox Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Grid>
                </telerik:RadPanelBarItem.Header>
            </telerik:RadPanelBarItem>
        </telerik:RadPanelBar>

[Dilyan Traykov]

Hello Priya,

Thank you for the provided images and code snippet.

To achieve the desired result, you can add the following binding for the Foreground of the TextBlock inside the panel bar item Header:

            <telerik:RadPanelBarItem>
                <telerik:RadPanelBarItem.Header>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <TextBlock Foreground="{Binding Foreground, RelativeSource={RelativeSource AncestorType=ContentControl}}"
                            Grid.Column="0" Text="Five" />
                        <CheckBox Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Grid>
                </telerik:RadPanelBarItem.Header>
            </telerik:RadPanelBarItem>

This is required as the items have a visual state which is activated when the items are selected which changes the Foreground property of the Header element of the control template but this Foreground will not automatically be inherited by the TextBlock in the custom header template.

Please give this a try and let me know if it provides the expected result.

Regards,
Dilyan Traykov
Progress Telerik

[Priya]

That worked. Thank you.