根据 TextBox 值突出显示 ListView 行

时间:2021-05-21 12:53:32

标签: c# wpf xamarin.forms

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

我已经能够基于数据触发器中的硬编码值实现突出显示,如下所示:

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

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

enter image description here

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

1 个答案:

答案 0 :(得分:3)

<块引用>

我可以在运行时绑定数据触发器的 Value 属性吗?

简短回答:不,你不能。

但是视图或视图模型可以(并且应该)处理突出显示。鉴于您当前的实现,您可以像这样处理 TextChangedTextBox 事件:

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>

enter image description here