【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 @ 2024-06-19 08:39  qiutian-hao  阅读(159)  评论(0)    收藏  举报