Binding Grid Column Width on Xamarin.Forms - xaml

Question

I'm attempting to build a 3 column status bar with the Grid control in Xamarin.Forms. I receive 3 values: open, pending and filled. I would like the column width to be bound to those values. However, the column widths remain equal.
Current Look:
Desired Look:
This is achieved by replacing the bindings in the Column Width with 3*, 0*, and 2* respectively.
XAML
<Frame HorizontalOptions="FillAndExpand" CornerRadius="10" HasShadow="False" Padding="0" IsClippedToBounds="True">
<Grid ColumnSpacing="0" HorizontalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="25" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{Binding Filled, StringFormat='{0:N}*'}" />
<ColumnDefinition Width="{Binding Pending, StringFormat='{0:N}*'}" />
<ColumnDefinition Width="{Binding Open, StringFormat='{0:N}*'}" />
</Grid.ColumnDefinitions>
<BoxView Grid.Column="0" Color="#5cb85c" />
<Label Grid.Column="0" Text="{Binding Filled}" TextColor="White" HorizontalOptions="Center" VerticalOptions="Center" />
<BoxView Grid.Column="1" Color="#f0ad4e" />
<Label Grid.Column="1" Text="{Binding Pending}" TextColor="White" HorizontalOptions="Center" VerticalOptions="Center" />
<BoxView Grid.Column="2" Color="#d43f3a" />
<Label Grid.Column="2" Text="{Binding Open}" TextColor="White" HorizontalOptions="Center" VerticalOptions="Center" />
</Grid>
</Frame>
UPDATE:
I updated my code with your suggestion. The issue is that the converter is not fired. I do not get an error and the breakpoint in the converter is never reached. I added "Source={x:Reference listView}" as I've seen some SO answers suggest it. However, it doesn't help. I also tried to add a basic double to string converter to the label and it doesn't execute either.
XAML:
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:conv="clr-namespace:MyApp.Converters" x:Class="MyApp.Views.OrgDash.PositionsPage" Title="Positions">
<ContentPage.Resources>
<ResourceDictionary>
<conv:NumberToGridLengthConverter x:Key="numberToGridLengthConverter" />
</ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
<AbsoluteLayout x:Name="absLayout" VerticalOptions="FillAndExpand">
<ListView x:Name="listView" HasUnevenRows="true" ItemTapped="OnItemTapped" HeightRequest="{Binding Path=Height, Source={x:Reference absLayout}}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Padding="10,10,10,10" Orientation="Vertical">
<StackLayout HorizontalOptions="StartAndExpand" Orientation="Horizontal">
<Label Text="{Binding Name}" VerticalTextAlignment="Center" FontAttributes="Bold" />
</StackLayout>
<Frame HorizontalOptions="FillAndExpand" CornerRadius="10" HasShadow="False" Padding="0" IsClippedToBounds="True">
<Grid ColumnSpacing="0" HorizontalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="25" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{Binding Filled, Source={x:Reference listView}, Converter={StaticResource numberToGridLengthConverter}}" />
<ColumnDefinition Width="{Binding Pending, Source={x:Reference listView}, Converter={StaticResource numberToGridLengthConverter}}" />
<ColumnDefinition Width="{Binding Open, Source={x:Reference listView}, Converter={StaticResource numberToGridLengthConverter}}" />
</Grid.ColumnDefinitions>
<BoxView Grid.Column="0" Color="#5cb85c" />
<Label Grid.Column="0" Text="{Binding Filled" TextColor="White" HorizontalOptions="Center" VerticalOptions="Center" />
<BoxView Grid.Column="1" Color="#f0ad4e" />
<Label Grid.Column="1" Text="{Binding Pending}" TextColor="White" HorizontalOptions="Center" VerticalOptions="Center" />
<BoxView Grid.Column="2" Color="#d43f3a" />
<Label Grid.Column="2" Text="{Binding Open}" TextColor="White" HorizontalOptions="Center" VerticalOptions="Center" />
</Grid>
</Frame>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ContentView x:Name="overlay" AbsoluteLayout.LayoutBounds="0, 0, 1, 1" AbsoluteLayout.LayoutFlags="All" IsVisible="True" BackgroundColor="#C0808080" Padding="10, 0">
<ActivityIndicator WidthRequest="110" HeightRequest="70" IsRunning="True" IsVisible="True" Color="Black" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
</ContentView>
</AbsoluteLayout>
</ContentPage.Content>
</ContentPage>
Converter Class:
using System;
using System.Globalization;
using Xamarin.Forms;
namespace MyApp.Converters
{
public class NumberToGridLengthConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
var numberValue = (double)value;
return new GridLength(numberValue, GridUnitType.Star);
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
var gridLength = (GridLength)value;
return gridLength.Value;
}
}
}

Answer 1

I guess that your binding will cause binding error and you will see in Debug window something like this:
[0:] Binding: '3.00*' can not be converted to type 'Xamarin.Forms.GridLength'.
[0:] Binding: '0.00*' can not be converted to type 'Xamarin.Forms.GridLength'.
[0:] Binding: '2.00*' can not be converted to type 'Xamarin.Forms.GridLength'.
I would use a custom converter to convert number value to GridLength:
public class NumberToGridLengthConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
var numberValue = (double)value;
return new GridLength(numberValue, GridUnitType.Star);
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
var gridLength = (GridLength)value;
return gridLength.Value;
}
}
Xaml:
<ContentPage.Resources>
<ResourceDictionary>
<conv:NumberToGridLengthConverter x:Key="numberToGridLengthConverter" />
</ResourceDictionary>
</ContentPage.Resources>
...
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{Binding Filled, Converter={StaticResource numberToGridLengthConverter}}" />
<ColumnDefinition Width="{Binding Pending, Converter={StaticResource numberToGridLengthConverter}}" />
<ColumnDefinition Width="{Binding Open, Converter={StaticResource numberToGridLengthConverter}}" />
</Grid.ColumnDefinitions>