WPF 搜索框控件样式

news2024/11/22 9:34:03

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.coloradmin.cn/o/773133.html

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

相关文章

当在IDEA中实现类实现接口时，如果出现红色错误并且无法引入接口类的包，可能是以下几种情况导致的

当在IDEA中实现类实现接口时，如果出现红色错误并且无法引入接口类的包，可能是以下几种情况导致的

1.当在IDEA中实现类实现接口时&#xff0c;如果出现红色错误并且无法引入接口类的包&#xff0c;可能是以下几种情况导致的&#xff1a; 2.缺少依赖&#xff1a;首先检查项目的依赖是否正确配置。如果接口类所在的包不在项目的依赖中&#xff0c;IDEA将无法找到该包并引入。可…
阅读更多...
nginx系列第八篇：Ubuntu下验证nginx各请求处理阶段

nginx系列第八篇：Ubuntu下验证nginx各请求处理阶段

Nginx处理请求的过程一共划分为11个阶段&#xff0c;按照执行顺序依次是 post-read、server-rewrite、find-config、rewrite、post-rewrite、preaccess、access、post-access、try-files、content 以及 log。 准备工作&#xff1a;host文件加入测试域名 sudo vi /etc/hosts 加入…
阅读更多...
【Java从0到1学习】03 Java 基础知识

【Java从0到1学习】03 Java 基础知识

1. 关键字 关键字是编程语言里事先定义好并赋予了特殊含义的单词&#xff0c;也称作保留字。和其它语言一样&#xff0c;Java中保留了许多关键字&#xff0c;例如&#xff0c;class、public等&#xff0c;下面列举的是Java中所有的关键字。 1.1 关键字概述 被Java语言赋予特…
阅读更多...
VS报错E1696 无法打开类似于stdio.h等头文件的解决办法

VS报错E1696 无法打开类似于stdio.h等头文件的解决办法

VS报错E1696 无法打开类似于stdio.h等头文件的解决办法 我的VS版本是2022的&#xff0c;然后我今天把同事在VS2017上的code&#xff08;一个完整的解决方案&#xff09;从svn上拿过来。结果发现&#xff0c;一大堆E1696的错误。主要表现就是项目中include的一些常用的c语言基础…
阅读更多...
【字节缓冲流】定义与使用

【字节缓冲流】定义与使用

字节缓冲流 1.字节缓冲流 BufferOutputStream&#xff1a;该类实现缓冲输出流。通过设置这样的输出流&#xff0c;应用程序可以向底层输出流写入字节&#xff0c;而不必为写入的每个字节导致底层系统的调用BufferInputStream&#xff1a;创建BufferInputStream将创建一个内部…
阅读更多...
＜Linux开发＞ linux开发工具-之-I2C TOOLS工具使用

＜Linux开发＞ linux开发工具-之-I2C TOOLS工具使用

&#xff1c;Linux开发&#xff1e; linux开发工具-之-I2C TOOLS工具使用 &#xff1c;Android开发&#xff1e; Android开发工具- 之-I2C TOOLS工具使用 &#xff1c;Linux开发&#xff1e;驱动开发 -之- Linux I2C 驱动 一 前言 在笔者的另一篇文章 &#xff1c;Android开…
阅读更多...
行为树（BEHAVIOR TREES）及其工业应用

行为树（BEHAVIOR TREES）及其工业应用

顾名思义&#xff0c;行为树是描述事物&#xff08;人&#xff0c;动物&#xff0c;机器人&#xff0c;虚拟角色等等&#xff09;行为的树形结构。游戏行业使用行为树为角色行为建模。现在行为树建模技术正在向其它领域渗透&#xff0c;比如工业产线编排&#xff0c;机器人控制…
阅读更多...
UKF无损卡尔曼滤波

UKF无损卡尔曼滤波

摘要——卡尔曼滤波器为估计工程系统的状态提供了一项重要技术。由于非线性卡尔曼滤波器有多种变体&#xff0c;因此缺乏针对特定研究和工程应用的滤波器选择指南。 这就需要深入讨论不同非线性卡尔曼滤波器的复杂性。 实际状态估计应用特别感兴趣的是扩展卡尔曼滤波器 (EKF) 和…
阅读更多...
五、DQL-1.概述

五、DQL-1.概述

一、DQL介绍 Data Query Language 数据查询语言 用来查询数据库中表的记录。 查询关键字&#xff1a;SELECT 二、语法
阅读更多...
TortoiseGit 入门指南11：还原与重置

TortoiseGit 入门指南11：还原与重置

Git 就像个时光机器&#xff0c;能让我们还原到任何提交。 还原未提交的更改 假如我们在查看一个干净的代码仓库&#xff0c;干净意味着工作区中的文件保持着最后一次提交的状态&#xff0c;没有修改。在查看的过程中&#xff0c;我们有意或无意的修改了工作区中的文件&#…
阅读更多...
《爆肝整理》保姆级系列教程-玩转Charles抓包神器教程(4)-Charles如何设置捕获会话

《爆肝整理》保姆级系列教程-玩转Charles抓包神器教程(4)-Charles如何设置捕获会话

1.简介 前边几篇宏哥介绍了Charles界面内容以及作用。今天宏哥就讲解和分享如何设置Charles后&#xff0c;我们就可以愉快地捕获会话&#xff0c;进行抓包了。因为上一篇许多小伙伴看到宏哥的Charles可以分开看到request和response&#xff0c;而自己的却看不到&#xff0c;因…
阅读更多...
WEB:FlatScience

WEB:FlatScience

背景知识 sql注入 SQLite数据库知识 SQLite3注入方法 题目 用dirsearch进行扫描&#xff0c;下面几个关键目录&#xff1a;robots.txt&#xff0c;login.php&#xff0c;admin.php&#xff0c;剩下的目录就是一些pdf格式的论文了 一个一个访问并查看源代码&#xff0c;在查看l…
阅读更多...
23款奔驰S400豪华型升级4D旋转高音，提升车内氛围

23款奔驰S400豪华型升级4D旋转高音，提升车内氛围

奔驰加装4D旋转高音&#xff0c;让高音“有型有色”,高端4D环绕立体声音响系统的视觉效果同样令人印象深刻&#xff1a;系统启动时&#xff0c;安装在前车门后视镜三角板中的两个高音头会与同色车内氛围灯一块亮起&#xff0c;同时向外旋出10mm至最佳效果位置&#xff0c;以提高…
阅读更多...
【AutoGluon_01】自动机器学习框架的安装与示例

【AutoGluon_01】自动机器学习框架的安装与示例

文章目录 一、安装二、示例一 AutoGluon预测目标数据1、导入数据2、训练3、预测4、评估5、小结 三、示例二 AutoGluon多模态预测&#xff08;Multimodal Prediction&#xff09;1、导入数据2、训练3、预测4、评估 四、示例三 AutoGluon进行时间序列预测1、导入数据2、训练3、预…
阅读更多...
【redis】redis管道简述

【redis】redis管道简述

redis管道可以一次性发送多条命令。 命令示例如下&#xff1a; [xxxlocalhost ~]$ echo -e "set k4 99\nincr k4\nget k4" | nc localhost 6379 \OK :100 $3 100下面先简述一下这条命令的组成&#xff0c;再简述一下管道的常用场景和注意事项。 首先&#xff0c;|是…
阅读更多...
跨越山海，爱在滇西｜拓数派为滇西孩子点亮科学梦想

跨越山海，爱在滇西｜拓数派为滇西孩子点亮科学梦想

近日&#xff0c;拓数派在共青团浙江大学委员会、景东县教育体育局和景东团县委等单位指导下开展“爱在滇西”2023年公益助学活动&#xff0c;并携手浙大国际科创中心、浙大微纳电子学院、启真科技控股公司和北京德恒律所共同向景东浙大求是中学捐赠爱心助学金&#xff0c;用于…
阅读更多...
微信小程序的目录解析--【浅入深出系列002】

微信小程序的目录解析--【浅入深出系列002】

浅入深出系列总目录在000集 如何0元学微信小程序–【浅入深出系列000】 文章目录 本系列校训学习资源的选择先说总目录经常碰到的文件(目录&#xff09;最最常见的目录pages次最常用的就是images 目录 操作起来真正的操作 配套资源 本系列校训 用免费公开视频&#xff0c;卷…
阅读更多...
OpenCVForUnity（八）文本与随机数

OpenCVForUnity（八）文本与随机数

文章目录 前言putText &#xff08;绘制文本&#xff09;randn &#xff08;正态分布随机数&#xff09;randu&#xff08;均匀分布随机数&#xff09;randShuffle &#xff08;数组随机重排&#xff09;结语 前言 本教程将介绍如何使用随机数生成器类RNG以及从均匀分布中获取随…
阅读更多...
LIMA：小规模监督数据指令微调

LIMA：小规模监督数据指令微调

论文标题&#xff1a;LIMA: Less Is More for Alignment 论文链接&#xff1a;https://arxiv.org/abs/2305.11206 论文来源&#xff1a;Meta AI 一、概述 语言模型在大规模语料上以预测下一个token的方式预训练&#xff0c;使它们能够学习可迁移到几乎任何语言理解或生成任务的…
阅读更多...
让小程序动起来-轮播图的两种方式--【浅入深出系列003】

让小程序动起来-轮播图的两种方式--【浅入深出系列003】

浅入深出系列总目录在000集 如何0元学微信小程序–【浅入深出系列000】 文章目录 本系列校训学习资源的选择啥是轮播图轮播图的关键代码最常见的轮播图代码便于理解的轮播代码两种轮播代码的比较 实际操练第一步&#xff0c;就是找到文件。第二步&#xff0c;先改动一下最显眼…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023