Выбранный шаблон ListboxItem с помощью шаблона выбора в UWP/WinRT

Question

У меня есть набор элементов Listbox, которые используются для отображения разных пальцев ладони. Я использую TemplateSelector для отображения шаблонов, каждый шаблон для одного пальца.

Теперь моя проблема заключается в том, что при выборе элемента "Список" необходимо отображать другое цветное изображение, которое будет различным для каждого элемента, и в противном случае изображение должно быть серым, как установлено в шаблоне.

Вопрос в том, как установить разные выбранные изображения для каждого выбранного элемента в списке.

Выбор шаблона:-

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}"/>

Я пытался использовать визуальные состояния в стиле I temContainer, но даже там я не могу установить динамическое содержимое для выбранных элементов в списке.

Любые предложения о том, как этого добиться?

ЗАРАНЕЕ СПАСИБО.

Answer 1

Теперь моя проблема заключается в том, что при выборе элемента "Список" необходимо отображать другое цветное изображение, которое будет различным для каждого элемента, и в противном случае изображение должно быть серым, как установлено в шаблоне.

Из вашего кода я думаю, что ваш 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));
        }
    }
}

Этот образец изменяет источник изображения при выборе элемента.