如何从 ListView 操作特定的 ListViewItem

Question

我想通过更改 listviewitem 中文本块的前景色来标记 ListView 中的 ListViewItem。我想动态地做到这一点。每当用户选择项目时，应该更改 TextBlock 的前景色。这是寺庙

<ListView Name="SongsListView"
                              IsItemClickEnabled="True"
                              ItemClick="SongsListView_ItemClick"
                          ItemsSource="{x:Bind rootpage.Songs}"
                      VerticalAlignment="Top" 
                      HorizontalAlignment="Stretch">
                        <ListView.ItemTemplate>
                            <DataTemplate x:DataType="model:Song">
                                <controls:DropShadowPanel ShadowOpacity="0.20"
                                          Color="Black"
                                          HorizontalContentAlignment="Stretch"
                                          BlurRadius="10"
                                          OffsetX="0"
                                          OffsetY="7.0">
                                    <Grid HorizontalAlignment="Stretch" CornerRadius="5" Background="{ThemeResource SystemControlAltHighAcrylicElementBrush}">
                                        <StackPanel Orientation="Horizontal">
                                            <TextBlock Text="{x:Bind Name}" Name="songNameTextBlock" TextWrapping="Wrap"/>
                                            <TextBlock Text="{x:Bind Artist}" Name="ArtistNameTextBlock" TextWrapping="Wrap"/>
                                        </StackPanel>
                                    </Grid>
                                </controls:DropShadowPanel>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                        <ListView.ItemContainerStyle>
                            <Style TargetType="ListViewItem">
                                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                                <Setter Property="VerticalContentAlignment" Value="Stretch"/>
                                <Setter Property="Margin" Value="4"/>
                            </Style>
                        </ListView.ItemContainerStyle>
                    </ListView>

 private void SongsListView_ItemClick(object sender, ItemClickEventArgs e)
    {
        //Please write the code for me !
    }

Answer 1

我建议您在 Song 类中定义一个与前景相关的属性，并将其绑定到 TextBlock 的 Foreground 属性。然后你可以使用 Binding/{x:Bind} 在它被选中时改变它的前景色，而不是使用 ItemClick 事件处理方法来查找其中的 TextBlock 控件。

详情请参考以下代码示例：

<ListView Name="SongsListView"
                  IsItemClickEnabled="True"
                  ItemsSource="{x:Bind Songs}"
                  VerticalAlignment="Top" 
                  HorizontalAlignment="Stretch" SelectedItem="{x:Bind currentSelectedItem,Mode=TwoWay,Converter={StaticResource myconverter}}">
        <ListView.ItemTemplate>
            <DataTemplate x:DataType="model:Song">
                <controls:DropShadowPanel ShadowOpacity="0.20"
                                      Color="Black"
                                      HorizontalContentAlignment="Stretch"
                                      BlurRadius="10"
                                      OffsetX="0"
                                      OffsetY="7.0">
                    <Grid HorizontalAlignment="Stretch" CornerRadius="5" Background="{ThemeResource SystemControlAltHighAcrylicElementBrush}">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="{x:Bind Name}" Name="songNameTextBlock" TextWrapping="Wrap" Foreground="{x:Bind customcolor,Mode=OneWay}"/>
                            <TextBlock Text="{x:Bind Artist}" Name="ArtistNameTextBlock" TextWrapping="Wrap" Foreground="{x:Bind customcolor,Mode=OneWay}"/>
                        </StackPanel>
                    </Grid>
                </controls:DropShadowPanel>
            </DataTemplate>
        </ListView.ItemTemplate>
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                <Setter Property="VerticalContentAlignment" Value="Stretch"/>
                <Setter Property="Margin" Value="4"/>
            </Style>
        </ListView.ItemContainerStyle>
</ListView>

<Page.Resources>
    <local:MyConverter x:Key="myconverter"></local:MyConverter>
</Page.Resources>

public sealed partial class MainPage : Page
{

    public ObservableCollection<Song> Songs { get; set; }

    private Song _currentSelectedItem;
    public Song currentSelectedItem
    {
        get { return _currentSelectedItem; }
        set
        {
            if (_currentSelectedItem != null)
            {
                _currentSelectedItem.customcolor = new SolidColorBrush(Colors.Black);
            }
            _currentSelectedItem = value;
            _currentSelectedItem.customcolor = new SolidColorBrush(Colors.Red);
        }
    }


    public MainPage()
    {
        this.InitializeComponent();
        Songs = new ObservableCollection<Song>();
        Songs.Add(new Song() {Name="abc",Artist="Singer1" });
        Songs.Add(new Song {Name="def",Artist="Singer2" });

    }
}

public class Song : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    private void RaisePropertyChanged(string PropertyName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(PropertyName));
        }
    }

    private string _Name;
    public string Name
    {
        get { return _Name; }
        set
        {
            _Name = value;
            RaisePropertyChanged("Name");
        }
    }

    private string _Artist;
    public string Artist
    {
        get { return _Artist; }
        set
        {
            _Artist = value;
            RaisePropertyChanged("Artist");
        }
    }

    private SolidColorBrush _customcolor = new SolidColorBrush(Colors.Black);
    public SolidColorBrush customcolor
    {
        get { return _customcolor; }
        set
        {
            _customcolor = value;
            RaisePropertyChanged("customcolor");
        }
    }
}

public class MyConverter:IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        return value;
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        return value as Song;
    }
}

请注意，当我将currentSelectedItem 绑定到ListView 的SelectedItem 时，我创建了一个转换器类并使用它。因为我使用了x:Bind，所以是编译时间。如果不添加转换器，会报错Invalid binding path 'currentSelectedItem' : Cannot bind type 'AppListView.model.Song' to 'System.Object' without a converter。

此外，当我使用{x:Bind} 将customcolor 绑定到TextBlock 的前景时，您可以看到我设置了Mode=OneWay。这是由于{x:Bind} 的模式默认值为OneTime。如果您不将OneTime 更改为OneWay，您将不会看到前景色发生了变化。