Geek Answers Handbook

WPF text box with image

I am using WPF login interface. In my login panel, I have one TextBox and PasswordBox login. As shown in the first image below, there is a small human logo in the login text box and a lock in the password field. I set the image to the background of the text box, and then when I try to insert some word into the login window, the words will overlap the human logo (image B). Any tips to do 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:

enter image description here

Image B:

enter image description here

+4
source share
2 answers

My suggestion is that you replace each of the Textbox's with a DockPanel . Each of them has Image as the leftmost element, and Textbox as the rightmost. Then set the images to "User" and "Block" respectively. Then set the Textbox and Images background to transparent. Then you can set whatever style you want on the DockPanel .

EDIT 1 - Copy paste from a 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>

Picture

enter image description here

Without setting the DockPanel.Dock property in the second element, I tell it to stretch along the rest of the DockPanel . Any other questions, please let me know. If you copy the insert above, it may not look like that, because of me, cutting out unnecessary parts.

+11
source 
  <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>
0
source

More articles:


All Articles