c# - WP8 Highlight SelectedItem LongListSelector

Question

my concern is to highlight a selected item in my LongListSelector when the user taps on it.

I tried this solution: http://code.msdn.microsoft.com/windowsapps/Highlight-a-selected-item-30ced444#content

But i still have a problem.
In my project, the LongListSelector is filled up with 90~100 items and if i tap on the x^th element, the (x+20)^th, the (x+40)^th, the (x+60)^th, the (x+80)^th... get highlighted too. How is that possible? What does cause this?

I tried to debug, and what i noticed is that "userControlList" (see the MyLongListSelector1_SelectionChanged event handler by following the link above) has 20 elements after the execution of "GetItemsRecursive", and not 90~100 as i, at least, expected.

If you can't solve this, then does anyone know how to actually highlight selected items in LongListSelector? (using Listbox instead is not an option)

Answer 1

How about we write you a better one that is much easier to understand? Plus you can have any combination of highlight colors? I use this for a few of my apps. All it does is it binds the background color to the class as well. If it is selected it returns the highlight color of the class if not it returns the non highlight color.

---

Sample Data Point - as you can see you can set a highlight color and a no highlight color

public class sample_data : INotifyPropertyChanged
{
    // Create the OnPropertyChanged method to raise the event
    public event PropertyChangedEventHandler PropertyChanged;         
    protected void OnPropertyChanged(string name)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(name));
        }
    }

    public sample_data(string name)
    {
        this.Name = name;
        this.IsSelected = false;
        this.NonHighlightColor = new SolidColorBrush(Colors.Transparent);
        this.HighLightColor = new SolidColorBrush(Colors.Red);
    }      

    public string Name { get; set; }

    private bool _is_selected;
    public bool IsSelected
    {
        get { return _is_selected; }
        set
        {
            _is_selected = value;
            OnPropertyChanged("HighlightBackgroundColor");
        }
    }

    public SolidColorBrush HighlightBackgroundColor
    {
        get { if (IsSelected) return HighLightColor; else return NonHighlightColor; }
    }

    private SolidColorBrush HighLightColor{ get; set; }

    private SolidColorBrush NonHighlightColor { get; set; }
}

---

Lets create the ObservableCollection and set the LongListSelector's ItemSource.

    private ObservableCollection<sample_data> CreateSampleData()
    {
        ObservableCollection<sample_data> sd = new ObservableCollection<sample_data>();

        sd.Add(new sample_data("Bob"));
        sd.Add(new sample_data("Dan"));
        sd.Add(new sample_data("Kate"));
        sd.Add(new sample_data("Bart"));
        sd.Add(new sample_data("Sanders"));
        sd.Add(new sample_data("Dog"));

        return sd;
    }

    // Constructor
    public MainPage()
    {
        InitializeComponent();

        mylonglist.ItemsSource = CreateSampleData();
    }

---

Now for the XAML

        <phone:LongListSelector x:Name="mylonglist" SelectionChanged="mylonglist_SelectionChanged">
            <phone:LongListSelector.ItemTemplate>
                <DataTemplate>
                    <StackPanel Background="{Binding HighlightBackgroundColor}" Height="100">
                        <TextBlock Text="{Binding Name}"></TextBlock>
                    </StackPanel>
                </DataTemplate>
            </phone:LongListSelector.ItemTemplate>
        </phone:LongListSelector>

---

Code for the Selection Change

    private void mylonglist_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        try
        {
            LongListSelector ls = sender as LongListSelector;
            sample_data selected_item = ls.SelectedItem as sample_data;

            // unselected the previous selections
            foreach (sample_data sd in ls.ItemsSource)
            {
                if (sd != selected_item)
                {
                    sd.IsSelected = false;
                }
            }

            // set the selected item (this will cause the background color to change)
            selected_item.IsSelected = true;
        }
        catch (Exception ex)
        {
            string error = ex.Message;
        }
    }

---

There you have it, now you can highlight with any colors and with custom colors for each item without messing with the messy VisualState Manager.