Forums | NoesisGUI

Hi,
I am looking for a way to implement a chat layout like iMessages or any other popular messaging app.
This includes functionality like:
1: Direction/Colour of text based on who the viewer is and who the text is coming from
2: Speech Bubbles enclosing the message context starting from the side/direction they are supposed to
3: Possibly embedding/attaching a picture in the message
4: Time stamps
5: Context menu to delete/edit etc message when you tap and hold a message
6: Animations for message receive/send (the speech bubble can fade in or grow inside the layout)
7: Inertial scrolling with rubber-banding effect

How can I achieve all of this?

Hi,

We have a chat demo in the Showcase you can use as start point.

About the questions you made, Data Binding is the key here:

1. Each chat message will correspond to a Message data item with the Direction, Color, etc. properties correctly set. The DataTemplate associated with the item, will use that properties to correctly display each message.

2. As pointed before, you should provide the direction from the message item, and apply the corresponding bubble geometry.

3. The same as above, you can provide an ImageSource property in your data that can be bound from the DataTemplate.

4. IDEM.

5. I assume you want to use this in a touch device. You have to add handlers to the TouchDown, TouchUp and TouchMove to determine when the user is being holding the finger over a message. Then you can show a ContextMenu by setting its IsOpen property (I didn't try this but I think it should work).

6. You can launch animations in response to an event (directly from the xaml by using EventTriggers), or from the code (calling storyboard.Begin()). Fade animations are easily done animating the Opacity property, and you can animate a ScaleTransform in the LayoutTransform(affects layout)/RenderTansform to grow messages.

7. Inertia is already implemented when scrolling a list with PanningMode set (take a look at the Touch sample in our package). The rubber-banding effect is not implemented, but you could probably implement it on top of Touch events.