C# – Strange behavior of Grid row height auto property

cxamarinxaml

enter image description hereI have listview with grid datatemplate, and I am experiencing strange behavior. When I add to cell StackLayout with two elements: multiline label and horizontal stacklayout, the row with auto height fills about 1.5 of page height, and I can't change it.

Here is my xaml page :

<controls:FlowListView x:Name="ReposList"
                         HorizontalOptions="FillAndExpand"
                         VerticalOptions="FillAndExpand"
                         FlowItemsSource="{Binding PrivateNews.Result}"
                         SeparatorVisibility="None"
                         HasUnevenRows="True"
                         FlowColumnCount="1"
                         Margin="0, 15, 0, 0">

    <controls:FlowListView.FlowColumnTemplate>
      <DataTemplate>
        <Grid VerticalOptions="Start"
              HorizontalOptions="StartAndExpand"
              Margin="15, 15, 15, 15"
              ColumnSpacing="0">
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="33"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
          </Grid.ColumnDefinitions>
          <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>

          </Grid.RowDefinitions>

          <Image x:Name="Avatar"
                 Source="{Binding ImageUrl}"
                 HeightRequest="28"
                 WidthRequest="28"
                 Grid.Column="0"
                 Grid.Row="0"
                 VerticalOptions="Start"
                 HorizontalOptions="StartAndExpand"
                 Margin="0, 5, 0, 0"
                 BackgroundColor="Blue"/>

          <StackLayout HorizontalOptions="CenterAndExpand"
                       VerticalOptions="Center"
                       Grid.Column="1"
                       Grid.Row="0"
                       Orientation="Vertical"
                       Grid.ColumnSpan="2"
                       BackgroundColor="Green">
            <Label x:Name="Title"
                   FormattedText="{Binding CustomFormattedText}"
                   FontSize="16"
                   TextColor="Black"
                   LineBreakMode="CharacterWrap"
                   VerticalOptions="Start"
                   HorizontalOptions="StartAndExpand"/>
            <StackLayout
              BackgroundColor="Olive"
              Orientation="Horizontal"
              VerticalOptions="Start">

              <customClasses:FontIcon x:Name="ActionTypeIcon"
                                      Text="{Binding ActionTypeFontIcon}"
                                      TextColor="Gray"
                                      FontSize="16"
                                      FontFamily="Octicons"
                                      VerticalOptions="Center"
                                      BackgroundColor="Maroon"/>
              <Label x:Name="PublishedTime"
                     Text="{Binding Published}"
                     FontSize="14"
                     VerticalOptions="Center"
                     BackgroundColor="Purple"/>
            </StackLayout>
          </StackLayout>
        </Grid>
      </DataTemplate>
    </controls:FlowListView.FlowColumnTemplate>
  </controls:FlowListView>

UPDATE
Now, it is better, but still has this space, and I have no idea why. Space creates by grid, not by one of the elements.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
             xmlns:controls="clr-namespace:DLToolkit.Forms.Controls;assembly=DLToolkit.Forms.Controls.FlowListView"
             xmlns:customClasses="clr-namespace:GitRemote.CustomClasses;assembly=GitRemote"
             prism:ViewModelLocator.AutowireViewModel="True"
             x:Class="GitRemote.Views.NewsPage"
             Title="News">

  <controls:FlowListView x:Name="ReposList"
                         HorizontalOptions="FillAndExpand"
                         VerticalOptions="FillAndExpand"
                         FlowItemsSource="{Binding PrivateNews.Result}"
                         HasUnevenRows="True"
                         FlowColumnCount="1"
                         Margin="0, 15, 0, 0">

    <controls:FlowListView.FlowColumnTemplate>
      <DataTemplate>
        <Grid VerticalOptions="Start"
              HorizontalOptions="Start"
              Margin="15, 0, 15, 0"
              ColumnSpacing="0"
              RowSpacing="5">
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="33"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="1"/>

          </Grid.ColumnDefinitions>
          <Grid.RowDefinitions>          
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="20"/>
          </Grid.RowDefinitions>
          <Image x:Name="Avatar"
                 Source="{Binding ImageUrl}"
                 HeightRequest="30"
                 WidthRequest="30"
                 Grid.Column="0"
                 Grid.Row="0"
                 Grid.RowSpan="2"
                 VerticalOptions="Start"
                 HorizontalOptions="Start"
                 Margin="0, 5, 0, 0" BackgroundColor="Green"/>

          <StackLayout  Grid.Column="1"
                        Grid.Row="0"
                        Grid.ColumnSpan="2"
                        BackgroundColor="Fuchsia"
                        VerticalOptions="FillAndExpand"
                        HorizontalOptions="FillAndExpand">

            <Label x:Name="Title"
                   FormattedText="{Binding CustomFormattedText}"
                   TextColor="Black"
                   LineBreakMode="WordWrap"/>
          </StackLayout>
          <customClasses:FontIcon x:Name="ActionTypeIcon"
                                  Text="{Binding ActionTypeFontIcon}"
                                  TextColor="Gray"
                                  FontSize="16"
                                  FontFamily="Octicons"
                                  Grid.Column="1"
                                  Grid.Row="1"
                                  VerticalOptions="Center"
                                  HorizontalOptions="StartAndExpand"
                                  Margin="0, 0, 5, 0" BackgroundColor="Lime"/>

          <Label x:Name="PublishedTime"
                 Text="{Binding Published}"
                 FontSize="14"
                 Grid.Column="2"
                 VerticalOptions="Center"
                 HorizontalOptions="StartAndExpand"
                 Grid.Row="1" BackgroundColor="Aqua"/>

        </Grid>
      </DataTemplate>
    </controls:FlowListView.FlowColumnTemplate>


  </controls:FlowListView>

</ContentPage>

New Image

UPDATE

It is because of Auto property in Column defination, but why is it?

UPDATE

What I can say, that after 3 days of tries, I realized, that it is all shit. It don't want to work with any combination. It cuts multiline label, or doesn't wrap, or breaks grid bounds and it overlaps, or it creates extra spaces with different heights. It does in different ways, sometimes because of fill, or expand, sometimes because of Star or Auto. But it is shitty all the time. So many bugs that I can't guess it behavior.And it is simple layouts, fundamental. I don't know what to do.
If someone reach this positions of elements, these I have, please aware me.

Best Answer

For those, who could face with something, like I did, that worked for me. I manually change column width:

<controls:FlowListView x:Name="ReposList"
                         HorizontalOptions="FillAndExpand"
                         VerticalOptions="FillAndExpand"
                         FlowItemsSource="{Binding PrivateNews.Result}"
                         HasUnevenRows="True"
                         FlowColumnCount="1"
                         Margin="15, 15, 15, 0">

    <controls:FlowListView.FlowColumnTemplate>
      <DataTemplate>
        <Grid VerticalOptions="Start"
              HorizontalOptions="Start"
              Margin="0, 0, 0, 20"
              ColumnSpacing="0"
              RowSpacing="5">
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="33"/>
            <ColumnDefinition Width="20"/>
            <ColumnDefinition Width="{Binding Source={x:Reference Name=ReposList}, Path=BindingContext.ColumnWidth}"/>

          </Grid.ColumnDefinitions>
          <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="20"/>
          </Grid.RowDefinitions>

          <Image x:Name="Avatar"
                 Source="{Binding ImageUrl}"
                 HeightRequest="30"
                 WidthRequest="30"
                 Grid.Column="0"
                 Grid.Row="0"
                 Grid.RowSpan="2"
                 VerticalOptions="Start"
                 HorizontalOptions="Start"
                 Margin="0, 5, 5, 0"/>

          <StackLayout  Grid.Column="1"
                        Grid.Row="0"
                        Grid.ColumnSpan="2"
                        VerticalOptions="FillAndExpand"
                        HorizontalOptions="FillAndExpand" BackgroundColor="Aqua">

            <Label x:Name="Title"
                   FormattedText="{Binding CustomFormattedText}"
                   TextColor="Black"
                   LineBreakMode="CharacterWrap"/>
          </StackLayout>
          <customClasses:FontIcon x:Name="ActionTypeIcon"
                                  Text="{Binding ActionTypeFontIcon}"
                                  TextColor="Gray"
                                  FontSize="16"
                                  FontFamily="Octicons"
                                  Grid.Column="1"
                                  Grid.Row="1"
                                  VerticalOptions="Center"
                                  HorizontalOptions="StartAndExpand"
                                  Margin="0, 0, 5, 0"/>

          <Label x:Name="PublishedTime"
                 Text="{Binding Published}"
                 FontSize="14"
                 Grid.Column="2"
                 VerticalOptions="Center"
                 HorizontalOptions="FillAndExpand"
                 Grid.Row="1"/>

        </Grid>
      </DataTemplate>
    </controls:FlowListView.FlowColumnTemplate>


  </controls:FlowListView>

How to get screen width and other stuff you can find on the internet.

Related Topic