Question

我有一组列表框项目，用于显示手掌的不同手指。我正在使用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}"/>

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

有关如何实现这一目标的任何建议吗？

感谢先生。

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

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

使用UWP / WinRT中的模板选择器选择ListboxItem模板

1 个答案: