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，一经查实，立即删除！

相关文章

《C语言杂记》C语言内存泄露分析与检测

《C语言杂记》C语言内存泄露分析与检测

1 内存泄露分析 在堆上分配的内存&#xff0c;没有及时释放掉&#xff0c;以便后面其它地方可以重用。在C/C中&#xff0c;内存管理器不会帮你自动回收不再使用的内存。如果你忘了释放不再使用的内存&#xff0c;这些内存就不能被重用&#xff0c;就造成了所谓的内存泄露。 一…
阅读更多...
栈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放在…
阅读更多...
7.23 校招实习内推 面经

7.23 校招实习内推 面经

1、半导体芯片一周资讯 - 英特尔全球裁员1.2万人&#xff0c;台积电3纳米良率仅为55% &#xff0c;马斯克特斯拉正自研芯片 但不会称作GPU 半导体芯片一周资讯 - 英特尔全球裁员1.2万人&#xff0c;台积电3纳米良率仅为55% &#xff0c;马斯克特斯拉正自研芯片 但不会称作GPU …
阅读更多...
【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;所…
阅读更多...
RocketMQ集成Springboot --Chapter5

RocketMQ集成Springboot --Chapter5

RocketMQ tag过滤和sql92语法过滤 tag过滤 生产者&#xff0c;由于springboot没有专门对mq进行tag标记的方法&#xff0c;只是在topic:后面加上&#xff0c;所以只需 rocketMQTemplate.sendOneWay(“tagFilterBoot:TagA”,msg1);标记即可 生产者代码如下 /***生产者* tag过滤*…
阅读更多...
PyTorch从零开始实现Transformer

PyTorch从零开始实现Transformer

文章目录 自注意力Transformer块编码器解码器块解码器整个Transformer参考来源全部代码&#xff08;可直接运行&#xff09; 自注意力 计算公式 代码实现 class SelfAttention(nn.Module):def __init__(self, embed_size, heads):super(SelfAttention, self).__init__()self.e…
阅读更多...
Windows Spark 开发测试版本快速搭建

Windows Spark 开发测试版本快速搭建

1、Spark 包下载 清华大学开源软件镜像站下载(速度较快&#xff0c;但版本不全)官方各个版本 下载后解压即可。 &#xff08;可选&#xff09;添加环境变量 SPARK_HOME。并将 %SPARK_HOME%/bin、%SPARK_HOME%/sbin 添加到 path 中。 ps&#xff1a;本文使用的是 spark-3.3.0…
阅读更多...
【unity】RectTransform与Transform组件有什么区别

【unity】RectTransform与Transform组件有什么区别

RectTransform组件是Unity中用于控制UI元素位置、大小和旋转的组件。它是UI系统的一部分&#xff0c;用于在屏幕空间中布局和定位UI元素。 与transform组件相比&#xff0c;RectTransform组件具有以下区别&#xff1a; 1. 坐标系统&#xff1a;RectTransform组件使用屏幕空间坐…
阅读更多...
线上问题排查-dubbo-Dubbo client can not supported string message

线上问题排查-dubbo-Dubbo client can not supported string message

1.问题描述 线上值班时&#xff0c;收到告警通知dubbo 调用异常。 主要报错包括下面两条记录&#xff1a; [DUBBO] Dubbo client can not supported string message: [ERROR] [New I/O client worker #1-3] com.alibaba.dubbo.remoting.transport.AbstractCodec - Data len…
阅读更多...
一起学SF框架系列5.8-spring-Beans-Bean注解解析3-解析配置component-scan

一起学SF框架系列5.8-spring-Beans-Bean注解解析3-解析配置component-scan

本文主要讲述Spring是如何解析“context:component-scan”元素&#xff0c;扫描加载目录下的BeanDefinition。 解析内容 1、解析的元素如下&#xff1a; <!-- 注解模式&#xff1a;配置bean扫描路径&#xff08;注&#xff1a;自动包含子路径&#xff09; --><conte…
阅读更多...
SpringAOP面向切面编程 通知类型

SpringAOP面向切面编程 通知类型

一、通知类型 Around&#xff1a;环绕通知&#xff0c;此注解标注的通知方法在目标方法前、后都被执行 Before&#xff1a;前置通知&#xff0c;此注解标注的通知方法在目标方法前被执行 After&#xff1a;后置通知&#xff0c;此注解标注的通知方法在目标方法后被执行&…
阅读更多...
Linux-tomcat环境搭建、jpress部署实践、nginx反向代理

Linux-tomcat环境搭建、jpress部署实践、nginx反向代理

♥️作者&#xff1a;小刘在C站 ♥️个人主页&#xff1a; 小刘主页 ♥️努力不一定有回报&#xff0c;但一定会有收获加油&#xff01;一起努力&#xff0c;共赴美好人生&#xff01; ♥️学习两年总结出的运维经验&#xff0c;以及思科模拟器全套网络实验教程。专栏&#xf…
阅读更多...
分类评估指标

分类评估指标

文章目录 1. 混淆矩阵2. Precision（精准率）3. Recall（召回率）4. F1-score5. ROC曲线和AUC指标5.1 ROC 曲线5.2 绘制 ROC 曲线5.3 AUC 值6. API介绍6.1 **分类评估报告api**6.2 **AUC计算API**练习-电信客户流失预测1. 数据集介绍2. 处理流程3. 案例实现4. 小结1. 混淆矩阵
阅读更多...
ElasticSearch学习--RestClient及案例

ElasticSearch学习--RestClient及案例

目录 RestClient查询文档 快速入门 总结 全文检索&#xff08;match&#xff09;查询 精确查询 复合查询 查询总结 排序&#xff0c;分页 高亮 RestClient查询文档 快速入门 总结 全文检索&#xff08;match&#xff09;查询 多种查询的差异都在做类型和条件上&#x…
阅读更多...
[SQL挖掘机] - HAVING语句

[SQL挖掘机] - HAVING语句

经过对分组函数 group by的介绍, 往往少不了having, 所以这篇文章主要介绍having语句. group by分组函数可以查看如下链接; https://tongjier.blog.csdn.net/article/details/131885281 介绍: having 是用于在 group by 查询中对分组结果进行过滤的子句。它允许我们在分组之后…
阅读更多...
数据可视化——如何绘制地图

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

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

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

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

Copyright @ 2022~2023