You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

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

火山引擎 最新活动