RadPanelBar selection text color

1 Answer 24 Views
PanelBar
Priya
Top achievements
Rank 1
Iron
Iron
Iron
Priya asked on 06 Apr 2022, 11:58 PM

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>

1 Answer, 1 is accepted

Sort by
0
Dilyan Traykov
Telerik team
answered on 11 Apr 2022, 11:49 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Priya
Top achievements
Rank 1
Iron
Iron
Iron
commented on 12 Apr 2022, 07:55 PM

That worked. Thank you.
Tags
PanelBar
Asked by
Priya
Top achievements
Rank 1
Iron
Iron
Iron
Answers by
Dilyan Traykov
Telerik team
Share this question
or