WPF Custom Search box code sharing and wpf custom code sharing

WPF Custom Search box code sharing and wpf custom code sharing

First download the search icon:

Search icon: http://www.easyicon.net/1183666-Search_icon.html in the control

The search box design process is relatively simple:

1. First define a Rectangle as the background

2. Input TextBox in the middle to rewrite the template. The prompt Label is placed in the template. You can control the hidden display in the trigger of the template ~

3. Search button-you can click the next button on the Internet.

UserControl interface:

<UserControl x: Class = "WpfApplication18.SearchControl" 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 "MinHeight =" 30 "MinWidth =" 150 "Background =" Transparent "d: DesignHeight =" 30 "d: designWidth = "150"> <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 = "Please input... "Foreground =" Gray "Opacity =" 0.5 "VerticalAlignment =" Center "Visibility =" Collapsed "> </TextBlock> <TextBox x: name = "Uc_TbxContent" Foreground = "Gray" Background = "Transparent" verticalignment = "Center" placement = "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> </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 Background:

  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; }  } 

Just reference it directly: <wpfApplication18: SearchControl> </wpfApplication18: SearchControl>

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.