0
votes

I have a ListView with HasUnevenRows set to "true". Within the ListView.ItemTemplate I have a grid for which I'd like to dynamically set the ColumnDefinition Width to the Height of the ListView item. The end goal is to get a grid cell that is a perfect square regardless of Platform and ListView row content.

Is there a way for me to get the current value of the ListView item's row and set it in the ColumnDefinition in the ListView.ItemTemplate? Is this something I can do without the use of a custom renderer?

Here's a mock-up XAML representing what I'd like to achieve:

<ListView HasUnevenRows="True">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>

                <Grid>
                    <Grid.ColumnDefinitions Width=" LISTVIEW ITEM ROW HEIGHT "/>
                    <Grid.ColumnDefinitions Width="*"/>
                </Grid>

            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>
1

1 Answers

0
votes

Use the RowHeight Property to set the height of a row of ListView. And then use Converter to set the width of gird dynamically.

Create a converter:

 public class MyConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return value ;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Xaml:

  <ContentPage.Resources>
    <ResourceDictionary>
        <local:MyConverter x:Key="MyConverter" />
    </ResourceDictionary>
</ContentPage.Resources>
<ContentPage.Content>
    <ListView
        x:Name="listView"
        BackgroundColor="Green"
        HasUnevenRows="True"
        ItemsSource="{Binding peoples}"
        RowHeight="100">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <Grid BackgroundColor="Accent">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="{Binding Source={x:Reference listView}, Path=RowHeight, Converter={StaticResource MyConverter}}" />
                            <RowDefinition Height="{Binding Source={x:Reference listView}, Path=RowHeight, Converter={StaticResource MyConverter}}" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="{Binding Source={x:Reference listView}, Path=RowHeight, Converter={StaticResource MyConverter}}" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>

                        <BoxView
                            Grid.Row="0"
                            Grid.Column="0"
                            BackgroundColor="Black" />
                        <BoxView
                            Grid.Row="0"
                            Grid.Column="1"
                            BackgroundColor="Blue" />
                        <BoxView
                            Grid.Row="1"
                            Grid.Column="0"
                            BackgroundColor="Yellow" />
                        <BoxView
                            Grid.Row="1"
                            Grid.Column="1"
                            BackgroundColor="DarkGray" />
                    </Grid>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</ContentPage.Content>    

I use BoxView to represent the square regardless which colored the black.

enter image description here