时间戳

首页 > 解决方案 > 搜索结果 TextHighlighter 或 TextRange 是否可以绑定到 UWP XAML 中的 DataTemplate？

xaml - 搜索结果 TextHighlighter 或 TextRange 是否可以绑定到 UWP XAML 中的 DataTemplate？

问题描述

我有一个SearchResult绑定到ListView. 我特别想做的是突出显示搜索结果文本中与用户输入的查询匹配的片段。

相关的 XAML 看起来像这样（省略绒毛）：

<DataTemplate>
   <StackPanel>
      <!-- Search result -->
      <RichTextBlock>
         <!-- Would this idea work? -->
         <RichTextBlock.TextHighlighters>
            <TextHighlighter>
               <TextHighlighter.Ranges>
                  <!-- Add the bound range here-->
                  <!-- {Binding Range} or text highlighter or something -->
               </TextHighlighter.Ranges>
            </TextHighlighter>
         </RichTextBlock.TextHighlighters>
         <Paragraph>
            <Run Text="{Binding Text}"></Run>
         </Paragraph>
      </RichTextBlock>
   </StackPanel>
</DataTemplate>

我可以添加SearchResult类中的任何属性，无论是 aTextHighlighter还是TextRange. 我只是不知道 XAML 语法是否允许插入该值。

我也想过在代码中这样做，但我确实想将搜索项模板保留在 XAML 中，而不是将其放在 C# 中。但是，可以做一些类似lvSearchResults.Items[i]...或任何事情来放入荧光笔或范围。我现在只是想不出正确的方法。

标签： xamllistviewuwpbinding

解决方案

如果您打算创建一个本地突出显示的搜索结果列表，您可以尝试这种方式：

  1. 创建搜索结果类
public class SearchResult
{
    public string DisplayText { get; set; }
    public string HighlightText { get; set; }
}
  1. 创建一个UserControl以显示结果

搜索结果块.xaml

<Grid>
    <TextBlock x:Name="ResultBlock" TextWrapping="Wrap" MaxLines="2"
               TextTrimming="CharacterEllipsis"/>
</Grid>

SearchResultBlock.xaml.cs

public sealed partial class SearchResultBlock : UserControl
{
    public SearchResultBlock()
    {
        this.InitializeComponent();
    }


    public SearchResult Result
    {
        get { return (SearchResult)GetValue(ResultProperty); }
        set { SetValue(ResultProperty, value); }
    }

    public static readonly DependencyProperty ResultProperty =
        DependencyProperty.Register("Result", typeof(SearchResult), typeof(SearchResultBlock), new PropertyMetadata(null,new PropertyChangedCallback(Result_Changed

    private static void Result_Changed(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        if(e.NewValue!=null && e.NewValue is SearchResult data)
        {
            var instance = d as SearchResultBlock;
            instance.ResultBlock.Inlines.Clear();
            var sp = data.DisplayText.Split(data.HighlightText);
            instance.ResultBlock.Inlines.Add(new Run { Text = sp.First() });
            instance.ResultBlock.Inlines.Add(new Run { Text = data.HighlightText, Foreground = new SolidColorBrush(Colors.Red) });
            if (sp.Length > 1)
                instance.ResultBlock.Inlines.Add(new Run { Text = sp.Last() });
        }
    }
}
  1. 使用它DataTemplate
<DataTemplate x:DataType="SearchResult" x:Key="ResultItemTemplate">
    <SearchResultBlock Result="{Binding}"/>
</DataTemplate>

通过字符串拆分，创建不同类型的Runs 并将它们合并到TextBlock. 这样也能达到高亮的效果。

此致。

推荐阅读