網(wǎng)站方案策劃5118營銷大數(shù)據(jù)
WPF里TextBox沒有placeholder,需要自己實現(xiàn),本篇博客介紹WPF TextBox實現(xiàn)placeholder,效果如下:
實現(xiàn)技巧是在 TextBox 控件的 Style 中使用觸發(fā)器(Triggers)來顯示和隱藏placeholder文本。xmal代碼如下:
<Window x:Class="WpfApp_TextBox.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:WpfApp_TextBox"mc:Ignorable="d"Title="MainWindow" Height="461" Width="837"><Grid><Canvas><!--設(shè)置placeholder--><TextBox x:Name="userName" Width="240" Height="36" FontSize="16" Canvas.Left="20" Canvas.Top="20"><TextBox.Style><Style TargetType="TextBox"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="TextBox"><Grid><TextBox x:Name="textSource" Text="{Binding Text, RelativeSource={RelativeSource TemplatedParent}}" Background="Transparent" Padding="5"/><TextBlock IsHitTestVisible="False" Text="Enter text here..." Foreground="Gray" Padding="5"><TextBlock.Style><Style TargetType="TextBlock"><Setter Property="Visibility" Value="Collapsed"/><Style.Triggers><DataTrigger Binding="{Binding Text, Source={x:Reference textSource}}" Value=""><Setter Property="Visibility" Value="Visible"/></DataTrigger></Style.Triggers></Style></TextBlock.Style></TextBlock></Grid></ControlTemplate></Setter.Value></Setter></Style></TextBox.Style></TextBox><!--WPF 中的 TextBox 控件可以設(shè)置為自動換行。你可以通過設(shè)置 TextBox 的 TextWrapping 屬性為 Wrap 來實現(xiàn)這個功能。當(dāng) TextWrapping 屬性設(shè)置為 Wrap 時, TextWrapping="Wrap", TextBox 會在文本達(dá)到邊界時自動換行。--><TextBox Width="200" Height="80" Canvas.Left="20" Canvas.Top="100" VerticalScrollBarVisibility="Auto"TextWrapping="WrapWithOverflow"AcceptsReturn="True"ScrollViewer.CanContentScroll="True"/><TextBox x:Name="UsernameTextBox" Width="200" Height="30" FontSize="18" VerticalAlignment="Top" HorizontalAlignment="Left" VerticalContentAlignment="Center" Canvas.Left="20" Canvas.Top="220"><TextBox.Template><ControlTemplate TargetType="TextBox"><Border Background="White" BorderBrush="Gray" BorderThickness="1"><Grid><Grid.ColumnDefinitions><ColumnDefinition Width="Auto" /><ColumnDefinition Width="*" /></Grid.ColumnDefinitions><Image Grid.Column="0" Source="/Assets/Images/user.png" Width="20" Height="20" Margin="5,0,0,0" /><ScrollViewer x:Name="PART_ContentHost" Grid.Column="1" /><!--這里Margin可以調(diào)整文字的位置--><TextBlock Grid.Column="1" Text="Enter username..." IsHitTestVisible="False" Foreground="LightGray" Margin="5,2,0,0"><TextBlock.Style><Style TargetType="TextBlock"><Setter Property="Visibility" Value="Collapsed" /><Style.Triggers><DataTrigger Binding="{Binding Text, ElementName=UsernameTextBox}" Value=""><Setter Property="Visibility" Value="Visible" /></DataTrigger></Style.Triggers></Style></TextBlock.Style></TextBlock></Grid></Border></ControlTemplate></TextBox.Template></TextBox><Button Content="Button" HorizontalAlignment="Left" Canvas.Left="20" Canvas.Top="320" VerticalAlignment="Top" Height="41" Width="122" Click="Button_Click"/></Canvas></Grid>
</Window>
需要注意的是,文本的上下邊距,如果有藍(lán)湖設(shè)計圖寫起來會很容易,比如上面代碼中,使用Margin調(diào)整上邊距
Font屬性
FontSize="18"
TextBlock的Margin屬性
<!--這里Margin可以調(diào)整文字的位置-->
<TextBlock Grid.Column="1" Text="Enter username..." IsHitTestVisible="False" Foreground="LightGray" Margin="5,2,0,0">
經(jīng)過這樣調(diào)整后placeholder的內(nèi)容才比能豎直居中顯示。