Xamarin Forms - ListView中的iOS動態ViewCell大小

Question

以下XF應用程序（下面的代碼）創建一個簡單的ListView和2個自定義單元格。點擊單元格使用IsVisible屬性顯示第二個標籤。

在Android上，當ViewCell調整大小以適應當前顯示的內容時，此功能非常有用。當細節項目變爲可見時，ViewCell將展開以顯示細節。

在iOS上，這不起作用。

這裏是應用程序如何出現第一次啓動...

當您點擊第一ViewCell，IsVisible屬性跳閘，並且詳細的項目展示。然而，ViewCell保持相同的高度使其溢出，如下所示...

這又如何在iOS端來完成？

這裏是代碼...

XAML

<ContentPage.Content> 
    <ListView x:Name="___list" Margin="50" HasUnevenRows="True"> 
     <ListView.ItemTemplate> 
     <DataTemplate> 
      <ViewCell> 
      <StackLayout> 
       <StackLayout.GestureRecognizers> 
       <TapGestureRecognizer Command="{Binding CellTap}" /> 
       </StackLayout.GestureRecognizers> 
       <Label Text="{Binding Title}" /> 
       <Label Text="{Binding Detail}" FontSize="30" IsVisible="{Binding ShowDetails}" /> 
      </StackLayout> 
      </ViewCell> 
     </DataTemplate> 
     </ListView.ItemTemplate> 
    </ListView> 
    </ContentPage.Content> 

C＃

public partial class MainPage : ContentPage 
{ 
    public MainPage() 
    { 
     InitializeComponent(); 

     ___list.ItemsSource = new List<Element>() { 
       new Element() { 
        Title="First Element", 
        Detail = "First Element Details" 
       }, 
       new Element() { 
        Title="Second Element", 
        Detail = "Second Element Details" 
       } 
      }; 
    } 
} 
public class Element : INotifyPropertyChanged 
{ 
    public Element() 
    { 
     CellTap = new Command(() => 
     { 
      ShowDetails = !ShowDetails; 
     }); 
    } 

    public ICommand CellTap { get; private set; } 

    private string _title; 
    public string Title 
    { 
     get { return _title; } 
     set { if (_title != value) { _title = value; OnPropertyChanged("Title"); } } 
    } 
    private string _detail; 
    public string Detail 
    { 
     get { return _detail; } 
     set { if (_detail != value) { _detail = value; OnPropertyChanged("Detail"); } } 
    } 
    private bool _showDetails; 
    public bool ShowDetails 
    { 
     get { return _showDetails; } 
     set { if (_showDetails != value) { _showDetails = value; OnPropertyChanged("ShowDetails"); } } 
    } 


    public event PropertyChangedEventHandler PropertyChanged; 
    private void OnPropertyChanged(string propertyName) 
    { 
     if (PropertyChanged != null) 
      PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); 
    } 
} 

Answer 1

ViewCell無法自動找出它是如何高應該是。您必須通過設置其Height或強制更新來支持它。不幸的是，Height不可綁定。

選項1：如果每行的高度不同，並且列表找不到正確的高度，請使用此選項。

class CustomViewCell : ViewCell 
{ 
    protected override void OnBindingContextChanged() 
    { 
    base.OnBindingContextChanged(); 
    // Do some calculation in here to get the height you need. 
    // Here we are using an example that bases the size on the result of ToString() 
    string text = BindingContext.ToString(); 
    Height = 10 + ((int)(text[0]) - 65); 
    } 
} 

選項2：變化高度動態（可能是你想要的）

void SomeEventHandler(object sender, EventArgs args) 
{ 
    // Let's assume an image was tapped... 
    var image = sender as Image; 
    // ...and the image is in a cell. 
    var viewCell = image.Parent.Parent as ViewCell; 

    // You would FIRST change the height of the content (in this case the image) 
    if (image.HeightRequest < 250) 
    { 
     image.HeightRequest = image.Height + 100; 
     // And THEN tell the cell to update (Note: you should not be required 
     // to subclass the cell) 
     viewCell.ForceUpdateSize(); 
    } 
} 

確保HasUnevenRows = true，否則強制更新不會有效果。