Xamarin resize Listview item-height based on viewcell width

Question

My goal is to have a listview with a resizeable icon on the left, and 3 lines of text in the other column. Here is the template I've tested so far:

<ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Grid Margin="0,0" Padding="0,0" ColumnSpacing="0" RowSpacing="0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="15*"/>
                        <ColumnDefinition Width="85*"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                                <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>

                    <Image Grid.Row="0" Grid.Column="0" Source="{Binding sImageSource}" Aspect="AspectFit" />

                    <StackLayout Grid.Row="0" Grid.Column="1" Orientation="Vertical" Margin="0" Padding="0" Spacing="0">
                        <Label Text="{Binding sDisplayName}" FontSize="Medium" LineBreakMode="TailTruncation" YAlign="Center" TextColor="Black"/>
                        <Label Text="{Binding sFileSize}"  FontSize="Micro" TextColor="Gray" YAlign="Center"/>
                        <Label Text="{Binding sFileDate}"  FontSize="Micro" TextColor="Gray" YAlign="Center"/>
                    </StackLayout>
                </Grid>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>

If the ColumnDefinition Width="15*" is changed to "25*" I just get a wider column, and the picture is not changed in height (As I though it would).

Actually what I want is that RowDefinition Height="ColumnDefinition Width="15*"", so the both resize linear based on the parameter set as width.

Does anyone have tips regarding this?

PS: I have also tested HasUnevenRows=True, but that sets the height of each cell too high.

Edit: Another variation has been tested:

                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="1*" x:Name="MyImageGrid"/>
                        <ColumnDefinition Width="3*"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                                <RowDefinition BindingContext="{x:Reference MyImageGrid}" Height="{Binding Path=ActualWidth}"/>
                    </Grid.RowDefinitions>

But that did not work either. Have anyone done such a solution before?

Have you tried setting the aspect to AspectFill when changing the width of the column? — Hichame Yessou
I tried AspectFill and it streched the image. I wanted to keep aspect ration. — Large

Large Large · Accepted Answer · 2018-03-05T21:03:04

I sort-of solved this little nut, but it was more complicated than it should be. Here is the solution if anyone wonders.

In your contentpage-csfile, you have to add an property to store the value needed

public partial class YourPage : ContentPage
{
//....
    public class RowHeight : INotifyPropertyChanged
    {
        private int nInternalHeight;
        public event PropertyChangedEventHandler PropertyChanged;
        public int Height
        {
            get { return nInternalHeight; }
            set
            {
                nInternalHeight = value;
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Height"));
            }
        }
    }
//....
    public RowHeight oRowHeight { get; set; }
//....
    public YourPage()
    {
        oRowHeight = new RowHeight();
    }
//....
    protected override void OnAppearing()
    {
        base.OnAppearing(); //Width is -1 if set right away in YourPage() creation
        oRowHeight.Height = (int)(App.Current.MainPage.Width * 0.15);
    }
//....

Now in the XAML part of the code. Our object oRowHeight.Height needs to be bound to our RowDefinition Height property.

The ListView also must have the following criterias:
1. HasUnevenRows = True
2. Page has to have a name for the reference

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourApp.Views.YourPage"
             x:Name="YourPageName">
    <ContentPage.Content>
        <StackLayout>
        <ListView ItemsSource="{Binding OtherItems}">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <Grid Margin="0,0" Padding="0,0" ColumnSpacing="0" RowSpacing="0">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="15*"/>
                            <ColumnDefinition Width="85*"/>
                        </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="{Binding Source={x:Reference YourPageName}, Path=BindingContext.oRowHeight.Height}" />
                                </Grid.RowDefinitions>
<!-- Like the rest of XAML above -->

Xamarin resize Listview item-height based on viewcell width

1 Answers