wpf ScrollViewer 在输入数据时去除水印

StevenChen85

已于 2025-05-02 21:21:05 修改

阅读量388

点赞数 11

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

于 2025-05-02 21:11:31 首次发布

本文链接：https://blog.csdn.net/cjh16606260986/article/details/147672340

版权

WPF 专栏收录该内容

55 篇文章

订阅专栏

前言

wpf ScrollViewer 在输入数据时去除水印

在WPF（Windows Presentation Foundation）中，ScrollViewer控件通常用于显示滚动内容。如果你想在ScrollViewer中使用数据输入（例如文本输入），并且希望在输入时去除水印（通常指的是文本框中的提示文字）

使用样式和触发器（推荐）

最简单且最常见的方法是使用WPF的样式和触发器来控制水印的显示和隐藏。这种方法不需要修改任何属性值，而是通过样式和触发器来动态地显示或隐藏水印。

<ScrollViewer>
    <TextBox Style="{StaticResource WatermarkStyle}" />
</ScrollViewer>

在资源字典中定义WatermarkStyle：

<Style x:Key="WatermarkStyle" TargetType="{x:Type TextBox}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type TextBox}">
                <Grid>
                    <TextBox x:Name="textSource" 
                             Text="{Binding Text, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" 
                             Background="Transparent" 
                             Padding="5,2" 
                             VerticalContentAlignment="Center"/>
                    <Label Visibility="Collapsed" x:Name="watermark" IsHitTestVisible="False" Padding="5,0">请输入内容</Label>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="Text" Value="">
            <Setter TargetName="watermark" Property="Visibility" Value="Visible"/>
        </Trigger>
        <Trigger Property="IsKeyboardFocused" Value="True">
            <Setter TargetName="watermark" Property="Visibility" Value="Collapsed"/>
        </Trigger>
    </Style.Triggers>
</Style>

在这个方法中，当文本框为空且未获得焦点时，水印可见；当文本框获得焦点或有文本时，水印隐藏。这样，你就可以在用户输入时自动去除水印了。

项目实战

效果

样式

<ControlTemplate TargetType="TextBox" x:Key="UserNameTestBoxTemplate">
    <!--画一条底线 Border BorderBrush="#DDD" BorderThickness="0,0,0,1"-->
    <Border BorderBrush="#DDD" BorderThickness="0,0,0,1">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="30" />
                <ColumnDefinition />
                <ColumnDefinition Width="30" />
            </Grid.ColumnDefinitions>

            
            <TextBlock Text="&#xe882;" FontFamily="{StaticResource iconfont}"
                       FontSize="20" Foreground="#BBB" VerticalAlignment="Center"
                       HorizontalAlignment="Center"/>
            <!--水印-->
            <TextBlock Grid.Column="1" x:Name="txtUserBack" Text="请输入用户名" Foreground="#DDD" VerticalAlignment="Center"/>
            <ScrollViewer Grid.Column="1" x:Name="PART_ContentHost" Focusable="False" 
                          HorizontalScrollBarVisibility="Hidden" Margin="0,5,0,0"/>
            <TextBlock Text="&#xe633;" Grid.Column="2" FontFamily="{StaticResource iconfont}"
                       FontSize="18" Foreground="#BBB" VerticalAlignment="Center" 
                       HorizontalAlignment="Center"/>
        </Grid>
    </Border>
    <ControlTemplate.Triggers>
        <!--水印触发器-->
        <Trigger Property="Text" Value="">
            <Setter TargetName="txtUserBack" Property="Visibility" Value="Visible"/>
        </Trigger>
        <Trigger Property="IsKeyboardFocused" Value="True">
            <Setter TargetName="txtUserBack" Property="Visibility" Value="Collapsed"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

UI完成代码

<Window x:Class="Zhaoxi.SmsrtParking.App.Views.LoginWindow"
        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:Zhaoxi.SmsrtParking.App.Views"
        xmlns:pwd="clr-namespace:Zhaoxi.SmsrtParking.App.Helper"
        xmlns:prism="http://prismlibrary.com/"
        prism:ViewModelLocator.AutoWireViewModel="True"
        mc:Ignorable="d" ResizeMode="NoResize" 
        WindowStartupLocation="CenterScreen"
        Title="{Binding Title}" Height="328" Width="428">
    <WindowChrome.WindowChrome>
        <WindowChrome NonClientFrameEdges="None" GlassFrameThickness="-1" ResizeBorderThickness="0"/>
    </WindowChrome.WindowChrome>
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <!--资源合并-->
                <!--<ResourceDictionary Source="/Asset/Styles/ButtonStyles.xaml"/>-->
                <ResourceDictionary>
                    <ControlTemplate TargetType="TextBox" x:Key="UserNameTestBoxTemplate">
                        <!--画一条底线 Border BorderBrush="#DDD" BorderThickness="0,0,0,1"-->
                        <Border BorderBrush="#DDD" BorderThickness="0,0,0,1">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="30" />
                                    <ColumnDefinition />
                                    <ColumnDefinition Width="30" />
                                </Grid.ColumnDefinitions>

                                
                                <TextBlock Text="&#xe882;" FontFamily="{StaticResource iconfont}"
                                           FontSize="20" Foreground="#BBB" VerticalAlignment="Center"
                                           HorizontalAlignment="Center"/>
                                <!--水印-->
                                <TextBlock Grid.Column="1" x:Name="txtUserBack" Text="请输入用户名" Foreground="#DDD" VerticalAlignment="Center"/>
                                <ScrollViewer Grid.Column="1" x:Name="PART_ContentHost" Focusable="False" 
                                              HorizontalScrollBarVisibility="Hidden" Margin="0,5,0,0"/>
                                <TextBlock Text="&#xe633;" Grid.Column="2" FontFamily="{StaticResource iconfont}"
                                           FontSize="18" Foreground="#BBB" VerticalAlignment="Center" 
                                           HorizontalAlignment="Center"/>
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <!--水印触发器-->
                            <Trigger Property="Text" Value="">
                                <Setter TargetName="txtUserBack" Property="Visibility" Value="Visible"/>
                            </Trigger>
                            <Trigger Property="IsKeyboardFocused" Value="True">
                                <Setter TargetName="txtUserBack" Property="Visibility" Value="Collapsed"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </ResourceDictionary>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="0.618*" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Border Grid.Row="0" Background="#2E9FFB" />
        <StackPanel Grid.Row="0" Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Left">
            <Image Source="/Asset/Images/Logo.png" Width="40" Height="40" Margin="10" />
            <TextBlock Text="Zhaoxi" VerticalAlignment="Center" Foreground="White" FontSize="16"/>
        </StackPanel>

        <StackPanel Grid.Row="0" Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Right">
            <Button Content="&#xe624;" Style="{StaticResource IconButtonStyle}" 
                    Name="Btn_Min" Height="28" Click="Btn_Min_Click" />
            <Button Content="&#xe609;" Style="{StaticResource IconButtonStyle}" 
                    Name="Btn_Close" Height="28" Click="Btn_Close_Click" />
        </StackPanel>
        <!--头像-->
        <Border Width="70" Height="70" Grid.RowSpan="2" VerticalAlignment="Top" CornerRadius="40" Margin="0,80,0,0"
                BorderThickness="2" BorderBrush="#FFA5CEF0">
            <Border.Effect>
                <DropShadowEffect BlurRadius="10" ShadowDepth="5" Direction="265" Opacity="0.3" Color="Gray"/>
            </Border.Effect>
            <Border.Background>
                <ImageBrush ImageSource="/Asset/Images/avatar.png"/>
            </Border.Background>
        </Border>
        
        <StackPanel Grid.Row="1" VerticalAlignment="Bottom" Width="240" Margin="0,0,0,10">
            <TextBox Text="{Binding Account}" Height="33" FontSize="18" Background="Transparent"
                     Template="{StaticResource UserNameTestBoxTemplate}"/>
            <PasswordBox pwd:PasswordBoxHelper.Password="{Binding Pwd}"
                         pwd:PasswordBoxHelper.Attach="True" 
                         Height="33"/>
            <TextBlock Text="{Binding ErrorMsg}" Foreground="Red" Height="30"/>
            <Button Width="120" Height="50" Content="Login" Command="{Binding LoginCommand}"/>
        </StackPanel>
        
    </Grid>
</Window>