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

Posted 2021-04-15

我的目标是在左侧有一个带有可调整大小图标的列表视图，在另一列中有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 =“15 *”更改为“25 *”，我只会得到一个更宽的列，并且图片的高度不会改变（尽管我会这样）。

实际上我想要的是RowDefinition Height =“ColumnDefinition Width =”15 *“”，因此两者都根据参数设置为宽度调整线性大小。

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

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>

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

答案

我解决了这个小坚果，但它比它应该更复杂。如果有人想知道，这是解决方案。

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

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

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

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

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