根据 TextBox 值突出显示 ListView 行

Question

1. 应根据用户在文本框中输入的值突出显示整行。
2. 如果列表视图的“地名”列与该值匹配。

我已经能够根据数据触发器中的硬编码值实现突出显示，如下所示：

<DataTrigger Binding="{Binding Name}" Value="Manali"> <!-- this value should be dynamic based on element --> 
    <Setter Property="Background" Value="Yellow" />
 </DataTrigger>

你能指出我正确的方向吗，我可以绑定Value 的属性吗？ 运行时数据触发？

<Grid>
    <Grid.Row>1</Grid.Row>
    <Grid.Column>1</Grid.Column>
    <StackPanel VerticalAlignment="Stretch">

        <Label Content="Highlight word" />
        <TextBox
            x:Name="HighlightTextBox"
            Margin="0,0,0,20"
            Text="-TODO- Highlight Place Name column, based on entered value in this text box" />

        <ListView x:Name="AbListView" GridViewColumnHeader.Click="AbListView_OnClick">
            <ListView.Resources>
                <Style TargetType="{x:Type ListViewItem}">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding Name}" Value="Manali">
                            <Setter Property="Background" Value="Yellow" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </ListView.Resources>
            <ListView.View>

                <GridView>
                    <GridViewColumn
                        Width="Auto"
                        DisplayMemberBinding="{Binding Path=Name}"
                        Header="Place Name" />

                    <GridViewColumn
                        Width="500"
                        DisplayMemberBinding="{Binding Path=State}"
                        Header="State" />

                </GridView>
            </ListView.View>
        </ListView>
        <Button
            x:Name="ApplyLabels"
            Margin="15,15,15,15"
            Click="ApplyLabels_OnClick">
            Apply Labels
        </Button>
    </StackPanel>
</Grid>

代码隐藏：

public partial class MainWindow : Window
 {
    public ObservableCollection<TouristPlace> TouristPlacces =>
        new ObservableCollection<TouristPlace>(new List<TouristPlace>()
        {
            new TouristPlace("Manali", "KA", 51),
            new TouristPlace("Coorg", "KA", 10),
            new TouristPlace("Taj Mahal", "UP", 100),
            new TouristPlace("Jagannath Temple", "OR", 90),
        });

    public MainWindow()
    {
        InitializeComponent();
        AbListView.ItemsSource = TouristPlacces;
    }
}

Answer 1

我可以在运行时绑定 Data Trigger 的 Value 属性吗？

简短回答：不，你不能。

但是视图或视图模型可以（并且应该）处理突出显示。鉴于您当前的实现，您可以像这样处理TextBox 的TextChanged 事件：

private void HighlightTextBox_TextChanged(object sender, TextChangedEventArgs e)
{
    if (IsLoaded)
    {
        string text = HighlightTextBox.Text;
        foreach (var place in AbListView.Items.OfType<TouristPlace>())
            place.IsHighlighted = place.Name == text;
    }
}

TouristPlace 应该有一个IsHighlighted 属性并实现INotifyPropertyChanged 接口：

public class TouristPlace : INotifyPropertyChanged
{
    public TouristPlace(string name, string state, int id)
    {
        Name = name;
        State = state;
        Id = id;
    }

    public string Name { get; }
    public string State { get; }
    public int Id { get; }

    private bool _isHighlighted;
    public bool IsHighlighted
    {
        get { return _isHighlighted; }
        set { _isHighlighted = value; NotifyPropertyChanged(); }
    }

    public event PropertyChangedEventHandler PropertyChanged; 
    private void NotifyPropertyChanged([CallerMemberName] string propertyName = "") =>
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}

XAML：

<TextBox
    x:Name="HighlightTextBox"
    Margin="0,0,0,20"
    Text="-TODO- Highlight Place Name column, based on entered value in this text box"
    TextChanged="HighlightTextBox_TextChanged"/>

<ListView x:Name="AbListView" ItemsSource="{Binding TouristPlacces}" GridViewColumnHeader.Click="AbListView_OnClick">
    <ListView.Resources>
        <Style TargetType="{x:Type ListViewItem}">
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsHighlighted}" Value="True">
                    <Setter Property="Background" Value="Yellow" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </ListView.Resources>
    <ListView.View>

        <GridView>
            <GridViewColumn
                        Width="Auto"
                        DisplayMemberBinding="{Binding Path=Name}"
                        Header="Place Name" />

            <GridViewColumn
                        Width="500"
                        DisplayMemberBinding="{Binding Path=State}"
                        Header="State" />

        </GridView>
    </ListView.View>
</ListView>