WPF自定义搜索框

自带搜索框UI太丑了让我们自己动手改造一番吧

搜索框设计过程比较简单:

1、先定义一个Rectangle作为背景

2、然后中间放TextBox输入,可以重写其中的模板。提示语Label放在模板中,可以在模板的触发器中控制隐藏显示~

3、搜索按钮-大家随便在网上下个就行了。

UserControl界面:

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

</Grid.ColumnDefinitions>

<TextBox.Template>

<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”>

<ControlTemplate.Triggers>

</ControlTemplate.Triggers>

</TextBox.Template>

<Button.Template>

<ControlTemplate.Triggers>

</ControlTemplate.Triggers>

</Button.Template>

UserControl后台:

public partial class SearchControl : UserControl

{

public SearchControl()

{

InitializeComponent();

}

public event EventHandler 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>

效果图

猜你喜欢

转载自blog.csdn.net/weixin_44589117/article/details/92428026