Silverlight搜索框 (Button inside TextBox)

需要实现实现一个像下面那样很常见的搜索框，带提示信息，边角有按钮可点击。刚开始时准备通过样式拼凑，把一个简单的TextBox和Button组合在一起，但总不理想，后来找到一个很实用的第三方控件（RadControls for Silverlight）http://www.telerik.com/help/silverlight/introduction.html，很好地解决了我的问题。

由于官方的introduction比较简单，而我另外在网上找到的一个Demo过于复杂，忘了链接:)，故另外自己写了个简单的搜索框，希望对有需要的朋友有帮助。

首先，引用Telerik.Windows.Controls.dll(在官网可下载)，并声明 xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

全部Xaml文件：

 1 <UserControl x:Class="SearchButton.MainPage"
 2              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 5              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 6              xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" 
 7              mc:Ignorable="d"
 8              d:DesignHeight="300" d:DesignWidth="400">
 9     <UserControl.Resources>
10 
11         <!--SearchButton Style-->
12         <Style TargetType="telerik:RadButton" x:Key="SearchButton">
13             <Setter Property="Template">
14                 <Setter.Value>
15                     <ControlTemplate>
16                         <Grid Margin="0 0 0 0" Background="Transparent"  Cursor="Hand">
17                             <Path Fill="#FF474747"  Stretch="Fill" StrokeThickness="0"  Height="11.8"  Width="10" UseLayoutRounding="False"
18                              Data="M4.5,1 C2.6,1 1,2.6 1,4.5 C1,6.5 2.6,8 4.5,8 C6.5,8 8,6.5 8,4.5 C8,2.6 6.5,1 4.5,1 z M4.5,0 C7,0 9,2 9,4.5 C9,5.8 8.5,7 7.7,7.8 L7.6,7.8 L8,7.8 L8,8.8 L9,8.8 L9,9.8 L10,9.8 L10,10.8 L10,11.8 L9,11.8 L9,10.8 L8,10.8 L8,9.8 L7,9.8 L7,8.8 L6,8.8 L6,8.8 L6,8.8 C5.5,9 5,9 4.5,9 C2,9 0,7 0,4.5 C0,2 2,0 4.5,0 z" />
19                         </Grid>
20                     </ControlTemplate>
21                 </Setter.Value>
22             </Setter>
23         </Style>
24 
25         <!--RadWatermarkTextBoxStyle-->
26         <Style x:Key="RadWatermarkTextBoxStyle" TargetType="telerik:RadWatermarkTextBox">
27             <Setter Property="Template">
28                 <Setter.Value>
29                     <ControlTemplate TargetType="telerik:RadWatermarkTextBox">
30                         <Grid>
31                             <Grid.ColumnDefinitions>
32                                 <ColumnDefinition Width="*" />
33                                 <ColumnDefinition Width="Auto" />
34                             </Grid.ColumnDefinitions>
35                             <!--控件样式-->
36                             <Border x:Name="Border" Grid.ColumnSpan="2" BorderBrush="#FF8D8D8D" BorderThickness="1" Opacity="1" Background="AliceBlue"  />
37                             <!--控件元素-->
38                             <ScrollViewer x:Name="ContentElement"  Grid.ColumnSpan="2" BorderThickness="0" IsTabStop="False"   />
39                             <!--SearchButton-->
40                             <telerik:RadButton Grid.Column="1" Margin="5 3" Click="RadButton_Click" Style="{StaticResource SearchButton}" />
41                         </Grid>
42                     </ControlTemplate>
43                 </Setter.Value>
44             </Setter>
45         </Style>
46 
47         <!--RadButtonStyle-->
48         <Style x:Key="RadButtonStyle"  TargetType="telerik:RadButton">
49             <Setter Property="Template">
50                 <Setter.Value>
51                     <ControlTemplate TargetType="telerik:RadButton">
52                         <Grid>
53                             <!--RadWatermarkTextBox element-->
54                             <telerik:RadWatermarkTextBox Grid.Column="1"  x:Name="WatermarkTextBox"  Text="{TemplateBinding Content}"  Grid.Row="1" Background="#FFFFFF" Style="{StaticResource RadWatermarkTextBoxStyle}" />
55                         </Grid>
56                     </ControlTemplate>
57                 </Setter.Value>
58             </Setter>
59         </Style>
60 
61     </UserControl.Resources>
62 
63     <Grid x:Name="LayoutRoot"  Background="White">
64         <telerik:RadButton  x:Name="SearchTextBox" HorizontalAlignment="Center"  VerticalAlignment="Center"  Content="请输入查询条件" Width="200"
65                                    Style="{StaticResource RadButtonStyle}" Margin="3,0,3,5" />
66     </Grid>
67 </UserControl>

供点击的那个查询按钮命令是在 RadWatermarkTextBoxStyle→SearchButton。

得到的界面如下：

最后一个问题是，后台代码。本来，这个写法就是WatermarkTextBox，当点击时，里面的提示信息“请输入查询条件”应该消失的，但现在就是不消失。可能是用作Style资源的缘故，我还弄不清，求解……

但既然Xaml样式控制实现不了，只好转到后台代码实现“水印”效果了。

详细的后台代码：

using System.Globalization;
using System.Windows;
using System.Windows.Controls;
using Telerik.Windows.Controls;

namespace SearchButton
{
    public partial class MainPage : UserControl
    {
        private string _searchBoxTips;
        internal RadButton MySearchTextBox;

        public MainPage()
        {
            InitializeComponent();

            MySearchTextBox = this.SearchTextBox ;

            _searchBoxTips = SearchTextBox.Content.ToString();

            SearchTextBox.GotFocus -= OnSearchTextBoxGotFocus;
            SearchTextBox.GotFocus += OnSearchTextBoxGotFocus;
            SearchTextBox.LostFocus -= OnSearchTextBoxLostFocus;
            SearchTextBox.LostFocus += OnSearchTextBoxLostFocus;

        }

        /// <summary>
        /// 查询TextBox获得焦点
        /// </summary>
        /// <param name="sender">TextBox</param>
        /// <param name="e"></param>
        private void OnSearchTextBoxGotFocus(object sender, RoutedEventArgs e)
        {
            var tb = SearchTextBox.FindChildByType<RadWatermarkTextBox>();

            var tbString = tb.Text.ToString(CultureInfo.InvariantCulture);

            if (tbString == _searchBoxTips)
            {
                tb.Text = "";
            }
        }

        /// <summary>
        ///  查询TextBox失去焦点
        /// </summary>
        /// <param name="sender">TextBox</param>
        /// <param name="e"></param>
        private void OnSearchTextBoxLostFocus(object sender, RoutedEventArgs e)
        {
            var tb = SearchTextBox.FindChildByType<RadWatermarkTextBox>();
            var tbString = tb.Text.ToString(CultureInfo.InvariantCulture);

            if (string.IsNullOrEmpty(tbString))
            {
                tb.Text = _searchBoxTips;
            }
        }


        private void RadButton_Click(object sender, RoutedEventArgs e)
        {
            var tbString = SearchTextBox.FindChildByType<RadWatermarkTextBox>().Text.ToString(CultureInfo.InvariantCulture);

            if (string.IsNullOrWhiteSpace(tbString) || tbString == _searchBoxTips)
            {
                return;
            }

            MessageBox.Show(tbString);
        }
    }
}

运行：