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

【问题标题】：TextBox with image icon in WPFWPF中带有图像图标的文本框
【发布时间】：2016-11-13 05:59:42
【问题描述】：

我想创建带有图像的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 里面的图片，就像这样

有人可以帮忙吗？

【问题讨论】：

你见过这个吗？ stackoverflow.com/questions/8070906/…
是的，我试过这个..但在那种情况下，我的文字会超过图像

标签： wpf image textbox

【解决方案1】：

你可以在 Textbox 上设置背景属性，像这样（我的是右对齐）：

<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 设置为正值以添加边距。

【讨论】：

【解决方案2】：

试试这个：

<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，以及允许您制作模板是您将来可以轻松附加到任何文本框的资源。

【讨论】：

【解决方案3】：

您可以使用这种实现方式。你可能应该让用户控制它。

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

对我来说是这样的

【讨论】：

此答案使用不可编辑的TextBlock，而问题询问有关将图像添加到TextBox。我认为 A.Pissicat 的答案应该是公认的答案。