0

I have a Xamarin Forms ListView with a DataTemplateSelector, so that I can display different cell types (see the image link below). The reason for using a DataTemplateSelector basically was because of multiple subcomments as well as an Entry field for additional subcomments, that should be displayed under a main comment.

My problem: I would like to put a frame around a maincomment, its subcomments and the entry field as to indicate that these elements belong together. What would be the best way to do this? (see the right side of the linked image below).

Thanks for the help in advance!

Design example

Edit: Some code. This is my listview:

<ListView HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
                                x:Name="commentListView" HasUnevenRows="True" SeparatorVisibility="None"
                                ItemsSource="{Binding AllComments}"
                                ItemTemplate="{StaticResource MessageTemplateSelector}" >
</ListView>

This is my DataTemplateSelector:

public class CommentDataTemplateSelector : Xamarin.Forms.DataTemplateSelector
    {
        public CommentDataTemplateSelector()
        {
            this.parentDataTemplate = new DataTemplate(typeof(ParentCommentViewCell));
            this.childDataTemplate = new DataTemplate(typeof(ChildCommentViewCell));
            this.entryDataTemplate = new DataTemplate(typeof(EntryCommentViewCell));
            this.dateDataTemplate = new DataTemplate(typeof(DateCommentViewCell));
            this.separatorDataTemplate = new DataTemplate(typeof(SeparatorCommentViewCell));
        }
        private readonly DataTemplate dateDataTemplate;
        private readonly DataTemplate parentDataTemplate;
        private readonly DataTemplate childDataTemplate;
        private readonly DataTemplate entryDataTemplate;
        private readonly DataTemplate separatorDataTemplate;

        protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
        {
            var messageVM = item as CommentBaseViewModel;

            if (messageVM == null)
            {
                return null;
            }
            switch (messageVM.CommentType)
            {
                case CommentBaseTypeEnum.Child:
                    return this.childDataTemplate;
                case CommentBaseTypeEnum.Parent:
                    return this.parentDataTemplate;
                case CommentBaseTypeEnum.Entry:
                    return this.entryDataTemplate;
                case CommentBaseTypeEnum.Date:
                    return this.dateDataTemplate;
                case CommentBaseTypeEnum.Separator:
                    return this.separatorDataTemplate;
                default:
                    Debug.WriteLine("### Is there a Comment ViewCell missing?");
                    return null;
            }

        }
    }

As one can see, there are 5 different viewcells. Now when filling the ItemSource of the ListView above, I stack different types on each other like 1. Date 2. Parent 3. Multiple Childs 4. An Entry 5. A Separator

and then I start over.

What I want, is to have a single frame that spans the elements 1 to 4 and I don't know if and how I can do this as I have a multitude of different ViewCells.

Wolffi82
  • 47
  • 3
  • 7
  • 1
    there is literally an element called "Frame" – Jason Oct 02 '18 at 20:25
  • Thanks, I am aware of that. I updated my post hoping that this will make my problem more understandable. The question is, how I can span several ViewCells with one frame in one listview. – Wolffi82 Oct 02 '18 at 21:47
  • Ah, ok. I don't think there is an easy way to do that. You could try having A,B,C cells, where A has the "top" frame, B has the "side" frames, and C has the "bottom" frame. But I have no idea if that would look good visually. – Jason Oct 02 '18 at 21:54
  • Thanks. Any other idea on how to achieve a similar look? Maybe even by changing the complete structure in the list? – Wolffi82 Oct 02 '18 at 22:01
  • The easiest way to do this would most likely to be to group all items in a single cell. Probably not the answer you were hoping for but other than that probably you would end up writing a custom control and using native drawing tools to create the view (or use SkiaSharp). – SKall Oct 03 '18 at 00:16
  • Hm you mean a grouped listview? Or how else can I get all the information and elements inside a single viewcell? My main problem is the subcomments, which kind of lead to a nested listview. – Wolffi82 Oct 03 '18 at 05:18

0 Answers0