How would I produce a Cell View that Looks like the Image below

JamesMallon

Hi all,

I was wondering if it's possible in Xamarin Forms to produce a layout like that seen in this image?

I'm mostly referring to the listview of images and text. This is as far as I have got at the moment..

  class CustomJobCell : ViewCell
    {
      public CustomJobCell()
        {
            //instantiate each of our views
            var image = new Image();
            var JobTitle = new Label();
            var Salary = new Label();
            var Location = new Label();
            var verticaLayout = new StackLayout();
            var horizontalLayout = new StackLayout() { BackgroundColor = Color.White };

            //set bindings
            JobTitle.SetBinding(Label.TextProperty, new Binding("Name"));
            Salary.SetBinding(Label.TextProperty, new Binding("Salary"));
            Location.SetBinding(Label.TextProperty, new Binding("Location"));
            image.SetBinding(Image.SourceProperty, new Binding("Image"));

            //Set properties for desired design
            horizontalLayout.Orientation = StackOrientation.Horizontal;
            horizontalLayout.HorizontalOptions = LayoutOptions.Fill;
            verticaLayout.HorizontalOptions = LayoutOptions.FillAndExpand;
            verticaLayout.VerticalOptions = LayoutOptions.FillAndExpand;
            verticaLayout.Padding = new Thickness(20);
            image.Aspect = Aspect.AspectFit;
            image.
            JobTitle.FontSize = 24;

            //add views to the view hierarchy
            verticaLayout.Children.Add(image);
            verticaLayout.Children.Add(JobTitle);
            verticaLayout.Children.Add(Salary);
            verticaLayout.Children.Add(Location);
            horizontalLayout.Children.Add(verticaLayout);

            // add to parent view
            View = horizontalLayout;
        }
    }

Now I will show you the image of what I have achieved so far..:

The way this is set up is that this is a list view and within the listview there are CustomCell objects for each cell. My problem is that I need the image to be held in some sort of frame so that it doesn't push the text outside of the cell view.

I would then need to display the two labels underneath it. I feel like I'm close but I couldn't find any extra information.

Sorry for bothering you!

J