0

我有一组列表框项目,用于显示手掌的不同手指。我正在使用 TemplateSelector 来显示模板,每个模板对应一个手指。

Now my problem is, when the Listbox item is selected, a different colorful image needs to be displayed which would be different for each item, and othewise the image should be a gray one as set in the template.

问题是,如何为列表框中的每个选定项目设置不同的选定图像。

模板选择器:-

protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
        {
            DataTemplate dataTemplate = DefaultTemplate;
            if (container is FrameworkElement && item is ILivescanFingerprintReviewItem)
            {
                var fingerPrintReviewItem = item as ILivescanFingerprintReviewItem;
                // Right Rolled. 
                if (fingerPrintReviewItem.Header == "R. Thumb")
                    dataTemplate = RolledRightThumbTemplate;
                else if (fingerPrintReviewItem.Header == "R. Index")
                    dataTemplate = RolledRightIndexTemplate;
                else if (fingerPrintReviewItem.Header == "R. Middle")
                    dataTemplate = RolledRightMiddleTemplate;
                else if (fingerPrintReviewItem.Header == "R. Little")
                    dataTemplate = RolledRightLittleTemplate;
                else if (fingerPrintReviewItem.Header == "R. Ring")
                    dataTemplate = RolledRightRingTemplate;

                // Left Rolled.
                else if (fingerPrintReviewItem.Header == "L. Thumb")
                    dataTemplate = RolledLeftThumbTemplate;

                else if (fingerPrintReviewItem.Header == "L. Index")
                    dataTemplate = RolledLeftIndexTemplate;

                else if (fingerPrintReviewItem.Header == "L. Middle")
                    dataTemplate = RolledLeftMiddleTemplate;

                else if (fingerPrintReviewItem.Header == "L. Ring")
                    dataTemplate = RolledLeftRingTemplate;

                else if (fingerPrintReviewItem.Header == "L. Little")
                    dataTemplate = RolledLeftLittleTemplate;

                // Slaps.
                else if (fingerPrintReviewItem.Header == "Slap Thumbs")
                    dataTemplate = SlapThumbsTemplate;
                else if (fingerPrintReviewItem.Header == "R. Slap")
                    dataTemplate = SlapRightTemplate;
                else if (fingerPrintReviewItem.Header == "L. Slap")
                    dataTemplate = SlapLeftTemplate;

                else dataTemplate = DefaultTemplate;
            }
            return dataTemplate;
        }

XAML 中的模板选择器:-

<controls:LivescanFingerprintIconTemplateSelector x:Key="LivescanFingerprintIconTemplateSelector" 
                                                          RolledRightIndexTemplate="{StaticResource RolledRightIndexTemplate}"
                                                          RolledRightThumbTemplate="{StaticResource RolledRightThumbTemplate}"
                                                          RolledRightMiddleTemplate="{StaticResource RolledRightMiddleTemplate}"
                                                          RolledRightRingTemplate="{StaticResource RolledRightRingTemplate}"
                                                          RolledRightLittleTemplate="{StaticResource RolledRightLittleTemplate}"

                                                          RolledLeftIndexTemplate="{StaticResource RolledLeftIndexTemplate}"
                                                          RolledLeftMiddleTemplate="{StaticResource RolledLeftMiddleTemplate}"
                                                          RolledLeftThumbTemplate="{StaticResource RolledLeftThumbTemplate}"
                                                          RolledLeftRingTemplate="{StaticResource RolledLeftRingTemplate}"
                                                          RolledLeftLittleTemplate="{StaticResource RolledLeftLittleTemplate}"

                                                          SlapLeftTemplate="{StaticResource SlapLeftTemplate}"
                                                          SlapRightTemplate="{StaticResource SlapRightTemplate}"
                                                          SlapThumbsTemplate="{StaticResource SlapThumbsTemplate}"

                                                          DefaultTemplate="{StaticResource TenprintFingerItemTemplate}"/>

我尝试在 ItemContainer 样式中使用视觉状态,但即使在那里我也无法为列表框中的选定项目设置动态内容。

关于如何实现这一目标的任何建议?

提前致谢。

4

1 回答 1

0

Now my problem is, when the Listbox item is selected, a different colorful image needs to be displayed which would be different for each item, and othewise the image should be a gray one as set in the template.

从您的代码中,我认为您ItemTemplateSelector是用于显示不同手指的图像,它与每个项目的“已选择”或“未选择”状态无关。你有两种图像,一种是彩色图像,另一种是灰色图像。因此,您可以使用INotifyPropertyChanged来执行此操作。

例如这里:

<ListBox x:Name="listBox" ItemsSource="{x:Bind list}" SelectionChanged="ListBox_SelectionChanged">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding ImageAddress}" Width="150" Height="150" />
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

后面的代码:

private ObservableCollection<MyListBoxItem> list = new ObservableCollection<MyListBoxItem>();

public MainPage()
{
    this.InitializeComponent();
}

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    list.Clear();
    list.Add(new MyListBoxItem { ImageAddressUnselected = "Assets/2.jpeg", ImageAddressSelected = "Assets/1.jpeg" });
    list.Add(new MyListBoxItem { ImageAddressUnselected = "Assets/2.jpeg", ImageAddressSelected = "Assets/1.jpeg" });
    list.Add(new MyListBoxItem { ImageAddressUnselected = "Assets/2.jpeg", ImageAddressSelected = "Assets/1.jpeg" });
    list.Add(new MyListBoxItem { ImageAddressUnselected = "Assets/2.jpeg", ImageAddressSelected = "Assets/1.jpeg" });
}

private void ListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    foreach (var items in listBox.Items)
    {
        var eachitem = items as MyListBoxItem;
        eachitem.IsSelected = false;
        eachitem.ImageAddress = eachitem.ImageAddressUnselected;
    }
    MyListBoxItem selectedItem = listBox.SelectedItem as MyListBoxItem;
    selectedItem.IsSelected = true;
    selectedItem.ImageAddress = selectedItem.ImageAddressSelected;
}

而我MyListBoxItem的是这样的:

public class MyListBoxItem : INotifyPropertyChanged
{
    private string _imageaddressunselected;

    public string ImageAddressUnselected
    {
        get { return _imageaddressunselected; }
        set { _imageaddressunselected = value; }
    }

    private string _imageaddressselected;

    public string ImageAddressSelected
    {
        get { return _imageaddressselected; }
        set { _imageaddressselected = value; }
    }

    private bool _isselected;

    public bool IsSelected
    {
        get { return _isselected; }
        set
        {
            _isselected = value;
            OnPropertyChanged();
        }
    }

    private string _imageAddress;

    public string ImageAddress
    {
        get
        {
            if (_isselected == true)
            {
                _imageAddress = _imageaddressselected;
            }
            else
            {
                _imageAddress = _imageaddressunselected;
            }
            return _imageAddress;
        }
        set
        {
            if (value != _imageAddress)
            {
                _imageAddress = value;
                OnPropertyChanged();
            }
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    private void OnPropertyChanged([CallerMemberName] string propertyName = "")
    {
        if (this.PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

此示例在选择项目时更改图像源。

于 2016-05-16T07:50:47.180 回答