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.
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.
Typically, we'll set the following properties (for an image on the right, for example):
ImageAlign: MiddleRight
TextAlign: MiddleLeft
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?
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 ;)
Related
I'm new on Windows development and more in Windows Phone Development.
I'm trying to create a grid view composed of three cell.
Each grid view are composed of one image (for the background) and a textblock.
My background image is a cloud image and I want the first image partialy hidden by the second one and the second one partially hidden by the third one.
I tried to play with the margin of the cell for the y part, that's works but my cloud image doesn't make the entire width of my cell. So I tried the "UnifirmToFill" option but my images are cropped...
On iOS development in this case we can use the magic property "ClipToBounds", everywhere I saw the answer "use the clip to bounds property" but apparently this property is a legend or Visual Studio lie me...
Do you have an idea to resolve my problem ?
Thank you in advance!
To resume:
If I use the "uniformToFill" stretch option, my image is zoomed. It is ok for me.
But there is a way to display the cropped part? I want my image zoomed and displayed out the cell view.
In XAML there are four possible Stretch options:
None
The image is shown in it's original size. If its larger than the parent element, it'll only show the top left portion of the image that fits inside. If the image is smaller than the parent element, then it's shown in it's entirety.
Fill
The image is resized to fill the parent element. If the aspect ratios are different, then the image will be stretched to fit the parent. This will distort the image.
Uniform
The image will be scaled up as large as it can be, while still being completely inside of the parent. Unlike Fill which will stretch the image to make it fit perfectly, Uniform will keep the aspect ratio of the image and stop scaling when it reaches the bounds of the parent.
UniformToFill
This is the bastard child of the previous two. It will scale the image, while keeping the aspect ratio, until it fills the parent element. This means that some parts of the image will be clipped if the aspect ratios are different.
For more information on the Stretch enumeration, hit it up on MSDN
UPDATE
If you want to show the image outside of the bounds of the parent you could do something like this:
<Grid Width="100" Height="50">
<Grid.Clip>
<RectangleGeometry Rect="0 0 100 50"/>
</Grid.Clip>
</Grid>
This was suggested here on SO
I have a pretty standard application with a bar at the bottom. The bar and app are the same background color. My issue is that there is a tiny little line along the edge of the application bar, I can only determine that is it some sort of soft edge that is part of the default style of the ApplicationBar.
Here is an image of the display, note the tiny 1-2 pixel horizontal line:
It appears to be a 1-2 pixel black line with transparency. My main question is, what is this line, is it something I am introducing by accident?
It is by design a 1 pixel gap will be there between ApplicationBar and your ContentGrid. The gap will be visible only when your set the Opacity of the ApplicationBar to 1, So to get rid of the gap You can change the Opacity of the ApplicationBar to 0.99, so that the appbar comes above your ContentGrid.
Obviously you need to make some changes to your ContentGrid so that you can access the part of the Grid that the appbar is occupying.If your grid has ScrollViewer or ListView, it is always recommended to have some extra space after its contents*(may be a empty StackPanel with some height)* which will obviously solve this otherwise if it is a Static layout, you can make use of margin Property.
I'm in the process of making a WPF program that:
can scan a bitmap image, pixel-by-pixel, and assign it a data value (0-255)
design a class that allows panning and zooming of the picture
create a histogram, from the data values, that overlays the bitmap image.
I was able to do all three, however the issue that I am having is that the histogram doesn't dynamically (I think that's the word for it) stretch as I re-size the main window. Actually, nothing stretches to the correct size in the main window (the bitmap image just re-centers itself while keeping the same size). The histogram originally started as a transparent canvas that had many rectangle children. I changed it to a grid but am getting the same results as the canvas; the rectangles don't want to stretch horizontally or vertically. If I do set a horz/vert alignment the histogram disappears altogether. Can anyone help with this problem?
I ended up making a class that was a derivative of the canvas class i cave it some rendering overrides and a paint method that took into account the actual width and height of the window.
When adding an indicator to a report as per the image, is it possible to have all the indicators the same size regardless of the cell size (so centre them all rather than stretching to fill the cell)
Use rectangles within the cells of the table: within these, objects can be easily sized to not take full height or width.
Yes, sizing the rectangles and their contents can be annoying. I don't try to do much of this with the mouse, I quickly fall back to the properties window where I can type position and size.
try clicking on the indicator area (default name ie GaugeReportItem) within GaugePanel. You will get Size and position in Properties on the right hand side where you can choose AutoLayout. This will in effect center and resize gauges based on the cell width, height and your settings.
Hope it helps.
Exporting SSRS report to Excel did not go as expected.
Report with indicators in rectangles exported to Excel was randomly adding 0 height rows between the records which was not what I wanted. My indicators where simple green ticks and red crosses, based on true false. I have tried everything I found out there, even a subreport for indicator. No luck...
Figured it out that the indicators randomly outgrows the parent item when you export it, just like a chart. Ended up with saving a tick and a cross as an image. Then used an image control(with fit proportional set) and embedded Image with conditional statement to pick specific image. Also added some padding not to overlap borders.
The only problem I could think of is if the background of the report is not white as I could not change the background color of the cell the Image is and there is no option for the Image background.
Hope this helps someone else.
I have a UserControl which has a quadratic Image as a Child. This Image is at the bottom of the UserControl, and half of it is clipped (e.g. the Control's Height is 400, Image's height is 200 and it is set to y=300).
Now, When I rotate the Image, it is still clipped like the way it was first. Like when rotating around 90 degrees, I suddenly have an Image which is only 100px wide.
It seems like the original clipping which was made because of the bounds of the UserControl, are applied forever.
How do I solve this problem? I hope I explained my problem understandable ;)
How are you rotating the image? If you are rotating using a RenderTransform, then WPF does not re-render what was already displayed on the screen - it simply rotates the pixels.
Instead, rotate the image using a LayoutTransform; this forces WPF to re-render the control given the new area it occupies, which should eliminate the clipping you see.
You can also call InvalidateMeasure() after applying render transform.