带有图像的 WPF 文本框 [英] WPF textbox with image

问题描述

我正在做一个 WPF 登录界面.在我的登录面板中，我有一个登录 TextBox 和一个 PasswordBox.如下图第一张所示，登录文本框中有一个小人类标志，密码框中有一个锁.我将图像设置为文本框背景，然后当我尝试在登录框中插入一些单词时，这些单词将覆盖人类徽标(图像 B).有什么建议可以改正吗?

I'm doing a WPF login interface. In my login panel, I have one login TextBox and a PasswordBox. As what shown in the first image below, there is a little human logo in the login textbox and a lock in the password box. I set the image into the textbox background, and then when i try to insert some word into the login box, the words will overide the human logo(image B). Any advice to make it right?

我的 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:

推荐答案

我的建议是您将每个 Textbox's 替换为 DockPanel.其中，它们每个都有一个 Image 作为最左边的项目，一个 Textbox 作为最右边的项目.然后将图像分别设置为用户和锁定.然后将 Textbox 和 Images 的背景设置为透明.然后，您可以在 DockPanel 上设置您想要的任何样式.

My suggestion is that you replace each of the Textbox's with a DockPanel. In which they each have an Image as the left-most item and a Textbox as the right most. Then set the images to User and Lock respectively. Then set the backgrounds of the Textbox and Images to transparent. You can then set whatever styling you want on the DockPanel.

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

EDIT 1 - Copy paste from working example

代码:

<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 的其余部分.如有其他疑问，请告诉我.如果你复制粘贴上面的，它可能看起来不一样，因为我剪掉了不相关的部分.

By not setting the DockPanel.Dock property on the second item, I am telling it to stretch across the rest of the DockPanel. Any other queries, please let me know. If you copy paste the above, it might not look the same, due to me cutting out irrelevant parts.

这篇关于带有图像的 WPF 文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！