WPF textbox with image | 易学教程

问题

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:

回答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.

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

来源：https://stackoverflow.com/questions/13927364/wpf-textbox-with-image

标签

wpf

image

xaml

textbox

passwordbox