I am trying to create a "conversation control" that can show a running list of entries, much like the IM application on many smartphones. To do this, I was thinking about using a WinGrid and then merging cells together to get the overlap look that is prevalent with other UIs that do this sort of thing.
I started by trying to merge cells and shown in this example (http://forums.infragistics.com/forums/p/34712/206196.aspx#206196), but was unsuccessful.
Does anyone know of a way to mimic the overlapping "text bubbles" look prevalent in many IM apps? Does Infragistics have a control that would be easily adaptable to this?
Hi,
I'm not sure I know exactly what you are trying to do. Different IM applications display in different ways. Can you post a screen shot of what you are trying to acheive?
Mike,
Thanks for your reply. I am trying to achieve a look like that shown in this attached image. I am trying to find a control that will allow for these "overlapping" bubbles to denote that the user has changed in a conversational stream. My first thought was to use an UltraGrid and use a different Row Layout for each row to allow for the overlapping (merged) cells. I tried the example with Row Layouts that you gave in the link in my prior post, but couldn't make that work. I was going to get the cell overlap to work and then use the RichText Editor example to put some nicely formatted cell contents together.
Can you think of a better way to accomplish this?
Thanks,
Keith
Hello,
In order to format the text in the cell, you should set FormmatedText for Style property of the column, which should display formatted text. Then you could use a template for the text in order to build your text. For coloring of the cell, you could use InitializeRow event of the grid in order to set appearance of the cell based on its value. I have modify the sample in order to demonstrate my idea. Please feel free to modified the sample based on your custom needs.
Please let me know if you have any further questions.
This is excellent and I appreciate your showing me the FormattedText functionality. I knew there had to be something more lightweight than forcing the rich text format (rtf) editor into the cells to accomplish this.
This fits the bill perfectly. Thanks again!
Regards,
Hristo,
One more question. I have changed the format line to the following:
string TText = "<p><span style=\"float:left;clear:left;font-weight:bold;\">{0}</span> <span style=\"float:right;font-weight:bold;\">{1}</span></p> <p><span style=\"float:left;clear:left;\">{2}</span></p>";
This gives me the left/right alignment that I am looking for. I have one more question for you. I am trying to change the height of each row automatically based on the content of each cell. To do this, I am running this line:
e.Row.PerformAutoSize();
at the end of the InitializeRow method. This actually makes the cells too small. The attached picture shows that the cells are too small. Note that I manually adjusted the height of the first cell to make it look the way I want the height to look. Is there a way to automatically adjust the cell height based on the contained text?
Using this approach, auto resize of the rows shouldn’t work, because after UltraGrid resizes its rows properly, we are narrowing the cells (trough Creation Filter ) in order to get the gap, between cells. That’s why your last text row is covering. But you could try to add one empty row in your template text (“ <br/>”) and grid should consider this when it is resizing its rows.
Thank you for using Infragistics components.
Hristo and Mike,
I have taken your samples and put them together in a control with a sample form in the attached project. The control allows you to add a message with a date, user, fore and back color, and alignment
This will work well for my project. There are a few minor details that I need to complete and if you have a quick idea, that would be great.
1. The cell padding isn't exactly correct. I added a newline in the format string, but that makes too much space after the text in each cell. I took it out and tried increasing the cell padding, but that didn't work as the text was still cut off. You can see in the attached sample that using the newline in the format string works pretty well, but there is still too much space on the smaller messages and too little space on the long messages.
2. I need to make the cells "non-selectable". Right now, the back of the row turns blue when clicking on a cell. I don't want that. I just want the grid to be in display mode only.
3. The first cell always has white text, I think because it is selected. I need to correct this.
4. It would be nice to have the cells support multiline, but I wonder if I'm going to have to parse my input strings and format them with <p>.
Thanks for all of your help!!!
Here is the images of the example showing the problem:
Thanks again for your help with this. I have been able to reproduce this in the attached example. I just took the prior example and added filter code to make this happen. I docked the grid in the form so that when you resize the form, the cells are resized as well. The problem here is that the text is slightly truncated on the right side when the cells are resized. It is more pronounced in my app, but you can definitely see what I am talking about with this example. Do you have any suggestions as to how I might be able to avoid this truncation problem?
Hello ,
I am not able to reproduce this issue on my end with the latest sample which I have posted. And the strange thing that I have noticed is that the header is not trunked, so is it possible to post a small sample where this is reproducible and I will look into it.
First, thanks again for your help.
There is one nagging issue that I can't seem to solve and that is the problem of text being truncated. As you can see on the picture below, text is being cut off in some situations. I have tried editing the CellPadding, CellSpacing, and TextTrimming parameters, but no amount of tweaking to these parameters seems to help. Also, I have gone into the draw filter and removed the rounding on the edges of the cells to just draw a squared-off rectangle and that didn't help either.
This problem can be seen in the latest example project that is attached in this thread. Is there some special way to correct the truncation, or is this a limitation when using a FormattedText cell style?
Thanks again,
Using the min row height worked. I think that has the control in good shape. Thanks for all of your help!