Question

我有使用grid datatemplate的listview，我遇到了奇怪的行为。当我使用两个元素添加到单元格StackLayout时：多行标签和水平stacklayout，具有自动高度的行填充页面高度的1.5左右，我无法更改它。

这是我的xaml页面：

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

更新现在，它更好，但仍然有这个空间，我不知道为什么。空间由网格创建，而不是由其中一个元素创建。

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

更新

这是因为Column defination中的Auto属性，但为什么呢？

更新

我可以说，经过3天的尝试，我意识到，这一切都很糟糕。它不想使用任何组合。它会切割多线标签，或者不包裹，或者打破网格边界并重叠，或者创建具有不同高度的额外空间。它以不同的方式，有时因为填充或扩展，有时因为Star或Auto。但它总是很糟糕。如此多的错误，我无法猜测它的行为。它是简单的布局，基本。我不知道该怎么做。如果有人达到这些元素的位置，我有这些，请注意我。

Answer 1

对于那些可能面对某些事情的人，就像我一样，对我有用。我手动更改列宽：

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

如何获取屏幕宽度以及其他可在互联网上找到的内容。

Grid行高自动属性的奇怪行为

1 个答案: