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's for the quick reply
I've tried the code you posted but it doesn't seem to do anything at all? I stepped through the code and the creation filter does get hit but the image still shrinks to fit the cell. Maybe I missed something? I tried feeding different sizes to the new rectangle you are creating to see the impact it would have on the cell image, again nothing seemed to change at all.
Are you setting the Image on the cell? Or are you using ImageBackground (or BackgroundImage, I always forget which way it is)?
Are you cells using a different editor like maybe you are using masking or a combo?
aUGRow.Cells["flags"].Value = GetCombinedImage(wSignatureNeeded); //GetCombinedImage returns a Bitmap.
The flag column is configured as follows:
column.DataType = typeof(Bitmap);
column.CellAppearance.ImageVAlign = Infragistics.Win.VAlign.Middle;
column.FilterEvaluationTrigger = FilterEvaluationTrigger.OnEnterKey;
column.FilterOperatorDropDownItems = FilterOperatorDropDownItems.Equals | FilterOperatorDropDownItems.Contains | FilterOperatorDropDownItems.DoesNotContain;
column.SortComparer = new FlagComparer();
column.GroupByEvaluator = new FlagEvaluator();
Okay, I misunderstood the situation. I assumed this was a column with an image and text in it. But it appears that you are creating a dedicated column just for the images and using the cell Value as the image, rather than applying an image to a cell via the Appearance. So the CreationFilter would need to be changed around a bit.
Since this is an image column and not a text column, you need to look for a parent element that is an EmbeddableImageRendererUIElement, instead of EditorWithTextUIElement.
So just change:
if (parent is EditorWithTextUIElement)
to
if (parent is EmbeddableImageRendererUIElement)
And I think everything else will work the same.
The above didnt work for me, if column datatype at datasource level is of type image.
if (parent is ImageUIElement)
{
ImageUIElement ImageUIElement =
parent.GetDescendant(typeof(ImageUIElement)) as ImageUIElement;
if(ImageUIElement != null)
ImageUIElement.Scaled = false;
}
Also note: if you want editor in image column , then dont set column style = image, instead set datasource column datatype as image
,otherwise it makes readonly
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.
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.
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 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. :-)