How to Change the SelectedItem Foreground Text of ListBox Item

Question

I have the following ListBox below. I am not sure how to change the Foreground of a selected item's textblock text when an item is selected, and then back to the original foreground color when an item is unselected (most likely occurring when another item in the ListBox is selected afterwards)?

<ListBox Name="ListBox" SelectionMode="Single" ItemsSource="{Binding}" Margin="{Binding}"
                     toolkit:TiltEffect.IsTiltEnabled="True" SelectionChanged="ListBox_SelectionChanged" >
                    <ListBox.ItemsPanel>
                        <ItemsPanelTemplate>
                            <toolkit:WrapPanel ItemWidth="159" ItemHeight="Auto" />
                        </ItemsPanelTemplate>
                    </ListBox.ItemsPanel>
                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Vertical"  >
                                <Image Source="{Binding Thumbnail}" Width="155" Height="155" />
                                <TextBlock Text="{Binding Name}" TextWrapping="Wrap" FontSize="{StaticResource PhoneFontSizeNormal}" VerticalAlignment="Center" HorizontalAlignment="Center" />
                            </StackPanel>
                        </DataTemplate>
                    </ListBox.ItemTemplate>
                </ListBox>

Answer 1

You have to edit ItemContainerStyle (Edit additional templates > Edit generated Item Container (ItemContainerStyle)).

Within ItemContainerStyle is Selected visual state and you can change it.

<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}">
                    <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="Foreground" Storyboard.TargetName="ContentContainer">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="YOUR_NEW_COLOR"/>
                                    </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>

Answer 2

I am considering that the ItemsSource of your ListBox is bound to an ObservableCollection of an examle class test.cs as below

ObservableCollection<test> coll = new ObservableCollection<test>();

and the DataContext is ListBox.DataContext = coll;

Bind the Foreground property of your TextBlock in the ListBoxItemTemplate

<TextBlock Text="{Binding Name}" Foreground="{Binding foreground}" TextWrapping="Wrap" FontSize="{StaticResource PhoneFontSizeNormal}" VerticalAlignment="Center" HorizontalAlignment="Center" />

Now define your SelectionChanged event

private void ListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    test tItem = (sender as ListBox).SelectedItem as test;
    test.foreground = "#FFCB202D"; //this will change the color of the TextBlock
}

Make sure you extend your class test.cs with INotifyPropertyChanged and define the property foreground with the same or else dynamic changes will not be reflected.

    private string tmpforeground;
    public string foreground
    {
        get
        {
            return tmpforeground;
        }

        set
        {
            if (tmpforeground== value)
                return;
            tmpforeground= value;
            NotifyPropertyChanged("foreground");
        }
    }

Also note that if you want the textblock to change color to green on one tap and then change its color again by tapping again, SelectionChanged event won't work, because it works only when a different item is selected. So if you want change of color on consecutive taps then use Tap event instead

<ListBox Name="ListBox" SelectionMode="Single" ItemsSource="{Binding}" Margin="{Binding}"
                 toolkit:TiltEffect.IsTiltEnabled="True" Tap="ListBox_Tap" >

private void ListBox_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
    test tItem = (sender as ListBox).SelectedItem as test;
    test.foreground = "#FFCB202D";
}