Binding to Xamarin Forms FlexLayout.Basis - xamarin.forms

Question

I have a page in my Xamarin.Forms application where I'm attempting to bind a relative size (25%, 50%, etc) to the basis of an item within a FlexLayout, but can't get it to work successfully.
My XAML:
...
<FlexLayout x:Name="Flex"
BindableLayout.ItemsSource="{Binding Path=SelectedSideBarItem.Items}"
AlignItems="Start"
JustifyContent="Start"
Direction="Row"
AlignContent="Start"
Wrap="Wrap">
<BindableLayout.ItemTemplate>
<DataTemplate>
<Button FlexLayout.Basis="{Binding ItemBasis}"
Title="{Binding Name}"/>
</DataTemplate>
</BindableLayout.ItemTemplate>
</FlexLayout>
...
I can't seem to find any examples, and the documentation doesn't seem to mention anything about binding to a Basis property from a view model. My initial attempt was attempting to bind a string to the to the FlexLayout.Basis. Like so:
...
private string _itemBasis;
public string ItemBasis
{
get => _itemBasis;
set
{
_itemBasis = value;
OnPropertyChanged(nameof(ItemBasis));
}
}
...
public void SetBasis()
{
ItemBasis = "25%"; // or any other percentage.
// Does not work!
}
...
The above doesn't work. It appears that the basis is never set, so the default is used.
I should note that binding to a basis does works when using an absolute size (250, 500, etc) (i.e. it's not an issue with my bindings). Like so:
...
private int_itemBasis;
public int ItemBasis
{
get => _itemBasis;
set
{
_itemBasis = value;
OnPropertyChanged(nameof(ItemBasis));
}
}
...
public void SetBasis()
{
ItemBasis = 250; // or any other absolute value.
// Works!
}
...
Any guidance would be appreciate.
Thanks!

Answer 1

The type for the Basis property is FlexBasis
https://github.com/xamarin/Xamarin.Forms/blob/bd31e1e9fc8b2f9ad94cc99e0c7ab058174821f3/Xamarin.Forms.Core/FlexEnums.cs#L58
If you bind it to a string is not going to work (unless using a converter).
Try to modify your bindable property to FlexBasis and assign the value like this:
ItemBasis = new FlexBasis(.5f, true);
The first parameter is the length, the second is the "relative" flag. Setting it to true means that you are using a percentage value.

Answer 2

XAML TypeConverters are not called when a value is set via binding, so the default FlexBasis TypeConverter is not applied when you try to bind the string "25%".
Fortunately the FlexBasisTypeConverter class is public so you can use it in your own converter class like so:
public class StringToFlexBasisConverter: IValueConverter
{
private readonly FlexBasis.FlexBasisTypeConverter _converter = new FlexBasis.FlexBasisTypeConverter();
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
if (value is string stringValue)
{
return _converter.ConvertFromInvariantString(stringValue);
}
return new FlexBasis();
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}