[Silverlight入门系列]用MVVM实现带下拉框的搜索框功能

带下拉框的搜索框，英文就是Searchbox with dropdown options，平时暴一看就是一个搜索框，当你输入东西就有搜索选项出来，很符合简洁的UI用户体验。类似下面的效果：

一个是jQuery的效果，点击获得在线演示地址：

一个是时下热门的新浪微博的：

 

今天我们在Silverlight下面也实现一个，比较丑陋没有做美工啥的，用MVVM实现的：

 

主要原理就是用到Popup控件，让它显示隐藏即可，里面的RadioButton要MVVM兼容。来看看XAML代码：

 

<UserControl x:Class="CustomSearch.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:YourNamespace="clr-namespace:CustomSearch" mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
    <UserControl.Resources>
        <YourNamespace:EnumBoolConverter x:Key="ConvertEnum" />
        <Storyboard x:Key="scalePopupIn">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="filterBorder"
                 Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
                <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="00:00:00.2000000" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White">
        <StackPanel>
            <TextBox Height="36" TextChanged="textBox1_TextChanged" LostFocus="textBox1_LostFocus" GotFocus="textBox1_GotFocus" HorizontalAlignment="Left" Name="textBox1" VerticalAlignment="Top" Width="163" />
            <Popup x:Name="filterPopup" Visibility="Collapsed">
                <Border x:Name="filterBorder" BorderBrush="Gray" BorderThickness="1,0,1,1" Width="163" Height="Auto">
                    <Border.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform />
                        </TransformGroup>
                    </Border.RenderTransform>
                    <StackPanel Margin="5,0,0,0" Width="158" Height="Auto">
                        <RadioButton Margin="0,5" ClickMode="Hover" GroupName="filters"
                                     IsChecked="{Binding Path=UserFilterOption, Mode=TwoWay, Converter={StaticResource ConvertEnum},
                                          ConverterParameter=Person}" Content="Person"/>
                        <RadioButton Margin="0,5" ClickMode="Hover" GroupName="filters"
                                     IsChecked="{Binding Path=UserFilterOption, Mode=TwoWay, Converter={StaticResource ConvertEnum},
                                        ConverterParameter=Grade}" Content="Grade"/>
                        <RadioButton Margin="0,5" ClickMode="Hover" GroupName="filters"
                                     IsChecked="{Binding Path=UserFilterOption, Mode=TwoWay, Converter={StaticResource ConvertEnum},
                                        ConverterParameter=Both}" Content="Both"/>
                    </StackPanel>
                </Border>
            </Popup>
        </StackPanel>

    </Grid>
</UserControl>

重点圈出好理解：

 

Xaml.cs代码：

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media.Animation;

namespace CustomSearch
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            this.DataContext = new ViewModel();

        }

        private void textBox1_GotFocus(object sender, RoutedEventArgs e)
        {
            TogglePopup(true);
        }

        private void textBox1_LostFocus(object sender, RoutedEventArgs e)
        {
            TogglePopup(false);
        }

        private void textBox1_TextChanged(object sender, TextChangedEventArgs e)
        {
            TogglePopup(this.textBox1.Text == String.Empty);
        }


        private void TogglePopup(bool show)
        {
            this.filterPopup.Visibility = show ? Visibility.Visible : Visibility.Collapsed;
            this.filterPopup.IsOpen = show;
            if (show)
            {
                var story = Resources["scalePopupIn" ] as Storyboard;
                if (story != null) story.Begin();
            }
        }
    }
}

 

ViewModel代码：

#region "Using Namespace"

using System;
using System.ComponentModel;
using System.Windows.Input;

#endregion

namespace CustomSearch
{
    public enum FilterOption { Person = 0, Grade = 1, Both = 2 }

    public class ViewModel : INotifyPropertyChanged
    {
        public FilterOption UserFilterOption
        {
            get { return _userOption; }
            set
            {
                if (_userOption != value)
                {
                    _userOption = value;

                    if(PropertyChanged != null)
                        PropertyChanged(this, new PropertyChangedEventArgs("UserFilterOption"));
                }
            }
        }
        private FilterOption _userOption = FilterOption.Person;

        public event PropertyChangedEventHandler PropertyChanged;
    }

    public class DelegateCommand : ICommand
    {

        /// <summary>

        /// Occurs when changes occur that affect whether the command should execute.

        /// </summary>

        public event EventHandler CanExecuteChanged;



        Func<object, bool> canExecute;

        Action<object> executeAction;

        bool canExecuteCache;



        /// <summary>

        /// Initializes a new instance of the <see cref="DelegateCommand"/> class.

        /// </summary>

        /// <param name="executeAction">The execute action.</param>

        /// <param name="canExecute">The can execute.</param>

        public DelegateCommand(Action<object> executeAction,

        Func<object, bool> canExecute)
        {

            this.executeAction = executeAction;

            this.canExecute = canExecute;

        }



        #region ICommand Members

        /// <summary>

        /// Defines the method that determines whether the command

        /// can execute in its current state.

        /// </summary>

        /// <param name="parameter">

        /// Data used by the command.

        /// If the command does not require data to be passed,

        /// this object can be set to null.

        /// </param>

        /// <returns>

        /// true if this command can be executed; otherwise, false.

        /// </returns>

        public bool CanExecute(object parameter)
        {

            bool tempCanExecute = canExecute(parameter);



            if (canExecuteCache != tempCanExecute)
            {

                canExecuteCache = tempCanExecute;

                if (CanExecuteChanged != null)
                {

                    CanExecuteChanged(this, new EventArgs());

                }

            }



            return canExecuteCache;

        }



        /// <summary>

        /// Defines the method to be called when the command is invoked.

        /// </summary>

        /// <param name="parameter">

        /// Data used by the command.

        /// If the command does not require data to be passed,

        /// this object can be set to null.

        /// </param>

        public void Execute(object parameter)
        {

            executeAction(parameter);

        }

        #endregion

    }
}

EnumBoolConverter.cs代码（RadioButton MVVM Binding绑定用到）：

#region "Using Namespace"

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

#endregion

namespace CustomSearch
{
    public class EnumBoolConverter : IValueConverter
    {
        #region Methods
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            if (value == null || parameter == null)
                return value;

            return value.ToString() == parameter.ToString();
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            if (value == null || parameter == null)
                return value;

            return Enum.Parse(targetType, (String)parameter, true);
        }
        #endregion Methods
    }
}

 

这样的话搜索就是一个Command在ViewModel实现，用户下拉框选择的选项在UserFilterOption也在ViewModel中，非常方便。

源码里面还有一个展开动画，如果你不要可以删除。

我自己用的是套在这个搜索框里面的，组合为一个控件，点击以后自动展开，整体为一个控件。如图：

希望对你有用。