WPF中带有图像图标的文本框

Question

我想要创建一个带有图像的TextBox，这是我尝试过的：

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

这让我得到输出，如下所示：

但是我希望像这样将图片放在 TextBox 中

有人能帮忙吗？

- Neelam Prajapati

---

你看过这个吗？https://dev59.com/Z13Ua4cB1Zd3GeqP9BJF - Babbillumpa

是的，我尝试过这个...但在那种情况下，我的文本会覆盖在图片上。 - Neelam Prajapati

Answer 1

您可以使用这种实现方法。你可能应该将其制作成用户控件。

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

这是我看到的样子

- MichaelThePotato

---

这个回答使用了一个不可编辑的TextBlock，而问题是关于在TextBox中添加图像。我认为A.Pissicat的回答应该被接受。 - Andreas Fröwis

Answer 2

您可以在文本框上设置背景属性，就像这样（我的是右对齐）：

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

如果您想在左侧看到图像，请将AlignmentX设置为左侧。将TranslateTransform.X设置为正值以添加边距。

- A.Pissicat

Answer 3

试试这个：

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

这是最简单的一次性方法。您可以将其放入UserControl以进行重用。

第二种实现方法是打开TextBox模板并将您的图标放入TextBox的外观中，这样您就可以避免在此处需要DockPanel和Border，并且可以使模板成为您可以轻松附加到任何文本框的资源。

- Logan