【C#】WPF 实现自定义文本框textbox水印提示

第一步:创建资源词典实现自定义textbox水印提示

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <!--  TextBox样式设置  -->
    <Style
        x:Key="TextBoxSearchStyle"
        BasedOn="{x:Null}"
        TargetType="{x:Type TextBox}">
        <!--  x:Key="QueryTextBoxStyle"此属性是必须的,Style通过Key来绑定  -->
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="TextBox">
                    <!--  定义一个Border实现TextBox的边框样式的改变  -->
                    <Border
                        x:Name="border"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="1"
                        CornerRadius="3"
                        SnapsToDevicePixels="True">
                        <!--  定义一个Grid把TextBox分为两列  -->
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition />
                                <ColumnDefinition Width="auto" />
                            </Grid.ColumnDefinitions>
                            <!--  在第一列定义一个TextBlock,用来实现水印  -->
                            <TextBlock
                                Name="markText"
                                Margin="5"
                                HorizontalAlignment="Left"
                                VerticalAlignment="Center"
                                FontSize="12"
                                Foreground="DarkGray"
                                Text="{TemplateBinding Tag}"
                                Visibility="Collapsed" />
                            <!--  第二列定义一个TextBlock,用来放图标  -->
                            <TextBlock
                                Grid.Column="1"
                                Padding="0,5,3,5"
                                HorizontalAlignment="Center"
                                VerticalAlignment="Center"
                                <!--引用iconfont图标集-->                                FontFamily="pack://application:,,,/Skin;component/Resources/#iconfont"
                                FontSize="20"
                                Foreground="DarkGray"
                                Text="&#xe659;" />
                           
                            <!--  ScrollViewer此标签必须有,不然TextBox里的内容无法显示  -->
                            <ScrollViewer
                                x:Name="PART_ContentHost"
                                Grid.Column="0"
                                VerticalAlignment="Center"
                                Focusable="False"
                                HorizontalScrollBarVisibility="Hidden"
                                VerticalScrollBarVisibility="Hidden" />
                        </Grid>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter TargetName="border" Property="Opacity" Value="0.56" />
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="border" Property="BorderBrush" Value="#FF7EB4EA" />
                        </Trigger>
                        <Trigger Property="IsKeyboardFocused" Value="True">
                            <Setter TargetName="border" Property="BorderBrush" Value="#FF569DE5" />
                        </Trigger>
                        <!--  DataTrigger实现当用户输入内容时,显示输入的内容,当用户清空时,显示水印  -->
                        <DataTrigger Binding="{Binding Path=Text, RelativeSource={RelativeSource Mode=Self}}" Value="">
                            <Setter TargetName="markText" Property="Visibility" Value="Visible" />
                        </DataTrigger>
                        <Trigger Property="IsFocused" Value="true">
                            <Setter Property="CaretBrush" Value="White" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Foreground" Value="White" />
    </Style>

</ResourceDictionary>

第二步:自定义TextBox使用

 <TextBox
     x:Name="TextBox_Search"
     Width="150"
     Margin="0,2,0,2"
     FlowDirection="LeftToRight"
     Style="{DynamicResource TextBoxSearchStyle}"
     Tag="测试"
 </TextBox>
posted @   qiutian-hao  阅读(107)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示