Question

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?

My 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>

Image A:

Image B:

Answer 1

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.

EDIT 1 – Copy paste from working example

Code:

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

Image:

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.