WPF带图像的文本框

Question

我将为您进行翻译。以下是您需要翻译的内容：

我正在做一个WPF登录界面。在我的登录面板中，有一个登录TextBox和一个PasswordBox。如下图所示，在登录文本框中有一个小人标志，在密码框中有一个锁。我将图像设置为文本框背景，然后当我尝试向登录框中插入一些字时，这些字会覆盖小人标志（图B）。有什么建议可以解决这个问题吗？

我的XAML：

 <TextBox Width="380" Height="25" HorizontalAlignment="Center"  Foreground="WhiteSmoke" BorderBrush="Transparent" >
     <TextBox.Background>
       <ImageBrush ImageSource="/icon/user_login.png" AlignmentX="Left" Stretch="None"></ImageBrush>
     </TextBox.Background>
 </TextBox>

图像A：

图像B：

- Nerdynosaur

Answer 1

我的建议是用 DockPanel 替换每个 Textbox。在其中，它们各自具有一个 Image 作为最左边的项目和一个 Textbox 作为最右边的项目。然后将图像分别设置为 User 和 Lock。然后将 Textbox 和 Image 的背景设置为透明。你可以在 DockPanel 上设置任何样式。

编辑1-从工作示例中复制粘贴

代码:

<DockPanel>
    <Button BorderThickness="0" DockPanel.Dock="Left" HorizontalAlignment="Right" Height="28" Width="23">
         <DynamicResource ResourceKey="SearchBar"/>
    </Button> 'This is a button, because I have a custom Style which I am using which makes all the borders go away. And also because I use it to clear the field.
    <TextBox Text="Search..." FontSize="16" HorizontalAlignment="Stretch" Background="Transparent"/>
</DockPanel>

图片：

没有在第二个项目上设置DockPanel.Dock属性，这意味着我告诉它要伸展到其余的DockPanel。如有其他问题，请告知我。如果你复制粘贴上面的内容，由于我删去了不相关的部分，可能看起来不一样。

- JosephGarrone

Answer 2

 <DockPanel Grid.Row="1" Margin="65,24,71,11" HorizontalAlignment="Stretch">
                            <Image Source="/SDPI;component/Image/Profile.png"/>
                            <toolkit:WatermarkTextBox Grid.Row="1" FontSize="16">
                                <toolkit:WatermarkTextBox.Watermark>
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock Text="Username" FontSize="15" Margin="4,0,0,0" />
                                    </StackPanel>
                                </toolkit:WatermarkTextBox.Watermark>
                            </toolkit:WatermarkTextBox>
                        </DockPanel>

- Hasansalih

---

WatermarkTextBox来自Extended WPF Toolkit™社区版：https://wpftoolkit.codeplex.com/wikipage?title=WatermarkTextBox&referringTitle=Home - Maxence