I have a column of datatype bitmap. the value is composed of a set of icons merged into an image side by side which can vary in numbers. My problem is that when the column is resized the images shrink to fit to the point where no images are visible. How can I prevent this from hapenning? I'd like the image to be truncated instead of resized, only show what fit's in the cell and possibly have a "..." or similar indicator at the end to indicate that not all icons are shown.
I don't think there's any way to do this automatically. You can probably use a CreationFilter to control the size of the UIElements in the cell, though. If you are going to try that, I recommend that you get the Infragistics UIElementViewer Utility. It's a big help in working with UIElements.
This doesn'tdo the ellipsis like you wanted, but it seems to work pretty well:
public class MyCreationFilter : IUIElementCreationFilter { #region IUIElementCreationFilter Members public void AfterCreateChildElements(UIElement parent) { if (parent is EditorWithTextUIElement) { ImageUIElement imageUIElement = parent.GetDescendant(typeof(ImageUIElement)) as ImageUIElement; if (imageUIElement != null) { imageUIElement.Rect = new Rectangle( imageUIElement.Rect.X, imageUIElement.Rect.Y, imageUIElement.Image.Width, imageUIElement.Rect.Height); } } } public bool BeforeCreateChildElements(UIElement parent) { return false; } #endregion }
Thank you!
Works like a charm! Now if only I could get that ellipsis to show. :-)
Okay, that's a bit trickier, but it's certainly possible. First, I realize now that the code I have here is actually more complicated than it needs to be. You can do this, instead:
public void AfterCreateChildElements(UIElement parent) { if (parent is EmbeddableImageRendererUIElement) { ImageUIElement imageUIElement = parent.GetDescendant(typeof(ImageUIElement)) as ImageUIElement; if (imageUIElement != null) { imageUIElement.Scaled = false; } } }
This stops the image from scaling in a much easier way.
To detect if the image is being clipped, you could do this:
if (imageUIElement.ImageRect.Right > parent.Rect.Right)
From this, you can determine how much of the image is cut off and then change the image to a new image with an ellipsis in the right spot. The only problem with this approach is that you will be creating a whole lot of Bitmaps and it will be difficult to make sure they all get properly disposed. But it seems doable.
I tried your simplified version. Works great but i prefer the first solution. Because the first one makes the image scale down vertically when the row height is shrinked but not horizontally. The second one simply doesn't scale at all. So i get a very small amount of vertical clipping when shrinking rows on the simplified solution.
The ellipsis indeed seems trickier, not that the scalling wasn't tricky ;-). What makes it even worse is that I'd really like to be able to leverage what you guys do with text. Where if an ellipsis is shown, a mouse hover on the cell shows the value in a tooltip type control. I would love to show the image in that tooltip.
Thank you again for incredible support on this. :-)
Denis_Doiron said:I tried your simplified version. Works great but i prefer the first solution. Because the first one makes the image scale down vertically when the row height is shrinked but not horizontally. The second one simply doesn't scale at all. So i get a very small amount of vertical clipping when shrinking rows on the simplified solution.
Oh, that makes sense. I hadn't thought of that.
Denis_Doiron said: The ellipsis indeed seems trickier, not that the scalling wasn't tricky ;-). What makes it even worse is that I'd really like to be able to leverage what you guys do with text. Where if an ellipsis is shown, a mouse hover on the cell shows the value in a tooltip type control. I would love to show the image in that tooltip.
To do that, you would probably have to make the ImageUIElement less wide so you leave some extra space and then add an some other UIElement that you can use to respond to mouse clicks. You would have to create your own element, I think. Or maybe use the Infragistics UIElementViewer Utility to see what element the editor controls use for their ellipsis button and try to use that element. I'm not sure if that's possible, though, since that element might have dependencies that you don't have here.
I managed to do the tooltip part with very little trouble. I used http://devcenter.infragistics.com/Support/KnowledgeBaseArticle.Aspx?ArticleID=8644 as a starting point and used the CustomToolTipImage property. Since i only wanted to show images and no text I had to play a bit with the Title, ToolTipText and Font properties to basically only show " " as text and I set the font to a size of 0.5. That seems to work great for me soo far.
I briefly looked into the ellipsis and looked for that ellipsis button element you mentionned but have not found it. It seems like the ellipsis on the text cells is the same element as the one containing the text? I would prefer not using an image that contains an ellipsis unless a second image could be added at the end of the cell containing only the ellipsis and still have our icons showing as there own image. basically have two images on one cell instead of a modified image containing the ellipsis.
If you intend to show a tooltip on the ellipsis or haveit respond to a click in some way, then you are right, it's probably better to show the ellipsis as a second element - whether it be an ImageUIElement or whatever.
The ellipsis you see on text is probably just drawn as part of the text using the TextTrimming property. The GDI+ text rendering handles that automatically and that's part of the same drawing operation. That only applies to text, anyway, so tha's not what you want.
The ellipsis I was referring to is the one used by editors like UltraTextEditor. Put an UltraTextEditor control on a form and set ShowOverflowIndicator to true and then make the text longer than the control. It's not really an ellipsis, but it has a similar function. Like I said, I'm not sure how tightly tight that element is to the editors, so it might be easier for you to just use an ImageUIElement, but the OverflowIndicator might have some other useful functionality - so it might be worth looking into.