Xamarin根据视单元宽度调整Listview项目高度

时间:2018-03-03 21:07:19

标签: image xaml xamarin grid height

我的目标是在左侧创建一个带有可调整大小图标的列表视图,在另一列中创建3行文本。这是我到目前为止测试的模板:

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

如果ColumnDefinition Width =&#34; 15 *&#34;改为&#34; 25 *&#34;我只是得到一个更宽的列,图片的高度没有变化(虽然我会这样)。

实际上我想要的是RowDefinition Height =&#34; ColumnDefinition Width =&#34; 15 *&#34;&#34;,所以两者都根据参数设置为宽度调整线性。

有没有人有这方面的提示?

PS:我也测试过HasUnevenRows = True,但是这会将每个单元格的高度设置得太高。

编辑: 另一种变体已经过测试:

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

但这也不起作用。有没有人以前做过这样的解决方案?

1 个答案:

答案 0 :(得分:0)

我解决了这个小小的问题,但它比它应该更复杂。 如果有人想知道,这就是解决方案。

在contentpage-csfile中,您必须添加一个属性来存储所需的值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="six columns" >
        <div class="row">
          <div class="columns" >
            <h4>Form 1</h4>
            <hr/>
            <form method="POST">
                Start DATE: <input type="text" name="start" /><br />
                End DATE: <input type="text" name="end" /><br />
                <input type="submit" name="submit" />
            </form>
          </div>
        </div>
      </div>
      <div class="six columns" >
        <div class="row">
          <div class="columns" >
            <h4>Form 2</h4>
            <hr/>
            <form method="POST">
                    <h3  style="font-family:verdana;"> <u>Search a name</u></h3>
                     Name: <input type="text" name="name" /><br />
                <input type="submit" name="submit" />
            </form>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="twelve columns" >
        <div class="row">
          <div class="columns" >
            <h4>My result</h4>
            <hr/>
            <!-- Php Code here -->
            Php Code here
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

现在在代码的XAML部分。 我们的对象oRowHeight.Height需要绑定到我们的RowDefinition Height属性。

ListView还必须具有以下标准:
1. HasUnevenRows = True
2.页面必须有一个参考名称

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);
    }
//....