Click here to Skip to main content
15,860,972 members
Articles / Desktop Programming / WPF
Article

An Apple-like menu search box

Rate me:
Please Sign up or sign in to vote.
3.63/5 (4 votes)
10 Apr 2008CPOL2 min read 35.3K   444   13  
A search box to search through the menu.

Introduction

Probably you know the search box from the Apple menu, either from Mac OS X itself or, like me, from pictures. I think that's a pretty cool feature and so I developed an extensible WPF control for searching through all menu items.

Screenshot of the search box in action

Background

The project mainly consists of two classes, MenuSearchBoxBase<code> and MenuSearchBox. MenuSearchBoxBase is abstract and does not contain the code for matching and collecting items and for displaying the results but only abstract functions for this. MenuSearchBox is a basic implementation of the menu search box.

The search is done in 4 steps:

  1. Clearing
    <code>
    C#
    protected abstract void ClearResults();

    In this step, the displayed results are cleared. Notice: The function is also called, when no results have been displayed before.

  2. Collecting
    C#
    protected abstract IEnumerable<Control> Collect();
    

    In this step the menu items to search through are collected. Normally, these are all menu items of the menu containing the search box.

  3. Matching
    C#
    protected abstract double Match(Control control, string search);

    This is function is called for every control collected in the step before. The result is a match score describing how much the control matches the search the user typed. A match score of 0 means that the control does not match the search; these results are not displayed.

  4. Displaying
    C#
    protected abstract void DisplayResults(IEnumerable<Control> results);

    This function displays the results that were collected and have a match score greater than 0. The results are presorted by the match score; the match score is not accessible in the function.

Using the code

Because you can insert not just MenuItems but any control into a menu, you can simply insert the search box in the menu after referencing the assembly and creating a namespace definition in the XAML file:

XML
<Window x:Class="Demo.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:msb="clr-namespace:MenuSearch;assembly=MenuSearchBox">
    <!-- Namespace definiton -->
    
    <Menu>
        <MenuItem Header="Help">
            <msb:MenuSearchBox /><!--Search box defintion-->
        </MenuItem>
    </Menu>
    
</Window>

Points of Interest

Cloning in WPF?

Because I didn't find a way to clone controls in WPF (if there is one, tell me), I had to move all controls to the result list and move them back after closing the menu. This required me to exclude items from the submenu containing the search box from the search, otherwise it would look pretty weird, because the control would disappeare and show up in the result list.

History

Thursday April 10th (my birthday :): Article published.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Other School
Germany Germany
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
-- There are no messages in this forum --