按钮图像距离按钮顶部太远; 太靠近按钮底部
我正在 VB.NET 2005 中开发 Windows 窗体,我想要一些带有图像的按钮(我说的是普通的、普通的 System.Windows.Forms.Button)。 我已经按照我想要的方式设置了所有内容,但图像在按钮上显示得太低,因此图标的底部几乎位于按钮的底部,并且图像上方有很多空间。
这是屏幕截图:
按钮屏幕截图 http://www.freeimagehosting.net/uploads/b28a5c63b8.jpg
看看如何图标的一角是否碰到了按钮的底部?
我的按钮高 23 像素,图像是 16 x 16 图标(转换为位图,以便可以将其分配给按钮的 Image 属性)。
我尝试将按钮的 Margin.All 属性设置为 0,并验证 Padding.All 属性为 0。我还尝试将按钮的 ImageAlign 更改为 TopLeft、MiddleLeft 和 BottomLeft,但这些设置似乎都没有任何影响。
有谁知道如何将图像定位为与按钮的顶部和底部边缘距离相等? 如有必要,我可以调整按钮或图像的大小,但它们是我喜欢的大小,如果可能的话,我希望保持这种状态。
I'm working on a Windows Form in VB.NET 2005 and I would like to have some buttons with images (I'm talking about the plain, vanilla System.Windows.Forms.Button). I have everything set up the way I want it but the images are displaying too low on the button, such that the bottom of the icon is almost right on the bottom of the button and there is a lot of space above the image.
Here is a screenshot:
Button Screenshot http://www.freeimagehosting.net/uploads/b28a5c63b8.jpg
See how the corner of the icon is brushing up against the bottom of the button?
My button is 23 pixels high and the image is a 16 x 16 icon (converted to a bitmap so that it can be assigned to the button's Image property).
I've tried setting the button's Margin.All property to 0, and verified that the Padding.All property is 0. I've also tried changing the button's ImageAlign to TopLeft, MiddleLeft, and BottomLeft, but none of those settings seem to have any affect.
Does anyone know how I can position the image to be of equal distance from the top and bottom edges of the button? I can resize the button or the image if necessary but they are at my preferred size and I would like to keep them that way if possible.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
我刚刚遇到了类似的问题,经过我认真思考才得以解决。 (这些情况不是很好吗?)
解释
首先,重要的是要理解 ImageAlign 并不意味着您想要图像在按钮上的哪个位置。 它的意思是应该使用图像上的哪个点(像素)来进行定位。 因此,如果您选择“TopLeft”,则图像的左上角像素将在按钮上垂直居中。
当您有一个带有居中图像的按钮时,问题就出现了,其 ImageAlign 设置为垂直于“中心”,并且其尺寸为偶数个像素。 您的图像为 16x16 像素 - 16 是偶数。 理论上,中间像素位于像素 8 和像素 9 之间。由于没有像素 8.5,VB 向下舍入为 8,从而使用像素 8 作为定位像素。 这是您不需要的上边距的根本原因。
您的按钮具有奇数像素高度 (23px),这意味着它具有真正的中心像素 - 像素 12。VB 尝试将图像的中心像素 (8) 放置在按钮的中心像素 (12) 之上。 这会将图像的 8 个像素置于中心下方,将 7 个像素置于中心上方。 为了平衡,图像上方会出现 1 像素的边距。
解决方案
在图像底部填充 1 行额外的像素。 现在图像的高度为奇数(17 像素),为图像提供了一个真正的中心像素,可以与按钮的中心像素完美对齐。
这就是我自己解决问题的方法。 然而,我突然想到了一个更简单的可能解决方案。 通过将图像的下边距指定为 1 像素,您或许可以获得相同的结果。 我还没有测试过这个解决方案,但它在理论上似乎与第一个解决方案等效。
附加说明:理论上,两个尺寸相同的物体应该能够完美地居中对齐。 但奇怪的是,即使按钮和图像的尺寸都是偶数,也会出现对齐问题。 (显然编译器在确定一个控件与另一个控件的中心像素的方式上并不一致。)尽管如此,在这种情况下,应用了相同的解决方案。
I just encountered a similar problem, which I was able to solve by thinking really hard. (Ain't those situations great?)
The explanation
First it's important to understand that ImageAlign does NOT mean where on the button do you want the image. It means what point (pixel) on the image should be used for positioning. So if you pick "TopLeft", then the top-left-most pixel of the image will be vertically CENTERED on the button.
The problem comes in when you have a button with a centered image, whose ImageAlign is set vertically to "center", and whose dimensions are of an even number of pixels. Your image is 16x16 pixels- 16 is an even number. The middle pixel would theoretically be somewhere between pixel 8 and pixel 9. Since there is no pixel 8.5, VB rounds down to 8, thereby using pixel 8 as your positioning pixel. This the root cause of your unwanted upper margin.
Your button has an odd pixel height (23px) which means it has a true center pixel- pixel 12. VB tries to position the image's center pixel (8) on top of the button's center pixel (12). This puts 8 of the image's pixels BELOW center, and 7 pixels ABOVE center. To even things out, a 1-pixel margin appears above the image.
The solution
Pad the image with 1 extra row of pixels on the bottom. The image now has a height that's odd (17 px), giving the image a true center pixel which can line up perfectly with the button's center pixel.
That's how I solved the problem for myself. However, a simpler possible solution just occurred to me. You could probably achieve the same result by assigning the image a bottom margin of 1px. I have not tested this solution but it seems theoretically equivalent to the first solution.
Additional note: Two objects of EVEN dimensions should theoretically be able to center-align perfectly. But strangely enough, the alignment problem occurs even if the button AND the image BOTH have even dimensions. (Apparently the compiler is not consistent in the way it determines the center pixel of one control vs another.) Nonetheless, in this case, the same solution applies.
通常,我们将设置以下属性(例如,对于右侧的图像):
您需要以类似的方式对齐文本和图像。 除此之外,请确保您设置的是 Image 属性,而不是 BackgroundImage 属性,并确保正确执行图标到纯位图的转换。 您是否尝试过纯位图文件?
Typically, we'll set the following properties (for an image on the right, for example):
You'll want to align both the text and image in a similar fashion. Outside of that, make sure that you are setting the Image property, not the BackgroundImage property and make sure you are doing the icon to plain bitmap conversion properly. Have you tried a plain bitmap file?
只是一个问题:您确定位图在注释图像顶部不包含任何信息吗? 我不止一次遇到过这样的情况,裁剪图在 Photoshop 中看起来正确,但在实时代码中却显示错误......:)
如果是这种情况,你的代码可能是完美的;)
Just a question: are you positive that the bitmap contains no information on the top of the note image? I have had that happen to me more than once where a crop looked right in Photoshop and came out incorrect in the live code... :)
If that were the case your code may be perfect ;)