码迷,mamicode.com
首页 > 其他好文 > 详细

Xamarin.Forms 解决ListView高度问题

时间:2018-01-23 00:54:32      阅读:1315      评论:0      收藏:0      [点我收藏+]

标签:enc   xmlns   orm   recycle   ini   eve   exp   close   star   

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

 

Xamarin.Forms 解决ListView高度问题

标签:enc   xmlns   orm   recycle   ini   eve   exp   close   star   

原文地址:https://www.cnblogs.com/devin_zhou/p/8327606.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!