在 Xamarin.Forms 上绑定网格列宽

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 GrindLength :

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>