如何在wpf文本框中分离背景图像? [英] how to separate the background image in wpf textbox?
问题描述
我是WPF的新手。在我的项目中,我已尝试使用usericon的用户名文本框。
I am new to WPF. In my project i have tried user name textbox box with usericon.
我的XAML代码: -
My XAML Code:-
> <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>
但是当我输入用户名时,文本框光标从左端开始,两个或三个字母不可见,它看起来很难看。 (见图)我如何在文本框中分隔这个背景图片。
But when i type the user name, text-box cursor starts from the left end, two or three letters are not visible and its looking ugly. (see the image) How i can separate this background image in 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中的用户图标。当我将光标移动到按钮时,用户图标不可见。帮助我改进我的代码..
I have tried as per the suggestion. But the problem is the button and text box are shows separate. It not look like user icon in texbox. And when i move the cursor to button, the usericon has invisible. help me to improve my code..
编辑2答案: -
在网格中添加以下代码Button Hover效果禁用的资源。
Add the below code in grid resource for Button Hover Effect Disable.
<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
And Add this to wpf window 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>
推荐答案
你可以看一下Asryael对这个问题。
它无需编辑任何模板即可解决类似问题。
Asryael的解决方案确实需要一些额外的造型。
You could take a look at Asryael's answer on this question. It solves a similar issue without having to edit any templates. Asryael's solution does require some extra styling.
您还可以尝试以下操作,只需添加一些填充:
You could also try the following, it simply adds some padding:
<TextBox Padding="16,2" Width="115" Height="28">
<TextBox.Background>
<ImageBrush ImageSource="Images/User.png" Stretch="None" AlignmentX="Left"/>
</TextBox.Background>
</TextBox>
这篇关于如何在wpf文本框中分离背景图像?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!