[英]How to highlight certain words in a ListView item on UWP?
I've got a page that makes a search for the keyword typed in by the user and display the results in a ListView. 我有一个页面可以搜索用户键入的关键字,并在ListView中显示结果。
In the displayed results I wanna highlight all the words that matches the keyword typed by the user. 在显示的结果中,我要突出显示与用户键入的关键字匹配的所有单词。
Here is my xmal page: 这是我的xmal页面:
<Page
x:Class="BibleApp.View.SearchWordPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:BibleApp.View"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:Domain="using:BibleApp.Domain"
xmlns:data="using:BibleApp.Domain"
mc:Ignorable="d" Loaded="Page_Loaded">
<Page.Resources>
<DataTemplate x:Key="SearchResultDataTemplate" x:DataType="data:SearchResult">
<Grid x:Name="gridResults" Padding="0,20,0,0">
<TextBlock Text="{x:Bind result}" Margin="0,0,0,0" TextWrapping="Wrap" VerticalAlignment="Center" Width="auto" />
</Grid>
</DataTemplate>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<TextBox x:Name="textBoxFiltro" HorizontalAlignment="Left" Margin="10,10,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="175"/>
<Button x:Name="btPesquisar" FontFamily="Segoe MDL2 Assets" Content="" HorizontalAlignment="Left" Margin="200,13,0,0" VerticalAlignment="Top" Click="btPesquisar_Click"/>
<ListView x:Name="lvResults"
Margin="10,60,10,10"
Height="auto" ScrollViewer.VerticalScrollBarVisibility="Auto"
ItemTemplate="{StaticResource SearchResultDataTemplate}"
ItemClick="lvResults_ItemClick"
IsItemClickEnabled="True"/>
</Grid>
And it's code behind: 其背后的代码:
using BibleApp.Domain;
using System;
using System.Collections.Generic;
using Windows.UI.Popups;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
namespace BibleApp.View
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class SearchWordPage : Page
{
List<SearchResult> searchResults;
public SearchWordPage()
{
this.InitializeComponent();
}
private void SearchWord(string filter)
{
searchResults = new List<SearchResult>();
for (int book = 0; book < App.navigationData.bible.Books.Count; book++)
{
for (int chapter = 0; chapter < App.navigationData.bible.Books[book].Chapters.Count; chapter++)
{
for (int verse = 0; verse < App.navigationData.bible.Books[book].Chapters[chapter].Verses.Count; verse++)
{
if (App.navigationData.bible.Books[book].Chapters[chapter].Verses[verse].Text.IndexOf(filter, StringComparison.OrdinalIgnoreCase) >= 0)
{
searchResults.Add(new SearchResult
{
result = App.navigationData.bible.Books[book].Name +
"; Capítulo " +
App.navigationData.bible.Books[book].Chapters[chapter].Number + "; " +
"Verso " +
App.navigationData.bible.Books[book].Chapters[chapter].Verses[verse].Number + " - " +
App.navigationData.bible.Books[book].Chapters[chapter].Verses[verse].Text
});
}
}
}
}
App.navigationData.searchResults = searchResults;
lvResults.ItemsSource = searchResults;
}
private void btPesquisar_Click(object sender, RoutedEventArgs e)
{
if (textBoxFiltro.Text.Trim() == "")
{
MessageDialog showDialog = new MessageDialog("Nenhum filtro informado.", "Informação");
showDialog.ShowAsync();
}
else
{
App.navigationData.searchWordFilter = textBoxFiltro.Text.Trim();
SearchWord(textBoxFiltro.Text.Trim());
}
}
private void lvResults_ItemClick(object sender, ItemClickEventArgs e)
{
SearchResult resultado = (SearchResult)e.ClickedItem;
string aux = "";
string livro = "";
string capitulo= "";
for(int i = 0; i < resultado.result.Length; i++)
{
if (resultado.result.Substring(i,1) != ";")
aux = aux + resultado.result.Substring(i,1);
else
{
if (livro == "")
livro = aux;
else if(capitulo == "")
capitulo = aux.Substring(10, aux.Length - 10).Trim();
aux = "";
}
}
App.navigationData.selectedBookIndex = App.navigationData.bible.Books.Find(c => c.Name == livro).Number - 1;
App.navigationData.selectedChapterIndex = App.navigationData.bible.Books.Find(c => c.Name == livro).Chapters
.Find(c => c.Number == Convert.ToInt32(capitulo)).Number - 1;
Frame.Navigate(typeof(BiblePage));
}
private void Page_Loaded(object sender, RoutedEventArgs e)
{
if (App.navigationData.searchWordFilter != "")
textBoxFiltro.Text = App.navigationData.searchWordFilter;
if (App.navigationData.searchResults != null)
lvResults.ItemsSource = App.navigationData.searchResults;
}
}
}
Using the Html Renderer for WPF package in NuGet ( https://www.nuget.org/packages/HtmlRenderer.WPF ) you can place an HtmlLabel in your Grid in the DataTemplate and then in the code behind use the <strong/>
tag to mark up your results. 使用NuGet( https://www.nuget.org/packages/HtmlRenderer.WPF )中的Html Renderer for WPF包,您可以将HtmlLabel放置在DataTemplate的网格中,然后在后面的代码中使用
<strong/>
标记标记您的结果。
After switch to using the HtmlLabel
control, you would populate it like this: 切换为使用
HtmlLabel
控件后,您将像这样填充它:
var resultString = $"{result}".Replace("keyword", "<strong>keyword</strong>");
The HtmlLabel
will render it like this: HtmlLabel
会像这样渲染它:
Your result keyword is highlighted. 您的结果关键字突出显示。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.