在UWP/WinRT中使用模板選擇器選擇ListboxItem模板

Question

我有一組ListBox項目用於顯示手掌的不同手指。我使用TemplateSelector來顯示模板，單個手指的每個模板。

現在我的問題是，當選擇Listbox項目時，需要顯示不同的彩色圖像，這對每個項目都會有所不同，並且其他圖像應該是模板中設置的灰色圖像。

問題是，如何爲列表框中的每個選定項目設置不同的選定圖像。

模板選擇： -

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國，但即使在那裏，我不能設置動態列表框中選定項目的內容。

有關如何實現此目的的任何建議？

感謝提前。

Answer 1

現在我的問題是，當選擇Listbox項目時，需要顯示不同的彩色圖像，這對每個項目都是不同的，並且其他圖像應該是灰色的，如在模板中設置的。

從您的代碼我認爲您的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)); 
     } 
    } 
} 

該樣本改變圖像源選擇項目時。