BringIntoView on RadConversationView

[Gary]

Hello,

I have been trying out the RadConversationView, specifically, using the sample code from the "Telerik Design Templates" solution which can be download from here:

http://www.telerik.com/windows-phone/design-templates

I am trying to make it so that the last message entered into the RadTextBox is always shown in the RadConversationView.  I found a couple of forum posts that indicate that this should be possible using the BringToView method:

http://www.telerik.com/forums/scroll-to-element

http://www.telerik.com/forums/how-can-i-scroll-to-conversation-view-bottom-on-load

However, I have been unable to get this to work.

Ideally, this method would need to be called both on initial page load, and whenever a new message is added.

Would it be possible for someone to show me the code, specifically for the sample application, to make this happen?

Thanks!

Gary

[Lance | Manager Technical Support]

Hello Gary,

You can use BringIntoView(), which accepts an object that is in the list. In the case of the RadConversationView, the objects are of type ConversationViewMessage. (BringIntoView is a method available on RadDataBoundListBox as well)

I have attached a sample app for you.

Run the app, and keep clicking the add button. You'll see the numbered message entries being added to the RadConversationView and the messages will stay at the bottom.

The approach is straightforward, you shouldn't even need to open the sample app as the code is simple. Here is what I do to add a message to the collection that is bound to the RadConversationView

private async Task AddMessage()
{
        var entry = messageCounter % 2 == 0
            ? new ConversationViewMessage("Outgoing: Message #" + messageCounter, DateTime.Now, ConversationViewMessageType.Outgoing)
            : new ConversationViewMessage("Incoming: Message #" + messageCounter, DateTime.Now, ConversationViewMessageType.Incoming);

        mainViewModel.Messages.Add(entry);

        //This is how to use BringIntoView. You pass in an actual object in the list.
        MyConversationView.BringIntoView(entry);

        messageCounter++;
}

If you are still having trouble, please show us the code you are using.

Regards,
Lance | Tech Support Engineer, Sr.
Telerik

[Gary]

Hello Lance,

Thanks for getting back to me so quickly!

Your sample works exactly as expected, and when I try to make your sample more like mine, i.e. adding in the use of:

* A custom implementation of the ConversationViewMessage

* Using the MvvmLight Message Dispatcher to communicate between the ViewModel and View when a new message is added

* Use of a custom Message Item and Group Template Selector (as per the Design Guidance examples)

It all continues to work. So at the minute, I have no idea why the current implementation in our full application isn't working correctly.

I will need to do some more digging, and I will report back if I find anything.

Thanks again!

Gary

[Gary]

Hello,

Ok, I have figured out what the issue is.

In the Telerik Design Templates solution, we started out using the "Messaging Page 02" sample, which groups messages together based on existing within a specified group.  It does this by implementing the IComparable interface.  The implementation of this interface works great, when trying to decide if one message is within the same group as the last, however, due to the overriding of the Equals method, the call to BringIntoView then no longer works, because it no longer finds the message in the collection in order to bring it into view.

Does that make sense?

Any thoughts on the best course of action to proceed?

Also, shouldn't bringing the last message in a Conversation View into view be the default action for this control? Seems like for most applications of the RadConversationView you would want to see the last message that was added.

Thanks

Gary

[Ves]

Hi Gary,

Let me try to summarize it: BringIntoView will not work because of the IComparable implementation. And IComparable implementation is needed because of the grouping. So, in this case, I would suggest changing a bit the grouping, so that the custom message object does not implement IComparable itself. Instead, it can hold a reference to another object, which implements IComparable and this object is used to group. In terms of DesignTemplatesShowcase this means, that the Group property of CustomMessage class should be of another type (e.g. MyGroup : IComparable instead of int?). Then you will need to update the SetGroupDescriptors method e.g.

private void SetGroupDescriptors()
       {
           this.conversationView.GroupDescriptors = new DataDescriptor[]
           {
               new GenericGroupDescriptor<CustomMessage, MyGroup>(message => message.Group)
           };
       }

You will also need to take care of couple of other places in the code where Group property is used.


Best regards,
Ves
Telerik

[Gary]

Would it be possible for you to provide a complete sample of what you describe?

I have tried to implement what you suggest, however, I am running into some issues with the MessageGroupTemplateSelector.  The first message in the group never appears, but subsequent messages in the same group do appear.

It would be great if you could extend the Design Templates in your GitHub Repo to explain how to achieve this.

Thanks

Gary

[Ves]

Hi Gary,

Please, find attached ConversationView02.xaml along with MessagesViewModel with the updates needed to bring the last message into view after initial load.

Best regards,
Ves
Telerik

[Gary]

Hello Ves,

Thanks for taking the time to reply.

I have had a look at the files that you have included, and replaced them into the solution, however, I am still facing issues.

When I run the sample, I get an exception shown in the attachment. 

This is what I mentioned before.  The Key is now null, therefore the cast to CustomMessage fails.

Were there any other files that were changed in order to get this to work?

Thanks

Gary

[Ves]

Hi Gary,

Please, accept my apologies for this. I have failed to include one more updated file  - MessageGroupTemplateSelectors.cs in the Helpers folder, exactly as you have found.

For the sake of completeness, I have attached 3 zip files, containing all the files you need to update in order to get the project to build and run - Helpers, ViewModels and Conversations.

Best regards,
Ves
Telerik

[Gary]

Hello Ves,

Thanks again for getting back to me.

I have implemented the changes that you provided, and I can see that it is closer, but unfortunately, it is still not working as expected.

The MessageGroupTemplateSelector is now never getting called, or rather, more specifically the Template for the GroupSelector is never getting called.  As a result, the first message in the collection is not showing the "photo" of the user.

Please see the attached files, showing the difference between the two.

Can you make any suggestions about how to proceed?

[Ves]

Hi Gary,

This is caused by the fact that changing the GroupDescriptor we change the structure of the underlying objects, so we need to update some paths in XAML as well as some checks in the code. I have attached the updated files with this issue fixed. Do let me know if further issues arise.

Best regards,
Ves
Telerik

[Gary]

Hello Ves,

Would it be possible to confirm that I am doing the right thing in terms of applying the changes that you are making?  I am taking the source code which can be found here:

https://github.com/telerik/WindowsPhone8-SDK

Copying/pasting your changes into the respective places, and then running the application.

Is this also what you are doing?

If so, I don't understand how I am getting the following result (as seen in the attachment).

From stepping through the source code, it looks like the MessageGroupTemplateSelector is now currently working as expected, however, the Message​ItemTemplateSelector is also getting called, and based on the conditions in that file, it is returning the EmptyDataItemTemplate, which then results in the gap that you can see in the screenshot.

Did you make any other changes to other files?

Thanks

Gary

[Ves]

Hi Gary,

The calls to MessageItemTemplateSelector.SelectTemplate are expected and it seems to work fine. It is more likely that MessageGroupTemplateSelector does not return the correct results. I have attached the entire solution (bin, obj and images folders stripped), so you can paste it directly over your exiting folder and it should work as expected.

Best regards,
Ves
Telerik

[Gary]

Hello Ves,

Ok, using the entire sample that you have provided now at least works for the initial loading of the messages into the view.  Looks like the ConversationView02.xaml file that you originally uploaded didn't include some of the additional changes that you made, namely, switching things like:

Background="{Binding Key.MessageBackground}" >

to

Background="{Binding Items[0].MessageBackground}" >

However, it looks like there is still an issue :-(

If I try to add a new message into the application, there is an exception thrown.  I have been able to correct this exception by changing:

if (currentGroup != null && (currentGroup.Items.ElementAt(0) as CustomMessage).Type == ConversationViewMessageType.Incoming) 

to

if (currentGroup != null && currentGroup.Items.Count() != 0 && (currentGroup.Items.ElementAt(0) as CustomMessage).Type == ConversationViewMessageType.Incoming)

Which gets past this initial exception error message, however, once the message is actually added into the Conversation View we are back to the same issue as before.  Please see the screenshot attached to this reply.  As you will see, the initial message in the group doesn't show correctly, but subsequent ones do.

Can you provide any guidance on how to proceed?

Thanks

Gary

[Ves]

Hi Gary,

This is caused by some specifics in the code of the control. In order to avoid this we can choose a different approach which does not suffer the issue you have described. Here are the changes:

 - MessageGroupTemplateSelector is not used in this example anymore. Groups are always empty, this is ensured by removing the MessageGroupTemplateSelector and setting an empty DataTemplate to the  GroupHeaderTemplate property of RadConversationView.

 - MessageItemTemplateSelector gets two new properties -- IncomingTemplateWithImage and OutgoingTemplateWithImage. Here is the idea: instead of placing the first message in the header item, we will use an empty header item and a separate template with an image. The next messages will use a similar template without image. You might want to optimize this by extracting the similar parts into separate resources to avoid code repetition.

Please, find attached an updated version of the example. Again, I have attached the entire solution with bin, obj and images folders stripped.

Best regards,
Ves
Telerik