Hi,
I need to create some buttons in my Grid. Each button needs to display two lines of text... the top line needs to be displayed in Bold whereas the bottom line needs to be in a normal plain font. I'm thinking I'll need to create a new button control from scratch and embed it into the Grid. Could you suggest the best way to approach this problem. I like the look of the PopupSoftBorderless UltraButton, could I customise this in some way to use both font styles at once?
Many Thanks
Andy
Hi Andy,
There's currently no way to embed an UltraButton in a grid cell. You could position the control over the cell, and I think there's a sample of this somewhere in the Infragistics Knowledge Base.
But I suspect you want the button to show up in more than one place, which means you would have to have a different button for every cell. I suspect that's not a feasible solution, because moving all those buttons around will almost certainly have performance implications for you app.
What I recommend is that you simply set the Style on the column(s) to Button. Then you use a CreationFilter to add a couple of TextUIElements to each button. You'll need to be able to pick up the text of the button from some value in the grid cell or row.
Setting the column Style to Button and adding TextUIElements displays the text in the format I require, but it's led to a secondary problem. Normally if I hold down the mouse button anywhere in the button cell the button moves to a pressed state, but now it's got two child TextUIElements this doesn't seem to work properly. The rectangles containing the TextUIElements seem to prevent the mouse events reaching the underlying button, so the only way to get a pressed state is to click on the edge of the button (away from the Text). Is there an easy way to stop the TextUIElements consuming the mouse events? As I wish to use a Popup button style, the button cell needs to receive MouseUp, MouseDown, MouseMove etc so that the popup button is drawn correctly based on the position of the mouse.
Thanks
Hi Andy,Hm, that's odd. I didn't realize the text elements would interfere with the mouse messages. Are you sure you are placing the text element inside the CellButtonUIElement? It sounds to me like you might be putting the text elements into the CellUIElement so that they are siblings to the CellButtonUIElement instead of children of it.
You're right that I was putting the text elements into the CellUIElement, because I found if I added them as a child of the CellButtonUIElement, they weren't displayed att all (although in that case, the button did work correctly).
Here's a copy of that code - let me know if you spot anything I've done wrong, that might explain why the text wasn't displayed.
class CF : IUIElementCreationFilter
{
public void AfterCreateChildElements(UIElement parent)
CellUIElement cellElement = parent as CellUIElement;
if (cellElement != null && cellElement.Column.Key == "Button")
CellButtonUIElement buttonElement = cellElement.GetDescendant(typeof(CellButtonUIElement)) as CellButtonUIElement;
if (buttonElement != null)
TextUIElement textElement1 = new TextUIElement(buttonElement, "One");
TextUIElement textElement2 = new TextUIElement(buttonElement, "Two");
Rectangle rect = buttonElement.RectInsideBorders;
textElement1.Rect =
new Rectangle(rect.X, rect.Y + 10, rect.Width, 20);
textElement2.Rect =
new Rectangle(rect.X, rect.Y + 30, rect.Width, 20);
buttonElement.ChildElements.Add(textElement1);
buttonElement.ChildElements.Add(textElement2);
}
public bool BeforeCreateChildElements(UIElement parent)
return false;
I can't see anything obviously wrong with this code. Perhaps the rect you are specifying is outside the bounds of the button for some reason.
You should get the Infragistics UIElementViewer Utility. Then you can run your application and see what elements are contained within the ButtonUIElement and their rects and that should tell you why they are not visible.
When I use that viewer I can see that my TextUIElements are not anywhere in the hierarchy if I try to add them as a child of the CellButtonUIElement.
I've looked at the Infragistics source code and I think I can see why.... if you look at CellButtonUIElement.cs PositionChildElements( ), the code appears to retain the existing this.ChildElements into a variable called 'oldElements' and then proceeds to copy (or rebuild) just the child image element and DependentTextUIElement element across into a new ChildElements variable. It ends with the code...
// clear the remaining elements (that weren't transferred in the new list)
oldElements.Clear();
... which I imagine destroys the children I added during the CreationFilters AfterCreateChildElements( )
Does that make sense?
Is there a way to prevent this from occurring?
By the way - I don't really want the button to display it's own text as I wish to format both TextUIElements myself. If this PositionChildElements() method is going to keep recreating the button's DependantTextUIElement, is there a way to adjust this DependentTextUIElement before it's displayed. I'm guessing I need a DrawFilter, but which phase should I be intercepting?
I don't think that's the problem. The CreationFilter's AfterCreateChildElements fires after the PositionChildElements method has completed. If the control is clearing the UIElement after that, then that would be a bug, but I don't see how that could be happening.
Since you don't want the DependentTextUIElement, you have 2 options. The first would be to handle BeforeCreateChildElement for the CellButtonUIElement and Cancel it, then add your two TextUIElements there instead of in the After.
The other would be to just keep using the After and remove the DependentTextUIElement or Clear the ChildElements collection before you add the two new TextUIElements.