首先下载搜索图标：
控件中的搜索图标下载地址：
搜索框设计过程比较简单：
1、先定义一个Rectangle作为背景
2、然后中间放TextBox输入，可以重写其中的模板。提示语Label放在模板中，可以在模板的触发器中控制隐藏显示~
3、搜索按钮-大家随便在网上下个就行了。
UserControl界面：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | <UserControl x:Class= "WpfApplication18.SearchControl" xmlns= "" xmlns:x= "" xmlns:mc= "" xmlns:d= "" mc:Ignorable= "d" MinHeight= "30" MinWidth= "150" Background= "Transparent" d:DesignHeight= "30" d:DesignWidth= "150" > <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width= "15" ></ColumnDefinition> <ColumnDefinition Width= "*" ></ColumnDefinition> <ColumnDefinition Width= "36" ></ColumnDefinition> </Grid.ColumnDefinitions> <Rectangle Grid.Column= "0" Grid.ColumnSpan= "3" Fill= "LightGray" RadiusX= "15" RadiusY= "15" Opacity= "0.8" ></Rectangle> <TextBox x:Name= "TbxInput" Grid.Column= "1" KeyDown= "TbxInput_OnKeyDown" > <TextBox.Template> <ControlTemplate TargetType= "TextBox" > <Grid> <TextBlock x:Name= "Uc_TblShow" Text= "请输入..." Foreground= "Gray" Opacity= "0.5" VerticalAlignment= "Center" Visibility= "Collapsed" ></TextBlock> <TextBox x:Name= "Uc_TbxContent" Foreground= "Gray" Background= "Transparent" VerticalAlignment= "Center" VerticalContentAlignment= "Center" BorderThickness= "0" Text= "{Binding ElementName=TbxInput,Path=Text,Mode=TwoWay}" FontSize= "18" ></TextBox> </Grid> <ControlTemplate.Triggers> <Trigger SourceName= "Uc_TbxContent" Property= "Text" Value= "" > <Setter TargetName= "Uc_TblShow" Property= "Visibility" Value= "Visible" ></Setter> </Trigger> <Trigger SourceName= "Uc_TbxContent" Property= "IsFocused" Value= "True" > <Setter TargetName= "Uc_TblShow" Property= "Visibility" Value= "Collapsed" ></Setter> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </TextBox.Template> </TextBox> <Button x:Name= "BtnSearch" Grid.Column= "2" Click= "BtnSearch_OnClick" Cursor= "Hand" > <Button.Template> <ControlTemplate TargetType= "Button" > <Grid> <Image x:Name= "Uc_Image" Source= "1181298.png" Height= "20" Width= "20" ></Image> <ContentPresenter></ContentPresenter> </Grid> <ControlTemplate.Triggers> <Trigger Property= "IsMouseOver" Value= "true" > <Setter TargetName= "Uc_Image" Property= "Height" Value= "25" ></Setter> <Setter TargetName= "Uc_Image" Property= "Width" Value= "25" ></Setter> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Button.Template> </Button> </Grid> </UserControl> |
UserControl后台：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | public partial class SearchControl : UserControl { public SearchControl() { InitializeComponent(); } public event EventHandler<SearchEventArgs> OnSearch; private void BtnSearch_OnClick( object sender, RoutedEventArgs e) { ExeccuteSearch(); } private void TbxInput_OnKeyDown( object sender, KeyEventArgs e) { ExeccuteSearch(); } private void ExeccuteSearch() { if (OnSearch!= null ) { var args= new SearchEventArgs(); args.SearchText = TbxInput.Text; OnSearch( this , args); } } } public class SearchEventArgs : EventArgs { public string SearchText { get ; set ; } } |
直接引用就行了：<wpfApplication18:SearchControl></wpfApplication18:SearchControl>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。