WPF 搜索框控件样式

WPF 搜索框控件样式

完全通过Xaml代码实现，使用了UserControl进行封装。功能包括聚焦时控件展开，输入为空时的文字提示，以及待选提示项列表等效果。实现效果如下图：
请添加图片描述
xaml代码

<UserControl x:Class="SearchBar.SearchBox"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" xmlns:local="clr-namespace:SearchBar"UseLayoutRounding="True"TextElement.FontSize="14"mc:Ignorable="d" d:DesignHeight="450" d:DesignWidth="440"><UserControl.Resources><SolidColorBrush x:Key="Control.BoderBrush" Color="#CBCBCB"/><Style TargetType="{x:Type TextBox}"><Setter Property="Background" Value="#FFF2F3F4"/><Setter Property="BorderBrush" Value="{StaticResource Control.BoderBrush}"/><Setter Property="Foreground" Value="#515151"/><Setter Property="VerticalContentAlignment" Value="Center"/><Setter Property="Padding" Value="8 0 0 0"/><Setter Property="BorderThickness" Value="1"/><Setter Property="KeyboardNavigation.TabNavigation" Value="None"/><Setter Property="HorizontalContentAlignment" Value="Left"/><Setter Property="AllowDrop" Value="true"/><Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/><Setter Property="Stylus.IsFlicksEnabled" Value="False"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type TextBox}"><Border x:Name="border" CornerRadius="8" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="True"><Grid><Grid.ColumnDefinitions><ColumnDefinition/><ColumnDefinition Width="44"/></Grid.ColumnDefinitions><Border x:Name="bdLeft" CornerRadius="8" Margin="4 4 8 4"><Grid><ScrollViewer x:Name="PART_ContentHost" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/><TextBlock Text="输入搜索内容" VerticalAlignment="Center" Margin="10 0" Opacity="0.8"><TextBlock.Style><Style TargetType="TextBlock"><Setter Property="Visibility" Value="Collapsed" /><Style.Triggers><DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=TextBox},Path=Text}" Value=""><Setter Property="Visibility" Value="Visible"/></DataTrigger></Style.Triggers></Style></TextBlock.Style></TextBlock></Grid></Border><Button Grid.Column="1" Margin="4"><Button.Style><Style TargetType="Button"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="Button"><Border x:Name="bd" CornerRadius="8" Background="Transparent"><ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center"></ContentPresenter></Border><ControlTemplate.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter TargetName="bd" Property="Background" Value="#60CACACA"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style></Button.Style><Path Fill="#C9000000" Margin="8" Stretch="Uniform"  Data="M15.7 13.3l-3.81-3.83A5.93 5.93 0 0013 6c0-3.31-2.69-6-6-6S1 2.69 1 6s2.69 6 6 6c1.3 0 2.48-.41 3.47-1.11l3.83 3.81c.19.2.45.3.7.3.25 0 .52-.09.7-.3a.996.996 0 000-1.41v.01zM7 10.7c-2.59 0-4.7-2.11-4.7-4.7 0-2.59 2.11-4.7 4.7-4.7 2.59 0 4.7 2.11 4.7 4.7 0 2.59-2.11 4.7-4.7 4.7z"></Path></Button></Grid></Border><ControlTemplate.Triggers><Trigger Property="IsEnabled" Value="false"><Setter Property="Opacity" TargetName="border" Value="0.56"/></Trigger><Trigger Property="IsMouseOver" Value="true"><Setter Property="Background" TargetName="border" Value="white"/></Trigger><Trigger Property="IsKeyboardFocused" Value="true"><Setter Property="Background" TargetName="bdLeft" Value="#60CACACA"/><Setter Property="BorderBrush" TargetName="border" Value="Transparent"/><Setter Property="Background" TargetName="border" Value="white"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter><Style.Triggers><MultiTrigger><MultiTrigger.Conditions><Condition Property="IsInactiveSelectionHighlightEnabled" Value="true"/><Condition Property="IsSelectionActive" Value="false"/></MultiTrigger.Conditions><Setter Property="SelectionBrush" Value="{DynamicResource {x:Static SystemColors.InactiveSelectionHighlightBrushKey}}"/></MultiTrigger></Style.Triggers></Style></UserControl.Resources><Grid><Grid.RowDefinitions><RowDefinition Height="44"/><RowDefinition Height="auto"/></Grid.RowDefinitions><Border Grid.RowSpan="2" BorderThickness="1" Background="White" BorderBrush="{StaticResource Control.BoderBrush}" CornerRadius="8"><Border.Effect><DropShadowEffect Color="Gray" Opacity="0.2" ShadowDepth="0" BlurRadius="12"/></Border.Effect><Border.Style><Style TargetType="Border"><Setter Property="Visibility" Value="Collapsed"/><Style.Triggers><DataTrigger Binding="{Binding ElementName=txtBox,Path=IsKeyboardFocused}" Value="True"><Setter Property="Visibility" Value="Visible"/></DataTrigger></Style.Triggers></Style></Border.Style><Grid Margin="0 44 0 12"><ListBox BorderBrush="Transparent" Padding="4 0"ItemsSource="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=local:SearchBox},Path=SearchList}"><ListBox.ItemContainerStyle><Style TargetType="ListBoxItem"><Setter Property="Padding" Value="8" /><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type ListBoxItem}"><Border x:Name="Bd" SnapsToDevicePixels="true" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}"><ContentPresenter Opacity="0.8" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" x:Name="contentPresenter"/></Border><ControlTemplate.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="Background" Value="#20808080"/></Trigger><Trigger Property="IsSelected" Value="True"><Setter Property="Background" Value="#20808080"/></Trigger><MultiTrigger><MultiTrigger.Conditions><Condition Property="IsSelected" Value="true"/><Condition Property="Selector.IsSelectionActive" Value="false"/></MultiTrigger.Conditions><Setter Property="Background" TargetName="Bd" Value="#20808080"/></MultiTrigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style></ListBox.ItemContainerStyle></ListBox></Grid></Border><Grid><TextBox x:Name="txtBox"/></Grid><Grid Grid.Row="1" Height="280"></Grid></Grid>
</UserControl>

后台代码：

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;namespace SearchBar
{/// <summary>/// SearchBox.xaml 的交互逻辑/// </summary>public partial class SearchBox : UserControl{public SearchBox(){InitializeComponent();}public ObservableCollection<string> SearchList{get { return (ObservableCollection<string>)GetValue(SearchListProperty); }set { SetValue(SearchListProperty, value); }}public static readonly DependencyProperty SearchListProperty =DependencyProperty.Register("SearchList", typeof(ObservableCollection<string>), typeof(SearchBox), new PropertyMetadata(new ObservableCollection<string>()));}
}

控件使用显示示例：

<Window x:Class="SearchBar.MainWindow"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:local="clr-namespace:SearchBar"mc:Ignorable="d"Title="MainWindow" Height="500" Width="420"><Grid><Grid.RowDefinitions><RowDefinition Height="60"/><RowDefinition/></Grid.RowDefinitions><local:SearchBox x:Name="searchbox" Grid.RowSpan="2" Margin="8" Panel.ZIndex="50"></local:SearchBox><ListBox Grid.Row="1" Margin="16"><ListBoxItem Padding="8">AAA</ListBoxItem><ListBoxItem Padding="8">AAA</ListBoxItem><ListBoxItem Padding="8">AAA</ListBoxItem><ListBoxItem Padding="8">AAA</ListBoxItem><ListBoxItem Padding="8">AAA</ListBoxItem><ListBoxItem Padding="8">AAA</ListBoxItem><ListBoxItem Padding="8">AAA</ListBoxItem><ListBoxItem Padding="8">AAA</ListBoxItem><ListBoxItem Padding="8">AAA</ListBoxItem><ListBoxItem Padding="8">AAA</ListBoxItem><ListBoxItem Padding="8">AAA</ListBoxItem><ListBoxItem Padding="8">AAA</ListBoxItem><ListBoxItem Padding="8">AAA</ListBoxItem></ListBox></Grid>
</Window>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/5735.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

栈OJ（C++）

栈OJ（C++）

文章目录 1.最小栈2.栈的压入、弹出序列3.逆波兰表达式&#xff08;后缀表达式&#xff09;求值3.1后缀表达式求值3.2中缀表达式转后缀表达式3.3带有括号的中缀表达式转后缀表达式 1.最小栈 class MinStack { public:MinStack(){}void push(int val){_st.push(val);//empty放在…
阅读更多...
【kafka调试】用命令行查看kafka是否发出了命令

【kafka调试】用命令行查看kafka是否发出了命令

server 10.10.90.210:9092 topic stream_manager_center_capture_file 摄像头id&#xff1a; 17283ed2a1ac685f9fd5ef9f0de04792 cd /usr/loca/kafka bin/kafka-console-consumer.sh --bootstrap-server 10.10.90.210:9092 --topic stream_manager_center_capture_file 然后添…
阅读更多...
＜C语言＞ 数据在内存中的存储

＜C语言＞ 数据在内存中的存储

1.数据类型介绍 C语言中的基本内置类型如下&#xff1a; char //字符数据类型 short //短整型 int //整型 long //长整型 long long //更长的整型 float //单精度浮点数 double //双精度浮点数类型的意义&#xff1a; 1.使用这个类…
阅读更多...
设计模式-抽象工厂模式

设计模式-抽象工厂模式

在经济学领域中&#xff0c;其主要研究对象(商品)之间根据消费依存关系可分为互补商品或替代商品&#xff0c;其中&#xff0c;互补商品如汽车与汽油、自行车与自行车胎、大饼和香肠、开水和泡面等。在面向对象的代码世界中&#xff0c;不同对象之间也存在这种类似相互依赖的关…
阅读更多...
使用 ChatGPT 碰到的坑

使用 ChatGPT 碰到的坑

最近在使用 ChatGPT 的时候碰到一个小坑&#xff0c;因为某些特殊情况我需要使用 syslog 向 logbeat 中发送日志。 由于这是一个比较古老的协议&#xff0c;确实也没接触过&#xff0c;所以就想着让 ChatGPT 帮我生成个例子。 原本我已经在 Go 中将这个流程跑通&#xff0c;所…
阅读更多...
PyTorch从零开始实现Transformer

PyTorch从零开始实现Transformer

文章目录 自注意力Transformer块编码器解码器块解码器整个Transformer参考来源全部代码&#xff08;可直接运行&#xff09; 自注意力 计算公式 代码实现 class SelfAttention(nn.Module):def __init__(self, embed_size, heads):super(SelfAttention, self).__init__()self.e…
阅读更多...
ElasticSearch学习--RestClient及案例

ElasticSearch学习--RestClient及案例

目录 RestClient查询文档 快速入门 总结 全文检索&#xff08;match&#xff09;查询 精确查询 复合查询 查询总结 排序&#xff0c;分页 高亮 RestClient查询文档 快速入门 总结 全文检索&#xff08;match&#xff09;查询 多种查询的差异都在做类型和条件上&#x…
阅读更多...
数据可视化——如何绘制地图

数据可视化——如何绘制地图

文章目录 前言如何绘制地图添加配置项 根据已有数据绘制地图整体代码展示 前言 前面我们学习了如何利用提供的数据来对数据进行处理&#xff0c;然后以折线图的形式展现出来&#xff0c;那么今天我将为大家分享如何将提数据以地图的形式展现。 如何绘制地图 前面我们绘制折线…
阅读更多...
如何从gitee上下载项目并把它在本地运行起来

如何从gitee上下载项目并把它在本地运行起来

有时候我们会想到在gitee上下载下来项目&#xff0c;那么怎么把项目下载到本地并跑起来呢&#xff1f; 第一步&#xff1a;在git上找到你想要克隆下来的项目&#xff0c;按照如下操作复制项目地址连接&#xff0c;如下图&#xff1a; 以上可以选择HTTPS和SSH两种形式。 第二步…
阅读更多...
REST和RPC的区别

REST和RPC的区别

1 REST REST 不是一种协议&#xff0c;它是一种架构。大部分REST的实现中使用了RPC的机制&#xff0c;大致由三部分组成&#xff1a; method&#xff1a;动词&#xff08;GET、POST、PUT、DELETE之类的&#xff09;Host&#xff1a;URI&#xff08;统一资源标识&#xff09;&…
阅读更多...
jmeter压测过程中，ServerAgent响应异常：Cannot send data to network connection

jmeter压测过程中，ServerAgent响应异常：Cannot send data to network connection

ServerAgent异常信息&#xff1a; Cannot send data to network connection&#xff08;无法将数据发送到网络连接&#xff09; 原因&#xff1a; linux 防火墙 拦截了当前端口 解决方案&#xff1a; Linux 执行以下命令 /sbin/iptables -I INPUT -p tcp --dport 4445 -j ACC…
阅读更多...
数学建模入门-如何从0开始，掌握数学建模的基本技能

数学建模入门-如何从0开始，掌握数学建模的基本技能

一、前言 本文主要面向没有了解过数学建模的同学&#xff0c;帮助同学们如何快速地进行数学建模的入门并且尽快地在各类赛事中获奖&#xff0c;或者写出优秀的数学建模论文。 在本文中&#xff0c;我将从什么是数学建模、数学建模的应用领域、数学建模的基本步骤、数学建模的技…
阅读更多...
【动手学深度学习】--12.深度卷积神经网络AlexNet

【动手学深度学习】--12.深度卷积神经网络AlexNet

文章目录 深度卷积神经网络AlexNet1.AlexNet2.模型设计3.激活函数4.模型实现5.读取数据集6.训练AlexNet 深度卷积神经网络AlexNet 学习视频&#xff1a;深度卷积神经网络 AlexNet【动手学深度学习v2】 官方笔记&#xff1a;深度卷积神经网络&#xff08;AlexNet&#xff09; …
阅读更多...
Android 中 app freezer 原理详解(一)：R 版本

Android 中 app freezer 原理详解(一)：R 版本

基于版本&#xff1a;Android R 0. 前言 在之前的两篇博文《Android 中app内存回收优化(一)》和 《Android 中app内存回收优化(二)》中详细剖析了 Android 中 app 内存优化的流程。这个机制的管理通过 CachedAppOptimizer 类管理&#xff0c;为什么叫这个名字&#xff0c;而不…
阅读更多...
【Linux | Shell】结构化命令2 - test命令、方括号测试条件、case命令

【Linux | Shell】结构化命令2 - test命令、方括号测试条件、case命令

目录 一、概述二、test 命令2.1 test 命令2.2 方括号测试条件2.3 test 命令和测试条件可以判断的 3 类条件2.3.1 数值比较2.3.2 字符串比较 三、复合条件测试四、if-then 的高级特性五、case 命令 一、概述 上篇文章介绍了 if 语句相关知识。但 if 语句只能执行命令&#xff0c…
阅读更多...
Docker 的数据管理、容器互联、镜像创建

Docker 的数据管理、容器互联、镜像创建

目录 一、数据管理 1.数据卷 2. 数据卷容器 二、容器互联&#xff08;使用centos镜像&#xff09; 三、Docker 镜像的创建 1.基于现有镜像创建 1.1首先启动一个镜像&#xff0c;在容器里修改 1.2将修改后的容器提交为新的镜像&#xff0c;需使用该容器的id号创建新镜像 …
阅读更多...
JAVA SE -- 第十天

JAVA SE -- 第十天

&#xff08;全部来自“韩顺平教育”&#xff09; 一、枚举&#xff08;enumeration&#xff0c;简写enum&#xff09; 枚举是一组常量的集合 1、实现方式 a.自定义类实现枚举 b.使用enum关键字实现枚举 二、自定义类实现枚举 1、注意事项 ①不需要提供setXxx方法&#xff…
阅读更多...
HTTP、HTTPS协议详解

HTTP、HTTPS协议详解

文章目录 HTTP是什么报文结构请求头部响应头部 工作原理用户点击一个URL链接后&#xff0c;浏览器和web服务器会执行什么http的版本持久连接和非持久连接无状态与有状态Cookie和Sessionhttp方法&#xff1a;get和post的区别 状态码 HTTPS是什么ssl如何搞到证书nginx中的部署 加…
阅读更多...
【从删库到跑路】MySQL数据库的索引(一)——索引的结构(BTree B+Tree Hash)，语法等

【从删库到跑路】MySQL数据库的索引(一)——索引的结构(BTree B+Tree Hash)，语法等

&#x1f38a;专栏【MySQL】 &#x1f354;喜欢的诗句&#xff1a;更喜岷山千里雪 三军过后尽开颜。 &#x1f386;音乐分享【如愿】 &#x1f970;欢迎并且感谢大家指出小吉的问题 文章目录 &#x1f354;概述&#x1f354;索引结构⭐B-Tree多路平衡查找树&#x1f3f3;️‍&a…
阅读更多...
【iOS】weak关键字的实现原理

【iOS】weak关键字的实现原理

前言 关于什么是weak关键字可以去看看我以前的一篇博客&#xff1a;【OC】 属性关键字 weak原理 1. SideTable SideTable 这个结构体&#xff0c;前辈给它总结了一个很形象的名字叫引用计数和弱引用依赖表&#xff0c;因为它主要用于管理对象的引用计数和 weak 表。在 NSOb…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023