用WPF實現查找結果高亮顯示


概述

我們經常會遇到這樣的需求:到數據庫里查找一些關鍵字,把帶這些關鍵字的記錄返回顯示在客戶端上。但如果僅僅是單純地把文本顯示出來,那很不直觀,用戶不能很輕易地看到他們想找的內容,所以通常我們還要做到“高亮顯示”。

如果是用BS架構去實現,應該很簡單,把相應的關鍵字加上一些label,然后給label定樣式即可,或者直接用js在客戶端渲染,減少服務器的負擔,但CS架構就相對麻煩一點,我這里用WPF寫了一個demo,實現了這個功能的演示:

另外本demo還包括了一些非常有用的wpf的小技巧。

功能介紹

由於這只是一個簡單的DEMO,我和以往的風格一樣,把它做成了“零配置”,我用一個csv文件和LINQ to Object來取代DBMS,執行一些簡單的查詢操作。

查詢方式分為兩種,一種是Full Match,表示全字符匹配,另一種是Any Key,表示用空格斷開查詢字符串,逐個關鍵字查詢。

這個程序的顯示區域使用了ListView控件,之所以使用ListView而不是DataGrid,主要是ListView能很輕易地自適應行高,而DataGrid的行高是固定的,但如果你要換DataGrid去做的話,應該也是同一個道理。

高亮顯示功能分析與實現

要實現高亮顯示,我們可以這么做:在界面上放置一個TextBlock,叫tbTest,然后執行下面的代碼:

tbTest.Inlines.Clear();
tbTest.Inlines.Add( new Run("The"){ Background = Brushes.Yellow });
tbTest.Inlines.Add( " quick brown fox jumps over ");
tbTest.Inlines.Add( new Run("the") { Background = Brushes.Yellow });
tbTest.Inlines.Add( new Run(" lazy dog."));

就能看到這樣的“高亮”效果:

遺憾的是Inlines這個屬性並非“依賴屬性”(Dependency Property),你不能輕易把一個字符串或對象“綁定”給它。我的做法是創建一個用戶控件,其中只包含一個TextBlock:

<UserControl x:class="HighlightDispDemo.HighlightTextBlock"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             mc:Ignorable="d"
             d:DesignHeight="300" d:DesignWidth="300">
    <TextBlock Name="innerTextBlock" TextWrapping="Wrap">
    </TextBlock>
</UserControl>

再給它增加一個叫“HlContent”的依賴屬性,其類型為自定義的HighlightContent:

        public static readonly DependencyProperty HighlightContentProperty = DependencyProperty .Register( "HlContent", 
      typeof(HighlightContent),
      typeof( HighlightTextBlock),
      
new FrameworkPropertyMetadata( null, OnHtContentChanged)); [ Description("獲取或設置高亮顯示的內容")] [ Category("Common Properties")] public HighlightContent HlContent { get { return(HighlightContent)GetValue( HighlightContentProperty); } set { SetValue( HighlightContentProperty, value); } }

HighlightContent的定義如下:

    public enum HighlightContentMode
    {
        FullMatch,
        AnyKey
    };

    public class HighlightContent
    {
        public string Content { get; set; }
        public static string ToHighlight { get; set; }
        public static HighlightContentMode Mode { get; set; }
    }

其中ToHighlight屬性表示要高亮顯示的“鍵”,而Mode屬性則用來指明用“Full Match”還是“Any Key”模式,考慮到同一時間只有一種高亮顯示,我把這兩個屬性定義為static。

“HlContent”的內容變更通知回調函數:

        private static void OnHtContentChanged(DependencyObject sender, DependencyPropertyChangedEventArgs arg)
        {
            if(sender is HighlightTextBlock)
            {
                HighlightTextBlock ctrl = sender as HighlightTextBlock ;
                HighlightContent content = ctrl.HlContent ;
                ctrl.innerTextBlock.Inlines.Clear();
                if(content != null)
                {
                    ctrl.innerTextBlock.Inlines.AddRange(MakeRunsFromContent( content));
                }
            }
        }

        private static IEnumerable<Run> MakeRunsFromContent(HighlightContent content)
        {
             //此函數功能是:將要顯示的字符串根據key及mode,拆分成不同的Run片段
             //代碼較多,從略
        }

這樣一來,我們就可以用自定義的HighlightTextBlock來取代Textblock實現綁定了。

綁定到ListView

ListView的默認的Column是肯定不支持“高亮”顯示的了,現在我們來自定義Template:

        <ListView ItemContainerStyle="{DynamicResource CustomListViewItemStyle}" Grid.Row="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Name="lvContent" AlternationCount="2">
            <ListView.View>
                <GridView>
                    <GridView.Columns>
                        <GridViewColumn Header="OS Name" Width="100">
                            <GridViewColumn.CellTemplate>
                                <DataTemplate>
                                    <hld:HighlightTextBlock HlContent="{Binding Path=OsName,Converter={StaticResource converterHlContent}}"></hld:HighlightTextBlock>
                                </DataTemplate>
                            </GridViewColumn.CellTemplate>
                        </GridViewColumn>
                        <GridViewColumn Header="File System" Width="150">
                            <GridViewColumn.CellTemplate>
                                <DataTemplate>
                                    <hld:HighlightTextBlock HlContent="{Binding Path=FileSystem,Converter={StaticResource converterHlContent}}"></hld:HighlightTextBlock>
                                </DataTemplate>
                            </GridViewColumn.CellTemplate>
                        </GridViewColumn>
                        <GridViewColumn Header="Desktop" Width="200">
                            <GridViewColumn.CellTemplate>
                                <DataTemplate>
                                    <hld:HighlightTextBlock HlContent="{Binding Path=Desktop,Converter={StaticResource converterHlContent}}"></hld:HighlightTextBlock>
                                </DataTemplate>
                            </GridViewColumn.CellTemplate>
                        </GridViewColumn>
                    </GridView.Columns>
                </GridView>
            </ListView.View>
        </ListView>

可以看到,Template中使用了前面我們自定義的HighlightTextBlock控件,它們綁定的Path分別是OsName,FileSystem和Desktop,其實這都是string,而HlContent需要的是HighlightContent類型,所以我們還得指定一個轉換器,轉換器代碼如下:

    [ValueConversion(typeof(string), typeof(HighlightContent))]
    public class HlContentConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            return new HighlightContent {Content = (string)value};
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

雜七雜八

使用CsvHelper來讀取CSV文件

這次我沒有使用DBMS,其實DEMO項目能不用DBMS就不用了,否則部署困難,不利於問題分析。CsvHelper可以從github上獲取,地址是:https://github.com/JoshClose/CsvHelper

它的幫助寫得稍微有點潦草(個人感覺),我這里稍稍補充說明下:CsvHelper的思路就是把csv文件轉為一個可枚舉的集合,其中的一行轉為集合中的一個對象,那么一列就對應到這個對象的一個屬性,那么究竟哪一列轉為那個屬性呢?我們得告訴它,這就是“Map”,了解了這個之后看一下下面的代碼,一切都清楚了。

    public class LinuxInfo
    {
        public string OsName { get; set; }
        public string FileSystem { get; set; }
        public string Desktop { get; set; }
    }

    public class LinuxMap : CsvClassMap<LinuxInfo>
    {
        public override void CreateMap()
        {
            Map(m => m.OsName).Index(0);
            Map(m => m.FileSystem).Index(1);
            Map(m => m.Desktop).Index(2);
        }
    }

上面代碼是對象及Map定義。下面是執行讀取和轉換的操作。

     TextReader tr = new StreamReader("linux.csv", Encoding.UTF8);
     CsvReader csv = new CsvReader(tr);
     csv.Configuration.RegisterClassMap<LinuxMap>();
     csv.Configuration.HasHeaderRecord = false; //表示csv文件不帶header行
     _listData = csv.GetRecords<LinuxInfo>().ToList();

ListView的隔行背景樣式

把ListView的AlternationCount屬性設為2,並指定ItemContainerStyle="{DynamicResource CustomListViewItemStyle}"。Style這樣定義:

     <Style x:Key="CustomListViewItemStyle" TargetType="{x:Type ListViewItem}">
          <Style.Triggers>
               <Trigger Property="ItemsControl.AlternationIndex" Value="1">
                    <Setter Property="Background" Value="#DDEEFF"></Setter>
               </Trigger>
          </Style.Triggers>
     </Style>

讓TextBox獲得焦點時全選文本

這個功能得在App.xml.cs中做一些全局處理:

        protected override void OnStartup(StartupEventArgs e)
        {
            base.OnStartup(e);

            //為了讓TextBox能夠在獲得焦點的時候自動選中其中文本,特意添加此全局事件處理
            EventManager.RegisterClassHandler(typeof(TextBox), UIElement.PreviewMouseLeftButtonDownEvent, new MouseButtonEventHandler(SelectivelyHandleMouseButton), true);
            EventManager.RegisterClassHandler(typeof(TextBox), UIElement.GotKeyboardFocusEvent, new RoutedEventHandler(SelectAllText), true);
        }

        private static void SelectivelyHandleMouseButton(object sender, MouseButtonEventArgs e)
        {
            var textbox = (sender as TextBox);
            if (textbox != null && !textbox.IsKeyboardFocusWithin)
            {
                if (e.OriginalSource.GetType().Name == "TextBoxView")
                {
                    e.Handled = true;
                    textbox.Focus();
                }
            }
        }

        private static void SelectAllText(object sender, RoutedEventArgs e)
        {
            var textBox = e.OriginalSource as TextBox;
            if (textBox != null)
                textBox.SelectAll();
        }

完整代碼下載

HighlightDispDemo.7z(Visual Studio 2010)


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM