效果图预览
新建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