Changing foreground when select an item

[Berthold]

Hi,
I want to change background AND foreground-color of an selected item in the panel bar.
Background is an easy task, whereas foreground seems to be hard work.

There is another thread "change color of text when "MouseOver" where a Interaction.Triggers is used to handle a similar problem. Unfortunately I have no idea how to use this solution with a HierarchicalDataTemplate
xaml:

 

 

 

<telerik:RadPanelBar x:Name="SideNavigation" ItemTemplate="{StaticResource NavigationTopItem}" ItemContainerStyle="{StaticResource SideMenubarHeader}" Selected="SideNavigation_Selected"/>

 

ItemTemplate:

 

 

 

<telerik:HierarchicalDataTemplate x:Key="NavigationTopItem" ItemsSource="{Binding SubItems}" ItemTemplate="{StaticResource NavigationSubItem1}">

 

 

 

 

   <TextBlock Text="{Binding Name}" Tag="{Binding Url}" FontWeight="Bold" Margin="10 4 0 4"/>

 

 

 

 

</telerik:HierarchicalDataTemplate>

 

ItemContainerTemplate:

<

 

 

Style x:Key="SideMenubarHeader" TargetType="telerikNavigation:RadPanelBarItem">

 

 

 

 

<Setter Property="IsExpanded" Value="True"/>

 

 

 

 

<Setter Property="Template" Value="{StaticResource SideMenubarHeaderTemplate}"/>

 

 

 

 

<Setter Property="ChildItemsTemplate" Value="{StaticResource SideMenubarHeaderTemplate}"/>

 

 

 

 

</Style>

 

TemplateStyle (I've delete some unimportant lines):

 

 

 

<ControlTemplate x:Key="SideMenubarHeaderTemplate" TargetType="telerikNavigation:RadPanelBarItem">

 

 

 

 

.....

 

 

 

<VisualStateGroup x:Name="SelectionStates">

 

 

 

 

<VisualState x:Name="Unselected"/>

 

 

 

 

<VisualState x:Name="Selected">

 

 

 

 

<Storyboard>

 

 

 

 

<DoubleAnimation Duration="0" Storyboard.TargetName="SelectedBorder" Storyboard.TargetProperty="Opacity" To="1"/>

 

 

 

 

</Storyboard>

 

 

 

 

</VisualState>

 

 

 

 

</VisualStateGroup>

 

 

 

 

<VisualStateGroup x:Name="ExpandStates">

 

 

 

 

<VisualState x:Name="Expanded">

 

 

 

 

<Storyboard>

 

 

 

 

<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ItemsContainer" Storyboard.TargetProperty="Visibility">

 

 

 

 

<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>

 

 

 

 

</ObjectAnimationUsingKeyFrames>

 

 

 

 

<DoubleAnimation Duration="0:0:0.2" Storyboard.TargetName="ItemsContainer" Storyboard.TargetProperty="Opacity" From="0.0" To="1.0"/>

 

 

 

 

</Storyboard>

 

 

 

 

</VisualState>

 

 

 

 

<VisualState x:Name="Collapsed"/>

 

 

 

 

</VisualStateGroup>

 

 

 

 

<VisualStateGroup x:Name="FocusStates">

 

 

 

 

<VisualState x:Name="Focused">

 

 

 

 

 

</VisualState>

 

 

 

 

<VisualState x:Name="Unfocused"/>

 

 

 

 

</VisualStateGroup>

 

 

 

 

</VisualStateManager.VisualStateGroups>

 

 

 

 

<Border BorderBrush="Gainsboro" BorderThickness="0,1" />

 

 

 

 

<Border x:Name="SelectedBorder" Opacity="0" BorderBrush="Gainsboro" BorderThickness="0,1" Background="{StaticResource HighLightColorBGBrush}" >

 

 

 

 

</Border>

 

 

 

 

<ContentPresenter x:Name="Header" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Grid.ColumnSpan="4" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" OpacityMask="Black"/>

 

 

 

 

<!--TextBlock x:Name="ContentElement" Text="how to get the text of the item? Binding Header" Foreground="White" Opacity="0"/-->

 

 

 

 

<Grid x:Name="ItemsContainer" Visibility="Collapsed" Grid.Row="1">

 

 

 

 

<Telerik_Windows_Controls_Primitives:LayoutTransformControl x:Name="transformationRoot">

 

 

 

 

<ItemsPresenter/>

 

 

 

 

</Telerik_Windows_Controls_Primitives:LayoutTransformControl>

 

 

 

 

</Grid>

 

 

 

 

</Grid>

 

 

 

 

</ControlTemplate>

 

As I sad - that worked for background, not foreground
I also used a TextBlock which I set to visible (see comment above). That worked, but I couldn't get the text of the item: Text="{TemplateBinding Header}" didn't work.

Thanks for your help - I'm really desperated
Berthold

Ps.: maybe I should use another control for my sidebar-navigation (see attached screenshot)

[Tina Stancheva]

Hello Berthold,

In order to implement this scenario it is best to data bind the RadPanelBarItem's Foreground property  to appropriate property from the business class. For example, if the ViewModel contains an IsSelected property, it can be data bound to the IsSelected property of the RadPanelBarItem in TwoWay mode using ContainerBindings. Since this will update the IsSelected property whenever a RadPanelBarItem is selected, the same property can be used when data binding the Foreground property of the RadPanelBarItem.

I prepared a sample project illustrating this approach. Give it a try and let me know if it works for you.

Also in the "change color of text when "MouseOver" thread you can find an example illustrating how to use the VisualStateManager to change the Foreground of a UserControl defined in the HierarchicalDataTemplate of the RadPanelBarItems.

Kind regards,
Tina Stancheva
the Telerik team