WPF密码框眼睛图标居中异常:如何修正图标居左上问题?
解决WPF密码框眼睛按钮图标居中问题
看起来你遇到的问题主要是按钮内部的眼睛图标没有正确居中,咱们来一步步搞定它。先看你代码里的几个关键点:你用了ImageBrush作为按钮背景,还设置了Stretch="None",另外按钮本身的布局属性也可能影响图标的显示位置。下面给你两种实用的解决方案:
方法一:用Image作为Button的Content(更推荐)
这种方式比用Background更直观,也更容易控制图标位置。你只需要把图标放在Button的Content里,然后设置按钮的内容对齐属性即可:
<Button x:Name="button" HorizontalAlignment="Left" Height="26" Margin="215,38,0,0" VerticalAlignment="Top" Width="30" HorizontalContentAlignment="Center" <!-- 让内容水平居中 --> VerticalContentAlignment="Center"> <!-- 让内容垂直居中 --> <Image Source="../pics/eye3.png" Stretch="Uniform" <!-- 保持图标比例,避免变形 --> Width="15" Height="15"/> <!-- 按需调整图标大小 --> </Button>
这样设置后,图标会自动在按钮的中心位置显示,而且你可以直接调整Image的Width/Height来控制图标大小,比用Transform缩放更直观。
方法二:调整ImageBrush的属性(如果你坚持用Background)
如果你一定要用ImageBrush作为按钮背景,那需要调整几个属性让图标居中:
<Button x:Name="button" HorizontalAlignment="Left" Height="26" Margin="215,38,0,0" VerticalAlignment="Top" Width="30"> <Button.Background> <ImageBrush ImageSource="../pics/eye3.png" Stretch="Uniform" <!-- 替换None为Uniform,让图标按比例适配按钮 --> AlignmentX="Center" AlignmentY="Center"> <ImageBrush.Transform> <!-- 加上CenterX和CenterY,让缩放围绕图标中心进行 --> <ScaleTransform ScaleX=".5" ScaleY=".5" CenterX="0.5" CenterY="0.5"/> </ImageBrush.Transform> </ImageBrush> </Button.Background> </Button>
之前的Stretch="None"会让图标保持原始尺寸,加上缩放后很容易偏移到角落;改成Uniform后图标会按比例缩放并适配按钮区域,再配合AlignmentX/Y="Center"和缩放的中心设置,就能让图标居中显示了。
内容的提问来源于stack exchange,提问作者user9698300




