How to adjust a label and icon at the same height

Hello,

I'm new to Xamarin.Forms and have been struggling to create a grid where there's a header for each column of the grid that is basically the title and an icon to order by the title ASC or DESC. I have tried many configurations but still can't really figure it out. Each of my title has a weight also. What I have tried is create the row titles with a stack layout in each column, so it is a horizontal stacklayout for each title and icon pair. Also, what I tried is creating a grid of a unique row with two columns, one for the title and one for the icon, for each column of the main grid, but still haven't worked it out too well.

I want my Icons to be squared and to all have the same size, that's why I use label size changed to adjust the scale of the icons. Also, I use SVG Icons if that has something to do since I noticed the Icons have like a top and bot padding.

My best approach so far has been this one:

Main grid:

Xamarin.Forms.Grid oRes = new Xamarin.Forms.Grid() { HorizontalOptions = new LayoutOptions(LayoutAlignment.Fill, true), VerticalOptions = new LayoutOptions(LayoutAlignment.Start, false), ColumnSpacing = GetColumnsSpace(), BackgroundColor = GetScreenBackgroundColor() };

First row of titles:

oRes.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Auto) });

And for each title, stacklayout approach:

`oRes.ColumnDefinitions.Add(new ColumnDefinition
{
Width = new GridLength(t.Weight, GridUnitType.Star)
});

lbl.VerticalOptions = new LayoutOptions(LayoutAlignment.Center, false);
lbl.HorizontalOptions = new LayoutOptions(LayoutAlignment.Start, false);

icon creation:

Icon icon = new Icon()
{
ResourceId = StyleManager.Vect_GridSortable,
HorizontalOptions = LayoutOptions.Center,
Margin = new Thickness(0),
Padding = new Thickness(0),
Source = Icon.eSourceType.EMBEDDED,
HeightRequest = lbl.Height
};

lbl.SizeChanged += (obj, eventArgs) => {
icon.HeightRequest = lbl.Height;
icon.WidthRequest = lbl.Height;
};

icon.SizeChanged += (obj, eventArgs) =>
{
icon.Scale = lbl.Height / icon.Height;
};

StackLayout sl = new StackLayout()
{
Orientation = StackOrientation.Horizontal,
HorizontalOptions = new LayoutOptions(LayoutAlignment.Center, false),
VerticalOptions = new LayoutOptions(LayoutAlignment.Start, false),
Spacing = 0,
Children = { lbl, icon }
};

Add column to the main grid...
`

This would be my grid approach

Xamarin.Forms.Grid gfill = new Xamarin.Forms.Grid(); gfill.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Auto }); gfill.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Auto }); gfill.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto }); gfill.Children.Add(lbl, 0, 0); gfill.Children.Add(icon, 1, 0);

I would really appreciate some help on this because I've been stuck for days with this.

Also, this is my Icon implementation:

public Icon() { Padding = new Thickness(0); Margin = new Thickness(0); // Thanks to TheMax for pointing out that on mobile, the icon will have a shadow by default. // Also it has a white background, which we might not want. //HasShadow = false; BackgroundColor = Color.Transparent; HorizontalOptions = new LayoutOptions(LayoutAlignment.Fill, true); VerticalOptions = new LayoutOptions(LayoutAlignment.Fill, true); Children.Add(_canvasView); _canvasView.PaintSurface += CanvasViewOnPaintSurface; _canvasView.HorizontalOptions = new LayoutOptions(LayoutAlignment.Fill, true); _canvasView.VerticalOptions = new LayoutOptions(LayoutAlignment.Fill, true); _canvasView.Margin = new Thickness(0); Source = SetSourceAuto(); }

Thanks for your help guys.