CODEWITHSUNDEEP
wpfimagetextbox
Neelam Prajapati
Neelam Prajapati

Reputation: 3802

TextBox with image icon in WPF

I want to create TextBox with image in it. This is what I have tried:

<DockPanel Grid.Row="1" Grid.Column="1" Margin="5" >
    <Image DockPanel.Dock="Left" Source="D:\my_backup\WPF\SALIENT\SALIENT\Images\d2.PNG" Width="20" Height="20"></Image>
        <TextBox  Text="test" FontSize="16" HorizontalAlignment="Stretch" Background="Transparent"                                    
        </TextBox>
</DockPanel>

this gives me output like this: img

but i want the image inside TextBox like thisimg

anyone can help?

Upvotes: 14

Views: 27810

Answers (3)

A.Pissicat
A.Pissicat

Reputation: 3265

You can set the background property on Textbox, like this (mine is align on right) :

<TextBox x:Name="txtSearch"
         Text="Search Item...">
    <TextBox.Background>
        <ImageBrush ImageSource="Images/Search.png" Stretch="Uniform" AlignmentX="Right">
            <ImageBrush.Transform>
                <TransformGroup>
                    <ScaleTransform/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform X="-3"/>                        
                </TransformGroup>
            </ImageBrush.Transform>
        </ImageBrush>
    </TextBox.Background>
</TextBox>

Set AlignmentX to left if you want to see the image on the left side. Set the TranslateTransform.X to a positive value to add a margin.

Upvotes: 16

Logan
Logan

Reputation: 816

Try this:

<Border Padding="5" BorderThickness="2,2,2,2" BorderBrush="Gray" CornerRadius="2,2,2,2">
    <DockPanel Grid.Row="1" Grid.Column="1" Margin="5" >
         <Image DockPanel.Dock="Left" Source="D:\my_backup\WPF\SALIENT\SALIENT\Images\d2.PNG" Width="20" Height="20"></Image>
         <TextBox  Text="test" FontSize="16" HorizontalAlignment="Stretch" Background="Transparent" BorderBrush="Transparent" ></TextBox>
    </DockPanel>
</Border>

That would be the simplest one-off way of doing it. You could dump it in a UserControl for reuse.

A second way of achieving this would be to open up the TextBox template and put this icon of yours inside the makeup of the TextBox, which would allow you to avoid needing the DockPanel and Border here, as well as allowing you to make the Template a resource you can easily attach to any Textbox in the future.

Upvotes: 2

MichaelThePotato
MichaelThePotato

Reputation: 1525

You could use this sort of implementation. you should probably make a user control out of it.

<Border BorderBrush="Black"
            BorderThickness="2"
            VerticalAlignment="Center"
            CornerRadius="5">

        <StackPanel Margin="5"
                    Orientation="Horizontal">

            <Image Source="C:\SourceOfTheImage\Path\Image.png" 
                   Height="18"/>
            <TextBlock Text="Hello, I am a text block!"
                       Margin="3 0 0 0"/>

        </StackPanel>


    </Border>

It looks like this for me

Upvotes: 17

Related Questions