WP8 突出显示 SelectedItem LongListSelector [英] WP8 Highlight SelectedItem LongListSelector

问题描述

我关心的是在我的 LongListSelector 中突出显示选定的项目当用户点击它时.

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

我尝试了这个解决方案:http://code.msdn.microsoft.com/windowsapps/Highlight-a-selected-item-30ced444#content

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

但是我还是有问题.
在我的项目中，LongListSelector 填充了 90~100 个项目，如果我点击 x^th 元素，(x+20)^th，(x+40)^th、(x+60)^th、(x+80)^th... 也被突出显示.这怎么可能?这是什么原因造成的?

我尝试调试，我注意到userControlList"(通过上面的链接查看 MyLongListSelector1_SelectionChanged 事件处理程序)在执行GetItemsRecursive"后有 20 个元素，而不是我预期的 90~100 个元素.

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.

如果你不能解决这个问题，那么有谁知道如何在 LongListSelector 中实际突出显示选定的项目?(改用列表框不是一种选择)

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)

推荐答案

我们给你写一个更容易理解的更好的方案怎么样?另外，您可以有任何高光颜色的组合吗?我将它用于我的一些应用程序.它所做的只是将背景颜色绑定到类.如果选中它返回类的突出显示颜色，否则返回非突出显示颜色.

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; }
}

<小时>

让我们创建 ObservableCollection 并设置 LongListSelector 的 ItemSource.

---

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();
    }

<小时>

现在是 XAML

---

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;
        }
    }

<小时>

您已经完成了，现在您可以使用任何颜色和每个项目的自定义颜色突出显示，而不会与凌乱的 VisualState 管理器混淆.

---

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.

这篇关于WP8 突出显示 SelectedItem LongListSelector的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！