locked
Change SelectedItem Foreground color in Listbox RRS feed

  • Question

  • Hi... I'm displaying some data in a listbox. I want to change the Foreground color of the selected item. I have been trying to do this for quite sometime and couldn't figure it out. I'm able to change the FontWeight of SelectedItem to Bold, but for some reason, changing foreground color is not working. I tried the solutions suggested in http://social.msdn.microsoft.com/Forums/en/windowsphone7series/thread/3d3a4ce3-4291-4876-ab4d-720d66f295d8. Here is my code. Can someone point me what I'm missing? Bold
    Tuesday, February 8, 2011 2:03 PM

Answers

  • Ok... I found out the issue... I was setting the Foreground property in my DataTemplate Foreground="#FF333333". This will not work. I removed this and added it to the style and now it works... :( I was breaking my head for one whole day... Here is the working code if someone is looking for it...


    <Style x:Key="ListBoxItemStyle1" TargetType="ListBoxItem">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Foreground" Value="Black"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="HorizontalContentAlignment" Value="Left"/>
        <Setter Property="VerticalContentAlignment" Value="Top"/>
        <Setter Property="Template">
    <Setter.Value>
       <ControlTemplate TargetType="ListBoxItem">
    <Border x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
       <VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="CommonStates">
       <VisualState x:Name="Normal"/>
       <VisualState x:Name="MouseOver"/>
       <VisualState x:Name="Disabled">
    <Storyboard>
       <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/>
       </ObjectAnimationUsingKeyFrames>
       <DoubleAnimation Duration="0" To=".5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentContainer"/>
    </Storyboard>
       </VisualState>
    </VisualStateGroup>
    <VisualStateGroup x:Name="SelectionStates">
       <VisualState x:Name="Unselected"/>
       <VisualState x:Name="Selected">
    <Storyboard>
       <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Control.FontWeight)" Storyboard.TargetName="ContentContainer">
    <DiscreteObjectKeyFrame KeyTime="0">
       <DiscreteObjectKeyFrame.Value>
    <FontWeight>Bold</FontWeight>
       </DiscreteObjectKeyFrame.Value>
    </DiscreteObjectKeyFrame>
       </ObjectAnimationUsingKeyFrames>
       <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
    <DiscreteObjectKeyFrame KeyTime="0" Value="Red"/>
       </ObjectAnimationUsingKeyFrames>
    </Storyboard>
       </VisualState>
    </VisualStateGroup>
       </VisualStateManager.VisualStateGroups>
       <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
    </Border>
       </ControlTemplate>
    </Setter.Value>
        </Setter>
    </Style>


    <ListBox Name="listBox1" Height="560" ItemsSource="{Binding itemData}" ItemContainerStyle="{StaticResource ListBoxItemStyle1}">
        <ListBox.ItemTemplate>
    <DataTemplate>
       <TextBlock Text="{Binding itemLabel}" FontSize="30" Margin="0,0,0,30" TextWrapping="Wrap" Width="450"/>
    </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

    Tuesday, February 8, 2011 3:30 PM

All replies

  • Oops.. For some reason I'm not able to paste my code here.
    Tuesday, February 8, 2011 2:10 PM
  • To post code you must change your posting style at your forum's profile

    Forum Options: Content Editor: RickText
    Tuesday, February 8, 2011 2:21 PM
  • Thanks David.. Here is my code. Can someone please help me to identify the missing piece?

    <Style x:Key="ListBoxItemStyle1" TargetType="ListBoxItem">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="Padding" Value="0"/>
    <Setter Property="HorizontalContentAlignment" Value="Left"/>
    <Setter Property="VerticalContentAlignment" Value="Top"/>
    <Setter Property="Template">
    <Setter.Value>
    <ControlTemplate TargetType="ListBoxItem">
    <Border x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
       <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
       <VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="CommonStates">
    <VisualState x:Name="Normal"/>
    <VisualState x:Name="MouseOver"/>
    <VisualState x:Name="Disabled">
    <Storyboard>
    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/>
    </ObjectAnimationUsingKeyFrames>
    <DoubleAnimation Duration="0" To=".5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentContainer"/>
    </Storyboard>
    </VisualState>
    </VisualStateGroup>
    <VisualStateGroup x:Name="SelectionStates">
    <VisualState x:Name="Unselected"/>
    <VisualState x:Name="Selected">
    <Storyboard>
    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Control.FontWeight)" Storyboard.TargetName="ContentContainer">
    <DiscreteObjectKeyFrame KeyTime="0">
    <DiscreteObjectKeyFrame.Value>
    <FontWeight>Bold</FontWeight>
    </DiscreteObjectKeyFrame.Value>
    </DiscreteObjectKeyFrame>
    </ObjectAnimationUsingKeyFrames>
       <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Control.Foreground)" Storyboard.TargetName="ContentContainer">
    <DiscreteObjectKeyFrame KeyTime="0" Value="Red" />
       </ObjectAnimationUsingKeyFrames>
    </Storyboard>
    </VisualState>
    </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    </Border>
    </ControlTemplate>
    </Setter.Value>
    </Setter>
    </Style>



    <ListBox Name="listBox1" Height="560" ItemsSource="{Binding itemData}" ItemContainerStyle="{StaticResource ListBoxItemStyle1}">
        <ListBox.ItemTemplate>
    <DataTemplate>
       <TextBlock Text="{Binding itemLabel}" FontSize="30" Foreground="#FF333333" Margin="0,0,0,30" TextWrapping="Wrap" Width="450"/>
    </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

    Tuesday, February 8, 2011 2:43 PM
  • Check this example: Animating ListBox SelectedItem with flipping effect in WP7
    It demonstrates how to customize the Selected state of the ListBoxItem. In your case in order to change the Foreground color you will need the following code:
        <VisualState x:Name="Selected">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                            <DiscreteObjectKeyFrame KeyTime="0">
                                <DiscreteObjectKeyFrame.Value>
                                    <SolidColorBrush Color="Red"/>
                                </DiscreteObjectKeyFrame.Value>
                            </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

    I hope that this will help you.
    Tuesday, February 8, 2011 2:44 PM
  • Ok... I found out the issue... I was setting the Foreground property in my DataTemplate Foreground="#FF333333". This will not work. I removed this and added it to the style and now it works... :( I was breaking my head for one whole day... Here is the working code if someone is looking for it...


    <Style x:Key="ListBoxItemStyle1" TargetType="ListBoxItem">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Foreground" Value="Black"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="HorizontalContentAlignment" Value="Left"/>
        <Setter Property="VerticalContentAlignment" Value="Top"/>
        <Setter Property="Template">
    <Setter.Value>
       <ControlTemplate TargetType="ListBoxItem">
    <Border x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
       <VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="CommonStates">
       <VisualState x:Name="Normal"/>
       <VisualState x:Name="MouseOver"/>
       <VisualState x:Name="Disabled">
    <Storyboard>
       <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="LayoutRoot">
    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TransparentBrush}"/>
       </ObjectAnimationUsingKeyFrames>
       <DoubleAnimation Duration="0" To=".5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentContainer"/>
    </Storyboard>
       </VisualState>
    </VisualStateGroup>
    <VisualStateGroup x:Name="SelectionStates">
       <VisualState x:Name="Unselected"/>
       <VisualState x:Name="Selected">
    <Storyboard>
       <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(Control.FontWeight)" Storyboard.TargetName="ContentContainer">
    <DiscreteObjectKeyFrame KeyTime="0">
       <DiscreteObjectKeyFrame.Value>
    <FontWeight>Bold</FontWeight>
       </DiscreteObjectKeyFrame.Value>
    </DiscreteObjectKeyFrame>
       </ObjectAnimationUsingKeyFrames>
       <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
    <DiscreteObjectKeyFrame KeyTime="0" Value="Red"/>
       </ObjectAnimationUsingKeyFrames>
    </Storyboard>
       </VisualState>
    </VisualStateGroup>
       </VisualStateManager.VisualStateGroups>
       <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
    </Border>
       </ControlTemplate>
    </Setter.Value>
        </Setter>
    </Style>


    <ListBox Name="listBox1" Height="560" ItemsSource="{Binding itemData}" ItemContainerStyle="{StaticResource ListBoxItemStyle1}">
        <ListBox.ItemTemplate>
    <DataTemplate>
       <TextBlock Text="{Binding itemLabel}" FontSize="30" Margin="0,0,0,30" TextWrapping="Wrap" Width="450"/>
    </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

    Tuesday, February 8, 2011 3:30 PM
  • Can someone explain why this seemingly simple task - modifying the foreground color of a selected list box item - has to be so mind-bogglingly complicated?  I have used this and it works perfectly, but I cannot understand why so much markup has to be written.  In all seriousness.  I am looking for an explanation.
    Tuesday, January 24, 2012 10:27 PM
  • Hi Joshua,

    I would describe it this way. Suppose you have software and you want to change one parameter, but that parameter isn't exposed as an API. However, you do have the source code, so you copy the entire source code and change the 1 line of code to set your custom parameter. That's roughly what is happening here.

    The default ListBoxItem has a template that defines its appearance and behavior. The selected foreground color is defined in the template but it isn't configured to be settable externally (e.g. as a property). The way around this is to make a copy of the entire default template, and update the 1 line of code to change the selected foreground color. It is certainly a messy procedure for a small change.


    Richard Woo
    Tuesday, January 24, 2012 11:52 PM
  • It is that easy:

        <SolidColorBrush x:Name="ListBoxItemSelectedBackgroundThemeBrush" Color="Teal"/>

    Regards,
    Paul
    Monday, June 4, 2012 7:06 AM
  • It is that easy:

    <SolidColorBrush x:Name="ListBoxItemSelectedBackgroundThemeBrush" Color="Teal"/>

    Regards,
    Paul
    Hi Paul,

    Can you elaborate on that? Where does the line of code go?

    A search on "ListBoxItemSelectedBackgroundThemeBrush" returns no results from Bing and only one result from Google that refers to Windows 8 themes, not Windows Phone or Silverlight.


    Richard Woo
    Monday, June 4, 2012 7:27 AM