Changing foreground when select an item

2 posts, 0 answers
  1. Berthold
    Berthold avatar
    38 posts
    Member since:
    Jul 2010

    Posted 01 Sep 2010 Link to this post

    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)
  2. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 06 Sep 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. DevCraft banner
Back to Top