效果图预览
新建UserControl
<Border Background="#F3F6F9" Height="50" Width="400"
CornerRadius="10" HorizontalAlignment="Stretch">
<Grid Height="Auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!--请将 Image 的属性 Source 修改为自己的项目路径-->
<Image Source="/Sample;component/Resources/search.png" Width="25" Stretch="Uniform"/>
<TextBox Grid.Column="1" x:Name="searchQuery" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" VerticalContentAlignment="Center" TextAlignment="Left" BorderThickness="0" Background="Transparent"/>
<TextBlock Grid.Column="1" Margin="3,0,0,0" Text="请输入搜索内容..." FontWeight="Bold" HorizontalAlignment="Left" TextAlignment="Left" VerticalAlignment="Center" Foreground="LightGray" IsHitTestVisible="False">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Visibility" Value="Collapsed"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Text, ElementName=searchQuery}" Value="">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</Grid>
</Border>
必读:请将 Image 的属性 Source 修改为自己的项目路径
将 search.png 保存到项目中设置 必读:生成操作修改Resource
来源:oschina
链接:https://my.oschina.net/u/4324861/blog/4416098