Wpf TextBox 如何簡單粗暴的實現水印效果?

效果圖預覽

 

新建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