Xamarin 根据视单元宽度调整 Listview 项目高度
Xamarin resize Listview item-height based on viewcell width
我的目标是让列表视图在左侧有一个可调整大小的图标,在另一列中有 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>
但这也没有用。以前有人做过这样的解决方案吗?
我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 -->
我的目标是让列表视图在左侧有一个可调整大小的图标,在另一列中有 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>
但这也没有用。以前有人做过这样的解决方案吗?
我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 -->