带有图像的 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：

Answer 1

我的建议是您将每个Textbox's 替换为DockPanel。其中他们每个人都有一个Image 作为最左边的项目，Textbox 作为最右边的项目。然后将图像分别设置为用户和锁定。然后将Textbox和Images的背景设置为透明。然后，您可以在 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 的其余部分。如有其他疑问，请告诉我。如果你复制粘贴上面的内容，它可能看起来不一样，因为我剪掉了不相关的部分。

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>