Xamarin.Forms 設計具有動態高度且可收合的ListView清單效果

在底下的兩個 Gif 動畫圖片中，分別展示了在 Android & iOS 的環境下，做到類似ListView的效果，不過，可以動態的展開或者收起任意高度的清單內容。

要做到這樣的效果，將會透過雙層的 WrapLayout 版面配置控制項，並且在最外層使用 ScrollView 將其包起來，而做到這樣的效果；不過，這裡將會有些實作上要特別注意的地方，底下內容將會說明這些注意事項。

這份筆記的範例專案在

https://github.com/vulcanlee/xamarin-forms-develop-notes-example/tree/master/XFMoreWrapLayout

外層的 WrapLayout

• 需要設定排列順序為垂直排列，使用 Orientation="Vertical"
• 為了要讓 WrapLayout 可以正確計算每個控制項的高度與寬度，這裡使用了 WidthRequest="{Binding Path=BindingContext.RecordWidth, Source={x:Reference ThisPage}}" 這個 XAML 宣告標記，定義了最外層的 Label 寬度為多少，其中，整個螢幕的寬度是透過了資料繫結，從 ViewModel 內取得；在這裡，也使用了 Source 這個資料繫結語法，指定其要綁定的資料來源為這個頁面，並且透過了 Path=BindingContext.RecordWidth 指定要綁定的路徑為 BindingContext 內的 RecordWidth 這個屬性值。而這個屬性值，是透過在該 ContentPage 內，綁定了 Width 這個可綁定屬性取得，Width="{Binding Width, Mode=OneWayToSource}"，你可以看到這裡的 Mode 使用了 OneWayToSource 這樣的綁定模式，表示這個 ViewModel 的屬性僅會從 View 中取得所要綁定的資料，不會從 ViewModel 的屬性更新到 View 的屬性上(因為 Width 這個可綁定屬性為唯獨)。
• 在最外層的 WrapLayout 內，其 Grid 寬度，需要指定 Auto，這樣，才不會造成版面配置計算的上的問題 <Grid.ColumnDefinitions><ColumnDefinition Width="Auto" /></Grid.ColumnDefinitions>
• 手勢點選命令的綁定方式，也是一樣，透過 Source 指定綁定來源為該頁面，透過 Path 使定綁定來源的路徑 Path=BindingContext.點選資料列項目Command

內層的 WrapLayout

• 需要設定排列順序為垂直排列，使用 Orientation="Horizontal"
• 使用 RoundedBoxView 繪製文字的圓角外框
• 為了要讓 文字與圓角外框的有足夠的左右空間，使用了 Margin="15,0" 讓版型更加好看。