Selected ListboxItem template using Template Selector in UWP/WinRT

Question

I have a set of Listbox items that are used to display the different fingers of a palm. I am using TemplateSelector to display the templates, each template for a single finger.

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.

The question is, how do I set a different selected image for each selected item in the listbox.

The Template Selector :-

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

The template selector in 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 tried to use Visual States in the ItemContainer Style but even there I am not able to set dynamic content for selected items in the listbox.

Any suggestions on how to achieve this?

THANKS IN ADVANCE.

Answer 1

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.

From your code I think your ItemTemplateSelector is for showing images of different fingers, it is not related to the "selected" or "unselected" state of each items. And you have two kinds of images, the images of one kind are with colors, the other kind has the gray images. So you can use INotifyPropertyChanged to do this.

For example here:

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

code behind:

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

And my MyListBoxItem is like this:

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

This sample changes the image source when the item is selected.