Creating custom Horizontal scroll list

I am trying to create horizontal scroll list. Multiple forums recommended writing a custom renderer since there does not exists one. My final output is something like this.

Each element in the scroll list is within a grid. The elements cannot be selected by tapping on them like listview.** Anything between the lines is selected**. So the structure of layout would be something like this to give you a rough idea

HorizontalViewList
    StackLayout
        Grid1
            item1
        Grid2
            item2

To mark an element selected I basically take the x,y coordinates of the element and match it with the x,y coordinate of the two line. Currently I was only taking one case which is when the element x,y is less than the x,y of the line (I know there are other possibilities, but I wanted to get one thing working). My problem is I am not able to get the x,y coordinates of the grid (which is inside the scroll list) wrt to the screen.

Here is my code of the above logic

                protected void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
                {
                    if (this.cList != null) 
                    {
                        var stackLayoutChild = this.cList.Content as StackLayout;

                        if (stackLayoutChild != null) 
                        {
                            int childCount = 0;
                            foreach (Grid child in stackLayoutChild.Children) 
                            {
                                var positionXStart = child.X;
                                var positionXEnd = child.X + child.Width;
                                var gridChild = child.Children [0] as Label;

                                if (positionXStart > selectionBoundXStart && positionXEnd < selectionBoundXEnd) 
                                {
                                    this.cList.SelectedItemIndex = childCount;

                                                        System.Diagnostics.Debug.WriteLine ("Selected item is " + gridChild.Text);
                                                        break;
                                                                      }
                                                    ++childCount;
                            }
                        }
                    }
                }

The code to detect selectionBoundXStart and selectionBoundXEnd is something like this during the Draw of the ScrollViewRenderer
selectionBoundXStart = this.GetX () + mid oint - 30;
selectionBoundXEnd = this.GetX () + midpoint + 30;

I am new to mobile development in general. Here are some questions
1. What are X, Y that are properties of grid? Are they wrt to screen or layout?
2. What are the GetX and GetY functions on the ScrollViewRenderer. I tried even GetLocationInWindow. The coordinates matched with GetX and GetY
3. Is there an easier way to achieve this? It is quite possible I am going the wrong route of writing my own renderer.