Xamarin.Forms 解決ListView高度問題

在設計中，ListView需要嵌套到StackLayout中，但是ListView會出現一片空白部分，如何移除空白部分？

問題如圖所示：

Xaml代碼：

 1 <?xml version="1.0" encoding="utf-8" ?>
 2 <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
 3              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
 4              x:Class="XFPractice.Pages.ContactsPage">
 5     
 6     <StackLayout Orientation="Vertical">
 7 
 8         <ListView x:Name="MyListView"
 9             ItemsSource="{Binding Items}"
10             ItemTapped="Handle_ItemTapped"
11             HasUnevenRows="True"
12             VerticalOptions="Start"
13             CachingStrategy="RecycleElement">
14 
15             <ListView.ItemTemplate>
16                 <DataTemplate>
17                     <TextCell Height="36" Text="{Binding .}" />
18                 </DataTemplate>
19             </ListView.ItemTemplate>
20         </ListView>
21 
22         <StackLayout Grid.Row="1" Orientation="Vertical" VerticalOptions="FillAndExpand">
23             <Button Text="按鈕一" Margin="12,0"/>
24             <Button Text="按鈕二" Margin="12,0"/>
25         </StackLayout>
26     </StackLayout>
27 </ContentPage>

View Code

C#代碼：

 1 using System;
 2 using System.Collections.ObjectModel;
 3 using System.ComponentModel;
 4 using System.Linq;
 5 using System.Threading.Tasks;
 6 
 7 using Xamarin.Forms;
 8 using Xamarin.Forms.Xaml;
 9 
10 namespace XFPractice.Pages
11 {
12     [XamlCompilation(XamlCompilationOptions.Compile)]
13     public partial class ContactsPage : ContentPage
14     {
15         public ObservableCollection<string> Items { get; set; }
16 
17         public ContactsPage()
18         {
19             InitializeComponent();
20             
21             Title = "通訊錄";
22 
23             Items = new ObservableCollection<string>
24             {
25                 "Item 1",
26                 "Item 2",
27                 "Item 3",
28                 "Item 4",
29                 "Item 5"
30             };
31             
32         MyListView.ItemsSource = Items;
33 
34         }
35 
36 
37         void Handle_ItemTapped(object sender, ItemTappedEventArgs e)
38         {
39             if (e.Item == null)
40                 return;
41             ((ListView)sender).SelectedItem = null;
42         }
43     }
44 }

View Code

解決方案：

通過每個Item的高度計算出ListView的高度。Demo中每個Item的高度為36，一共有5個Item，那么此時ListView的高度為36*5。

MyListView.HeightRequest = 36 * 5;

僅僅如此還不夠，需要在與ListView同級別的StackLayout設置VerticalOptions="FillAndExpand"。

效果如圖所示：

Xaml代碼：

 1 <?xml version="1.0" encoding="utf-8" ?>
 2 <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
 3              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
 4              x:Class="XFPractice.Pages.ContactsPage">
 5     
 6     <StackLayout Orientation="Vertical">
 7 
 8         <ListView x:Name="MyListView"
 9             ItemsSource="{Binding Items}"
10             ItemTapped="Handle_ItemTapped"
11             HasUnevenRows="True"
12             VerticalOptions="Start"
13             CachingStrategy="RecycleElement">
14 
15             <ListView.ItemTemplate>
16                 <DataTemplate>
17                     <TextCell Height="36" Text="{Binding .}" />
18                 </DataTemplate>
19             </ListView.ItemTemplate>
20         </ListView>
21 
22         <StackLayout Grid.Row="1" Orientation="Vertical" VerticalOptions="FillAndExpand">
23             <Button Text="按鈕一" Margin="12,0"/>
24             <Button Text="按鈕二" Margin="12,0"/>
25         </StackLayout>
26     </StackLayout>
27 </ContentPage>

View Code

C#代碼：

 1 using System;
 2 using System.Collections.ObjectModel;
 3 using System.ComponentModel;
 4 using System.Linq;
 5 using System.Threading.Tasks;
 6 
 7 using Xamarin.Forms;
 8 using Xamarin.Forms.Xaml;
 9 
10 namespace XFPractice.Pages
11 {
12     [XamlCompilation(XamlCompilationOptions.Compile)]
13     public partial class ContactsPage : ContentPage
14     {
15         public ObservableCollection<string> Items { get; set; }
16 
17         public ContactsPage()
18         {
19             InitializeComponent();
20             
21             Title = "通訊錄";
22 
23             Items = new ObservableCollection<string>
24             {
25                 "Item 1",
26                 "Item 2",
27                 "Item 3",
28                 "Item 4",
29                 "Item 5"
30             };
31             
32             MyListView.ItemsSource = Items;
33 
34             this.Appearing += ContactsPage_Appearing;
35         }
36 
37         private void ContactsPage_Appearing(object sender, EventArgs e)
38         {
39             MyListView.HeightRequest = 36 * 5;
40         }
41 
42         void Handle_ItemTapped(object sender, ItemTappedEventArgs e)
43         {
44             if (e.Item == null)
45                 return;
46             ((ListView)sender).SelectedItem = null;
47         }
48     }
49 }

View Code

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Xamarin.Forms之ListView Xamarin.Forms之ListView探究筆記 Xamarin.Forms之Button Xamarin.Forms WebView Xamarin.Forms之樣式走進 Prism for Xamarin.Forms 【Xamarin.Forms 3】頁面類型 Xamarin.Forms之UserDialogs探究 Xamarin.Forms之資源集合 Xamarin.Forms 移動開發