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

Question

我的目标是让列表视图在左侧有一个可调整大小的图标，在另一列中有 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>

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

Answer 1

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

在您的 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 高度属性.

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

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

Xamarin resize Listview item-height based on viewcell width

image

xaml

xamarin

grid

height