1

An odd behavior is occurring when trying to set the Height of a Grid Row that is inside a ListView on Xamarin.Forms. When I hard code the value, for example:

<RowDefinition Height="40" />

... the Height of the Row gets set to 40. I know because I've tried different values and the Height changed proportionally.

However when I set the same property by binding it to a property on the View Model, no matter what the value of the property is, the Height of the Row always remains the same.

<RowDefinition Height="{Binding SmallImageHeight}" />

Here is the XAML code on my View:

<ListView ItemsSource="{Binding Items}" HasUnevenRows="True" x:Name="itemsListView">
      ...
              <StackLayout>
                <Grid>
                  <Grid.RowDefinitions>
                    <RowDefinition Height="{Binding SmallImageHeight}" />
                  </Grid.RowDefinitions>
                  <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="5*" />
                    <ColumnDefinition Width="5*" />
                  </Grid.ColumnDefinitions>

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

                  <StackLayout Grid.Row="0" Grid.Column="1" >
                    ...
                  </StackLayout>
                </Grid>

              </StackLayout>
            ...
    </ListView>

I already tested the property on the view model by binding the height to an image outside the ListView and it works. Does anybody know why thins happens and how to fix it?

Esteban Verbel
  • 738
  • 2
  • 20
  • 39
  • did you tried `VerticalAlignment="Stretch"` of ListView – Mohit S Jan 17 '17 at 03:31
  • Actually what is `SmallImageHeight` it is bounded as height as well as image source – sujith karivelil Jan 17 '17 at 03:32
  • @MohitShrivastava when should I set the VerticalAlignment? I just tried setting it on the heade ...r ... and it crashed – Esteban Verbel Jan 17 '17 at 03:43
  • @un-lucky SmalImageHeight is a float. I modified my code to post it here and pasted that property name it on the Image Source by accident. – Esteban Verbel Jan 17 '17 at 03:44
  • 1
    it may be possible that your height is getting binded the same time your data in the row.Well ,I am not sure about this. but try to bind the height through different model (try to bind it first) and data through diff model (try to bind later) – Dirty Developer Jan 17 '17 at 03:56
  • @DirtyDeveloper that was exactly the problem! Everything inside the ListView is bound to an ObservableCollection. I fixed it by modifying the binding of the height to loop for the property in the root of the ViewModel. Thank you – Esteban Verbel Jan 17 '17 at 04:07
  • @EstebanVerbel most welcome! – Dirty Developer Jan 17 '17 at 05:37

1 Answers1

0

This is how I solved it if anyone else has the same issue. Any item inside the listview is bound to the ItemsSource objects. To solve the problem it is necessary to bind the height by referencing the Root of the ViewModel (BindingContext)

<RowDefinition Height="{Binding Source={x:Reference Name=itemsListView}, Path=BindingContext.SmallImageHeight}" />
Esteban Verbel
  • 738
  • 2
  • 20
  • 39