WPF 通过TextBox实现一个带水印和图标的输入框

最新推荐文章于 2023-04-03 15:51:35 发布

柚子和香橼

最新推荐文章于 2023-04-03 15:51:35 发布

阅读量1.7k

点赞数

分类专栏： WPF 文章标签： wpf

本文链接：https://blog.csdn.net/weixin_43259472/article/details/126670320

版权

WPF 专栏收录该内容

9 篇文章 3 订阅

订阅专栏

代码如下：
前端定义一个TextBox：

<!-- TextBox的Style绑定到下面的静态资源，CaretBrush表示光标的颜色 -->
<TextBox Name="textBox" FontSize="12" Foreground="White" Margin="5" Width="200" Height="30" Style="{StaticResource QueryTextBoxStyle}" CaretBrush="White">

在资源文件中加入以下内容：

<Style TargetType="TextBox" x:Key="QueryTextBoxStyle"><!-- x:Key="QueryTextBoxStyle"此属性是必须的，Style通过Key来绑定 -->
	<Setter Property ="Template">
		<Setter.Value>
			<ControlTemplate TargetType="TextBox">
				<!-- 定义一个Border实现TextBox的边框样式的改变 -->
				<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}"
                                SnapsToDevicePixels="True" BorderThickness="1" CornerRadius="5">
                    <!-- 定义一个Grid把TextBox分为两列 -->
					<Grid>
						<Grid.ColumnDefinitions>
							<ColumnDefinition/>
                            <ColumnDefinition Width="auto"/>
                    	</Grid.ColumnDefinitions>
                    	<!-- 在第一列定义一个TextBlock，用来实现水印 -->
                        <TextBlock Name="markText" Text="请输入查询内容" Foreground="DarkGray" Margin="5" FontSize="12" HorizontalAlignment="Left" VerticalAlignment="Center" Visibility="Collapsed"/>
                        <!-- 第二列定义一个TextBlock，用来放图标 -->
                        <TextBlock Grid.Column="1" Text="&#xf002;" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0 0 3 0" FontSize="25" FontFamily="../Fonts/#FontAwesome"/>
                        <!-- ScrollViewer此标签必须有，不然TextBox里的内容无法显示 -->
                        <ScrollViewer x:Name="PART_ContentHost" Focusable="False" HorizontalScrollBarVisibility="Hidden"
                                              VerticalScrollBarVisibility="Hidden" Grid.Column="0" VerticalAlignment="Center"/>
					</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="BorderBrush" TargetName="border" Value="#FF7EB4EA"/>
                    </Trigger>
                    <Trigger Property="IsKeyboardFocused" Value="True">
                        <Setter Property="BorderBrush" TargetName="border" Value="#FF569DE5"/>
                    </Trigger>
                    <!-- DataTrigger实现当用户输入内容时，显示输入的内容，当用户清空时，显示水印 -->
					<DataTrigger Binding="{Binding Path=Text, RelativeSource={RelativeSource Mode=Self}}" Value="">
                    	<Setter Property="Visibility" TargetName="markText" Value="Visible"/>
                    </DataTrigger>
				</ControlTemplate.Triggers>
			</ControlTemplate>
		</Setter.Value>
	</Setter>
</Style>