如何分离wpf文本框中的背景图像？答案

【问题标题】：how to separate the background image in wpf textbox?如何分离wpf文本框中的背景图像？
【发布时间】：2013-10-31 07:31:45
【问题描述】：

我是 WPF 新手。在我的项目中，我尝试了带有 usericon 的用户名文本框。

我的 XAML 代码：-

> <TextBox Height="30" Width="180" Margin="67,123,256,158">
>             <TextBox.Background>
>                 <ImageBrush  ImageSource="Images/User.png" Stretch="None" AlignmentX="Left" AlignmentY="Center" />
>             </TextBox.Background>
>         </TextBox>

但是当我输入用户名时，文本框光标从左端开始，两三个字母不可见，而且看起来很丑。（见图）如何在文本框中分离此背景图像。

编辑 1-

>  <Canvas>
>         <DockPanel Canvas.Left="115" Canvas.Top="64">
>             <Button BorderThickness="0" DockPanel.Dock="Left" HorizontalAlignment="Right" Height="28" Width="23">
>                 <Button.Background>
>                     <ImageBrush  ImageSource="Images/User.png" Stretch="None" AlignmentX="Left" AlignmentY="Center" />
>                 </Button.Background>
>             </Button>
>             <TextBox Height="28" Width="115" HorizontalAlignment="Stretch" Background="Transparent"/>
>         </DockPanel>
>         </Canvas>

我已经按照建议进行了尝试。但问题是按钮和文本框是分开显示的。它看起来不像 texbox 中的用户图标。当我将光标移动到按钮时，用户图标是不可见的。帮助我改进我的代码..

编辑 2 答案：-

在网格资源中添加以下代码以禁用按钮悬停效果。

<Style x:Key="ButtonWithoutHover" TargetType="Button">
                <Setter Property="OverridesDefaultStyle" Value="True"/>
                <Setter Property="Margin" Value="0"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Border Name="border" 
                            BorderThickness="0"                                                        
                            Background="{TemplateBinding Background}">
                                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter TargetName="border" Property="BorderBrush" Value="Black" />
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

并将其添加到 wpf 窗口 XAML

<Canvas >
            <Border BorderThickness="2" BorderBrush="DarkBlue" Canvas.Left="307" Canvas.Top="65">
            <DockPanel Canvas.Left="115" Canvas.Top="30">
                <Button Style="{StaticResource ButtonWithoutHover}" BorderThickness="0" DockPanel.Dock="Left" HorizontalAlignment="Right" Height="28" Width="23">
                    <Button.Background>
                        <ImageBrush  ImageSource="Images/User.png" Stretch="None" AlignmentX="Left" AlignmentY="Center" />
                    </Button.Background>
                </Button>
                <TextBox FontSize="20"  BorderThickness="0" Height="28" Width="115" HorizontalAlignment="Stretch" Background="Transparent"/>
            </DockPanel>
            </Border>           
        </Canvas>

【问题讨论】：

标签： wpf image textbox

【解决方案1】：

您可以在 this question 上查看 Asryael 的回答。它解决了类似的问题，而无需编辑任何模板。 Asryael 的解决方案确实需要一些额外的样式。

您也可以尝试以下方法，它只是添加了一些填充：

<TextBox Padding="16,2" Width="115" Height="28">
    <TextBox.Background>
        <ImageBrush ImageSource="Images/User.png" Stretch="None" AlignmentX="Left"/>
    </TextBox.Background>
</TextBox>

【讨论】：

您必须进行一些样式编辑以使其看起来更漂亮。您必须删除按钮悬停效果和背景。与 TextBox 背景相同，并在 DockPanel 上放置任何背景/边框样式。
哦！您更新的答案非常好。如果我早上就知道这一点，它可以节省我的洞天。但现在我知道如何在文本框中添加按钮 :-)

【解决方案2】：

你可以试试下面的 Dock Panel

 <DockPanel>
     <Button BorderThickness="0" DockPanel.Dock="Left" HorizontalAlignment="Right"    Height="28" Width="25" Margin="200,10,10,10">     
      </Button>
     <TextBox Text="User" FontSize="16" HorizontalAlignment="Stretch" Background="Transparent" Height="28" Width="200" Margin="-80,10,10,10"/>
   </DockPanel>

这可能对你有帮助

【讨论】：