tnblog
首页
视频
资源
登录
原

Xamarin 天气预报小项目(ListView)

6444人阅读 2022/5/8 13:34 总访问：3467499 评论：0 收藏：0 手机
分类: Xamarin

Xamarin 天气预报小项目


我们制作的案例大概如下图所示：

实践准备


首先我们创建一个Xamarin.From类型名为PunchInReminder的项目，并且勾选上支持Andriod与IOS，然后生成项目解决方案。


然后在PunchInReminder项目中安装我们需要的包，从Nuget上下载。
Flurl是用于我们请求的包
Modernhttpclient-updated是用于我们请求时证书的包


然后添加我们所需要的图片素材，下载图片素材。下载完成后我们将在PunchInReminder项目中创建Image文件夹，并将我们的图片放到该文件夹下面。


将其中的图片属性改为嵌入式类型。

添加代码


添加一个新的网络类NetWorkStatusModel，我们可以通过该类的NetWorkStatus属性获取到当前网络环境是否连接上了网络。

  1. using System;
  2. using Xamarin.Essentials;
  4. namespace PunchInReminder
  5. {
  6.     public class NetWorkStatusModel
  7.     { 
  8.         public bool NetWorkStatus { get => GetNetWorkStatus(); }
  10.         private bool GetNetWorkStatus()
  11.         {
  12.             var current = Connectivity.NetworkAccess;
  13.             return (current == NetworkAccess.Internet ||
  14.                current == NetworkAccess.ConstrainedInternet);
  15.         }
  16.     }
  17. }


在Android中我们是需要对其进行开放权限，在PunchInRemind.Android项目中的Properties下的AssemblyInfo.cs中添加AccessNetworkState程序集,随后在AndroidManifest.xml中添加需要的权限。

  1. [assembly: UsesPermission(Android.Manifest.Permission.AccessNetworkState)]


然后我们创建新的类WeatherDataModel，并通过WeatherSevenData来获取我们天气预报的数据并将其值获取之后付给相关属性。
WeatherTime属性获取当日天气测的时间；
WeatherHeader属性获取当日天气情况；
Weathers属性获取七天的天气情况；
RefreshData方法可以通过实现INotifyPropertyChanged接口的PropertyChanged属性事件实现前台绑定的值更新。


获取数据大致的逻辑是判断是否有网，有网进行请求接口数据，并给相关属性进行赋值。

  1. public class WeatherDataModel:INotifyPropertyChanged
  2. {
  3.     readonly NetWorkStatusModel _netWorkStatusModel;
  4.     public WeatherDataModel()
  5.     {
  6.         _netWorkStatusModel = new NetWorkStatusModel();
  7.         WeatherSevenData();
  8.         RefreshData();
  9.     }
  11.     public string WeatherTime { get; private set; }
  12.     public WeatherDataItem WeatherHeader { get; private set; }
  13.     public List<WeatherDataItem> Weathers { get; private set; }
  14.     public event PropertyChangedEventHandler PropertyChanged;
  15.     private void RefreshData()
  16.     {
  17.         var WeatherHeadersargs = new PropertyChangedEventArgs(nameof(WeatherHeader));
  18.         var WeatherTimeargs = new PropertyChangedEventArgs(nameof(WeatherTime));
  19.         var Weathersargs = new PropertyChangedEventArgs(nameof(Weathers));
  20.         PropertyChanged?.Invoke(this, WeatherHeadersargs);
  21.         PropertyChanged?.Invoke(this, WeatherTimeargs);
  22.         PropertyChanged?.Invoke(this, Weathersargs);
  23.     }
  24.     private void WeatherSevenData()
  25.     {
  26.         try
  27.         {
  28.             if (_netWorkStatusModel.NetWorkStatus)
  29.             {
  30.                 var url = "https://v0.yiketianqi.com/api";
  31.                 var value = url
  32.                     .SetQueryParam("unescape", "1")
  33.                     .SetQueryParam("version", "v91")
  34.                     .SetQueryParam("appid", "43656176")
  35.                     .SetQueryParam("appsecret", "I42og6Lm")
  36.                     .SetQueryParam("ext", "")
  37.                     .SetQueryParam("cityid", "")
  38.                     .SetQueryParam("city", "")
  39.                     .GetAsync()
  40.                     .ReceiveJson<WeatherRoot>().Result
  41.                     ;
  42.                 if (value != null)
  43.                 {
  44.                     // 获取头部数据
  45.                     WeatherHeader = value.data.First();
  46.                     WeatherTime = value.update_time;
  47.                     // 获取头部数据
  48.                     Weathers = value.data;
  49.                 }
  50.             }
  51.         }
  52.         catch (Exception ex)
  53.         {
  54.             //DisplayAlert("Error", ex.Message, "OK");
  55.         }
  56.     }
  57. }


由于在安卓中可能会遇到证书的问题，所以我们可以为Flurl添加相关的证书处理。定义一个获取httpclient的工厂ModernHttpClientFactory,并且重写它的消息处理。
然后在App.xaml.cs中更改Flurl的配置。

  1. public class ModernHttpClientFactory:DefaultHttpClientFactory
  2. {
  3.     public override HttpMessageHandler CreateMessageHandler()
  4.     {
  5.         return new ModernHttpClient.NativeMessageHandler();
  6.     }
  7. }
  1. public App ()
  2. {
  3.     InitializeComponent();
  5.     FlurlHttp.Configure(c => {
  6.         c.HttpClientFactory = new ModernHttpClientFactory();
  7.     });
  8.     MainPage = new MainPage();
  9. }

如果你需要进行http的请求，因为用的API31版本的手机默认拒绝应用程序使用明文流量的请求，如http，所以要么可以把请求改为https，要么可以在AndroidManifest.xml文件中加入这一句(通过源代码编辑器打开)：

  1. <application android:label="PunchInReminder.Android" android:theme="@style/MainTheme" android:usesCleartextTraffic="true"></application>


然后我们定义好我们图片资源扩展ImageResourceExtension类。使它在不同的平台使用嵌入式资源。
详细请参考这篇：https://www.tnblog.net/hb/article/details/7244

  1. [ContentProperty(nameof(Source))]
  2. public class ImageResourceExtension : IMarkupExtension
  3. {
  4.     public string Source { get; set; }
  6.     public object ProvideValue(IServiceProvider serviceProvider)
  7.     {
  8.         if (Source == null)
  9.             return null;
  10.         var imageSource = ImageSource.FromResource(Source, typeof(ImageResourceExtension).GetTypeInfo().Assembly);
  11.         return imageSource;
  12.     }
  13. }


修改MainPage.xamlUI界面，添加好我们的天气预报的UI控件。（控件会在后面慢慢讲到）代码如下：

  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.              xmlns:img="clr-namespace:PunchInReminder.Extensions"
  5.              xmlns:weather="clr-namespace:PunchInReminder"
  6.              x:Class="PunchInReminder.MainPage">
  7.     <ContentPage.Resources>
  8.         <ResourceDictionary>
  9.             <weather:WeatherDataModel x:Name="weatherModel" x:Key="weatherModel"/>
  10.         </ResourceDictionary>
  11.     </ContentPage.Resources>
  12.     <Grid VerticalOptions="FillAndExpand">
  13.         <Grid.RowDefinitions>
  14.             <RowDefinition Height="Auto" />
  15.             <RowDefinition Height="Auto" />
  16.             <RowDefinition Height="Auto" />
  17.             <RowDefinition Height="*" />
  18.         </Grid.RowDefinitions>
  19.         <Image Source="{img:ImageResource PunchInReminder.Images.overlay.png}" Aspect="Fill" HeightRequest="300" VerticalOptions="StartAndExpand"></Image>
  20.         <StackLayout Orientation="Horizontal" Spacing="20" HorizontalOptions="Start" VerticalOptions="Start" Margin="20,50">
  21.             <ImageButton Source="{img:ImageResource PunchInReminder.Images.menu.png}" WidthRequest="23" HeightRequest="15" HorizontalOptions="Start" VerticalOptions="Start"/>
  22.             <Label Text="HangZhou" FontSize="16" VerticalOptions="Center" TextColor="White"/>
  23.         </StackLayout>
  24.         <StackLayout Orientation="Vertical" Margin="0,20" HorizontalOptions="Center" VerticalOptions="Center">
  25.             <StackLayout Orientation="Horizontal" HorizontalOptions="Center">
  26.                 <Image Source="{Binding Source={x:Reference weatherModel},Path=WeatherHeader.wea_img}" WidthRequest="50" HeightRequest="50" VerticalOptions="Center"></Image>
  27.                 <Label Text="{Binding Source={x:Reference weatherModel},Path=WeatherHeader.tem}" TextColor="White" FontSize="70" FontAttributes="Bold" VerticalOptions="Center"></Label>
  28.                 <Label Text="°C" TextColor="White" FontSize="34" VerticalOptions="Center"></Label>
  29.             </StackLayout>
  30.             <Label Text="{Binding Source={x:Reference weatherModel},Path=WeatherHeader.wea}" TextColor="White" FontSize="16" HorizontalOptions="Center"></Label>
  31.             <Label Text="{Binding Source={x:Reference weatherModel},Path=WeatherTime}" TextColor="White" FontSize="12" HorizontalOptions="Center"></Label>
  32.         </StackLayout>
  33.         <!--第二部分-->
  34.         <Frame Grid.Row="1" HasShadow="True" CornerRadius="10" Margin="20,-40,20,0" Padding="0" HeightRequest="120" VerticalOptions="Start">
  35.             <Grid HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand">
  36.                 <Grid.ColumnDefinitions>
  37.                     <ColumnDefinition Width="*"/>
  38.                     <ColumnDefinition Width="*"/>
  39.                     <ColumnDefinition Width="*"/>
  40.                     <ColumnDefinition Width="*"/>
  41.                 </Grid.ColumnDefinitions>
  42.                 <StackLayout Orientation="Vertical" Spacing="10" HorizontalOptions="CenterAndExpand">
  43.                     <Image Source="{img:ImageResource PunchInReminder.Images.humidity.png}" HeightRequest="25" VerticalOptions="Center"></Image>
  44.                     <StackLayout Spacing="7" HorizontalOptions="CenterAndExpand">
  45.                         <Label Text="{Binding Source={x:Reference weatherModel},Path=WeatherHeader.humidity}" TextColor="Black" FontSize="14" FontAttributes="Bold" HorizontalOptions="Center"></Label>
  46.                         <Label Text="Humidity" TextColor="#7D7D7D" FontSize="11" HorizontalOptions="Center"></Label>
  47.                     </StackLayout>
  48.                 </StackLayout>
  49.                 <StackLayout Grid.Column="1" Orientation="Vertical" Spacing="10" HorizontalOptions="CenterAndExpand">
  50.                     <Image Source="{img:ImageResource PunchInReminder.Images.wind.png}" HeightRequest="25" VerticalOptions="Center"></Image>
  51.                     <StackLayout Spacing="7" HorizontalOptions="CenterAndExpand">
  52.                         <Label Text="{Binding Source={x:Reference weatherModel},Path=WeatherHeader.win_meter}" TextColor="Black" FontSize="14" FontAttributes="Bold" HorizontalOptions="Center"></Label>
  53.                         <Label Text="Wind" TextColor="#7D7D7D" FontSize="11" HorizontalOptions="Center"></Label>
  54.                     </StackLayout>
  55.                 </StackLayout>
  56.                 <StackLayout Grid.Column="2" Orientation="Vertical" Spacing="10" HorizontalOptions="CenterAndExpand">
  57.                     <Image Source="{img:ImageResource PunchInReminder.Images.pressure.png}" HeightRequest="25" VerticalOptions="Center"></Image>
  58.                     <StackLayout Spacing="7" HorizontalOptions="CenterAndExpand">
  59.                         <Label Text="{Binding Source={x:Reference weatherModel},Path=WeatherHeader.pressure,StringFormat='{0} hpa'}" TextColor="Black" FontSize="14" FontAttributes="Bold" HorizontalOptions="Center"></Label>
  60.                         <Label Text="Pressure" TextColor="#7D7D7D" FontSize="11" HorizontalOptions="Center"></Label>
  61.                     </StackLayout>
  62.                 </StackLayout>
  63.                 <StackLayout Grid.Column="3" Orientation="Vertical" Spacing="10" HorizontalOptions="CenterAndExpand">
  64.                     <Image Source="{img:ImageResource PunchInReminder.Images.cloudiness.png}" HeightRequest="25" VerticalOptions="Center"></Image>
  65.                     <StackLayout Spacing="7" HorizontalOptions="CenterAndExpand">
  66.                         <Label Text="{Binding Source={x:Reference weatherModel},Path=WeatherHeader.wea_night}" TextColor="Black" FontSize="14" FontAttributes="Bold" HorizontalOptions="Center"></Label>
  67.                         <Label Text="Cloudiness" TextColor="#7D7D7D" FontSize="11" HorizontalOptions="Center"></Label>
  68.                     </StackLayout>
  69.                 </StackLayout>
  70.             </Grid>
  71.         </Frame>
  72.         <!--第三部分-->
  73.         <StackLayout Grid.Row="2" BackgroundColor="Transparent" Orientation="Horizontal" Margin="20" HorizontalOptions="End">
  74.             <ImageButton x:Name="ListBtn" Source="{img:ImageResource PunchInReminder.Images.listColor.png}" WidthRequest="15" HeightRequest="15"></ImageButton>
  75.             <ImageButton x:Name="GridBtn" Source="{img:ImageResource PunchInReminder.Images.grid.png}" WidthRequest="15" HeightRequest="15"></ImageButton>
  76.         </StackLayout>
  77.         <ListView x:Name="WeatherForecastList" ItemsSource="{Binding Source={x:Reference weatherModel},Path=Weathers}" SeparatorVisibility="None" Grid.Row="3" Margin="20,0" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
  78.             <ListView.ItemTemplate>
  79.                 <DataTemplate>
  80.                     <ViewCell>
  81.                         <Frame BackgroundColor="White" BorderColor="#F0F0F0" Padding="5" Margin="0,0,0,5" HasShadow="False">
  82.                             <Grid HeightRequest="50" HorizontalOptions="FillAndExpand" VerticalOptions="Start">
  83.                                 <Grid.ColumnDefinitions>
  84.                                     <ColumnDefinition Width="*"/>
  85.                                     <ColumnDefinition Width="Auto"/>
  86.                                     <ColumnDefinition Width="*"/>
  87.                                 </Grid.ColumnDefinitions>
  88.                                 <Label Text="{Binding week}" TextColor="#757575" FontSize="12" VerticalOptions="Center" Margin="20,0"></Label>
  89.                                 <Image Grid.Column="1" Source="{Binding wea_img}" WidthRequest="38" HeightRequest="38" VerticalOptions="Center" HorizontalOptions="Center"></Image>
  90.                                 <StackLayout Grid.Column="2" Orientation="Horizontal" Margin="20,0" HorizontalOptions="End" VerticalOptions="Center">
  91.                                     <Label Text="{Binding tem}" TextColor="Black" FontSize="20" FontAttributes="Bold" VerticalOptions="Center"/>
  92.                                     <Label Text="°C" TextColor="Black" FontSize="5" VerticalOptions="Center"/>
  93.                                 </StackLayout>
  94.                             </Grid>
  95.                         </Frame>
  96.                     </ViewCell>
  97.                 </DataTemplate>
  98.             </ListView.ItemTemplate>
  99.         </ListView>
  100.     </Grid>
  101. </ContentPage>

运行测试


安卓


IOS


接下来我们来讲讲这当中用到的集合。

ListView


ListView 以垂直列表的形式显示数据集合。

Demo


定义一个MyListView页面，在xaml中创建一个ListView垂直列表数据集合。

  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <ContentPage
  3.     xmlns="http://xamarin.com/schemas/2014/forms"
  4.     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  5.     x:Class="PunchInReminder.MyListView">
  6.     <ContentPage.Content>
  7.         <StackLayout>
  8.             <ListView x:Name="lvProduct"></ListView>
  9.         </StackLayout>
  10.     </ContentPage.Content>
  11. </ContentPage>
  1. using Xamarin.Forms;
  3. namespace PunchInReminder
  4. {    
  5.     public partial class MyListView : ContentPage
  6.     {    
  7.         public MyListView ()
  8.         {
  9.             InitializeComponent ();
  10.             this.lvProduct.ItemsSource = new string[] { "订单","客服","通知" };
  11.         }
  12.     }
  13. }


当然我们还可以设置其他的数据源类进行绑定举例：

  1. using System;
  2. namespace PunchInReminder
  3. {
  4.     public class MyListViewModel
  5.     {
  6.         public string[] ItemList { get; set; }
  7.         public MyListViewModel()
  8.         {
  9.             ItemList = new string[] { "订单", "客服", "通知" };
  10.         }
  11.     }
  12. }
  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <ContentPage
  3.     xmlns="http://xamarin.com/schemas/2014/forms"
  4.     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  5.     xmlns:local="clr-namespace:PunchInReminder"
  6.     x:Class="PunchInReminder.MyListView">
  7.     <ContentPage.BindingContext>
  8.         <local:MyListViewModel/>
  9.     </ContentPage.BindingContext>
  10.     <ContentPage.Content>
  11.         <StackLayout>
  12.             <ListView ItemsSource="{Binding ItemList}"></ListView>
  13.         </StackLayout>
  14.     </ContentPage.Content>
  15. </ContentPage>


我们还可以将它变成可观察性的集合。（效果一样我就不掩饰了）

  1. public class MyListViewModel
  2. {
  3.     public ObservableCollection<string> ItemList { get; set; }
  4.     public MyListViewModel()
  5.     {
  6.         ItemList = new ObservableCollection<string>();
  7.         ItemList.Add("订单");
  8.         ItemList.Add("客服");
  9.         ItemList.Add("通知");
  10.     }
  11. }

文本单元格（TextCell）


接下来我们创建一个功能信息类FeatureOption。它有功能ID、功能名称、功能描述以及图片路径等一些属性字段。

  1. public class FeatureOption
  2. {
  3.     /// <summary>
  4.     /// 功能ID
  5.     /// </summary>
  6.     public int FeatureId { get; set; }
  7.     /// <summary>
  8.     /// 功能名称
  9.     /// </summary>
  10.     public string FeatureName { get; set; }
  11.     /// <summary>
  12.     /// 功能描述
  13.     /// </summary>
  14.     public string Describe { get; set; }
  15.     /// <summary>
  16.     /// 图片路径
  17.     /// </summary>
  18.     public string ImageUrl { get; set; }
  19. }


然后我们将修改的MyListViewModel类中的数据。（关于图片请直接在网上找找看,并放到安卓的Resource的drawable目录下面）

  1. public class MyListViewModel
  2. {
  3.     public ObservableCollection<FeatureOption> ItemList { get; set; }
  4.     public MyListViewModel()
  5.     {
  6.         ItemList = new ObservableCollection<FeatureOption>();
  7.         ItemList.Add(new FeatureOption() { FeatureId=1,FeatureName="订单", Describe = "这是一个订单功能",ImageUrl="dingdan.png" });
  8.         ItemList.Add(new FeatureOption() { FeatureId=2,FeatureName= "客服", Describe = "这是一个在线客服",ImageUrl="kefu.png" });
  9.         ItemList.Add(new FeatureOption() { FeatureId=3,FeatureName= "通知", Describe = "这是一个通知功能",ImageUrl="tongzhi.png" });
  10.     }
  11. }


在MyListView.xaml中，我们将ListView输出集合使用数据模版中的TextCell单元格（很好理解文本格式嘛），其中要显示的文本我将绑定FeatureName属性。
所以我们进行运行测试时，会认为没什么区别。

  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <ContentPage
  3.     xmlns="http://xamarin.com/schemas/2014/forms"
  4.     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  5.     xmlns:local="clr-namespace:PunchInReminder"
  6.     x:Class="PunchInReminder.MyListView">
  7.     <ContentPage.BindingContext>
  8.         <local:MyListViewModel/>
  9.     </ContentPage.BindingContext>
  10.     <ContentPage.Content>
  11.         <StackLayout>
  12.             <ListView ItemsSource="{Binding ItemList}">
  13.                 <ListView.ItemTemplate>
  14.                     <DataTemplate>
  15.                         <TextCell Text="{Binding FeatureName}"/>
  16.                     </DataTemplate>
  17.                 </ListView.ItemTemplate>
  18.             </ListView>
  19.         </StackLayout>
  20.     </ContentPage.Content>
  21. </ContentPage>

图片单元格（ImageCell）


接着我们使用图片类型的单元格进行展示。它的Detail元素将显示图片的详细信息，ImageSource显示图片来源。

  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <ContentPage
  3.     xmlns="http://xamarin.com/schemas/2014/forms"
  4.     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  5.     xmlns:local="clr-namespace:PunchInReminder"
  6.     x:Class="PunchInReminder.MyListView">
  7.     <ContentPage.BindingContext>
  8.         <local:MyListViewModel/>
  9.     </ContentPage.BindingContext>
  10.     <ContentPage.Content>
  11.         <StackLayout>
  12.             <ListView ItemsSource="{Binding ItemList}">
  13.                 <ListView.ItemTemplate>
  14.                     <DataTemplate>
  15.                         <ImageCell
  16.                             Text="{Binding FeatureName}"
  17.                             Detail="{Binding Describe}"
  18.                             ImageSource="{Binding ImageUrl}"
  19.                             />
  20.                     </DataTemplate>
  21.                 </ListView.ItemTemplate>
  22.             </ListView>
  23.         </StackLayout>
  24.     </ContentPage.Content>
  25. </ContentPage>

视图单元格（ViewCell）


可以根据我们自己的设置单元格的样式。

  1. <ListView ItemsSource="{Binding ItemList}">
  2.     <ListView.ItemTemplate>
  3.         <DataTemplate>
  4.             <ViewCell>
  5.                 <Grid>
  6.                     <Label Text="{Binding FeatureName}"></Label>
  7.                     <Label Text="{Binding Describe}"></Label>
  8.                 </Grid>
  9.             </ViewCell>
  10.         </DataTemplate>
  11.     </ListView.ItemTemplate>
  12. </ListView>


我们发现文本被重叠在一起了，接着我们通过VerticalOptions="Center"进行垂直居中。

  1. <Grid>
  2.     <StackLayout VerticalOptions="Center">
  3.         <Label VerticalOptions="Center" Text="{Binding FeatureName}"></Label>
  4.         <Label VerticalOptions="Center" Text="{Binding Describe}"></Label>
  5.     </StackLayout>
  6. </Grid>


然后我们添加好我们的图片，设置图片的宽高，并让他们水平定向。

  1. <StackLayout Orientation="Horizontal">
  2.     <Image Source="{Binding ImageUrl}" WidthRequest="100" HeightRequest="100"></Image>
  3.     <StackLayout VerticalOptions="Center">
  4.         <Label VerticalOptions="Center" Text="{Binding FeatureName}"></Label>
  5.         <Label VerticalOptions="Center" Text="{Binding Describe}"></Label>
  6.     </StackLayout>
  7. </StackLayout>


然后我们添加一个Frame标签设置CornerRadius每行边的弧度为10；设置每行上下间间距为10；
HasUnevenRows ：bool类型，表示列表是否有不均匀的行高，默认值false，设置为true后ListView每行的高度会因为内容不同而提供不同高度。
SeparatorVisibility ：SeparatorVisibility枚举，表示分割栏的显示方式。我们这里设置为不显示。(其实就是中间分隔线)

  1. <ListView ItemsSource="{Binding ItemList}"
  2.           HasUnevenRows="True"
  3.           SeparatorVisibility="None"
  4.           >
  5.     <ListView.ItemTemplate>
  6.         <DataTemplate>
  7.             <ViewCell>
  8.                 <Grid Padding="10">
  9.                     <Frame CornerRadius="10">
  10.                         <StackLayout Orientation="Horizontal">
  11.                             <Image Source="{Binding ImageUrl}" WidthRequest="100" HeightRequest="100"></Image>
  12.                             <StackLayout VerticalOptions="Center">
  13.                                 <Label VerticalOptions="Center" Text="{Binding FeatureName}"></Label>
  14.                                 <Label VerticalOptions="Center" Text="{Binding Describe}"></Label>
  15.                             </StackLayout>
  16.                         </StackLayout>
  17.                     </Frame>
  18.                 </Grid>
  19.             </ViewCell>
  20.         </DataTemplate>
  21.     </ListView.ItemTemplate>
  22. </ListView>


接下来我们可以通过SeparatorColor="Blue"设置分割线的颜色为蓝色，但由于我们这里不显示分割线，所以也看不见。想看见请设置SeparatorVisibility="Default"。然后我们设置字体为大写，并通过HasShadow="True"设置阴影效果。

  1. <ListView ItemsSource="{Binding ItemList}"
  2.           HasUnevenRows="True"
  3.           SeparatorColor="Blue"
  4.           SeparatorVisibility="None"
  5.           >
  6.     <ListView.ItemTemplate>
  7.         <DataTemplate>
  8.             <ViewCell>
  9.                 <Grid Padding="10">
  10.                     <Frame CornerRadius="10" HasShadow="True">
  11.                         <StackLayout Orientation="Horizontal">
  12.                             <Image Source="{Binding ImageUrl}" WidthRequest="100" HeightRequest="100"></Image>
  13.                             <StackLayout VerticalOptions="Center">
  14.                                 <Label VerticalOptions="Center" Text="{Binding FeatureName}" FontSize="Large"></Label>
  15.                                 <Label VerticalOptions="Center" Text="{Binding Describe}" FontSize="Large"></Label>
  16.                             </StackLayout>
  17.                         </StackLayout>
  18.                     </Frame>
  19.                 </Grid>
  20.             </ViewCell>
  21.         </DataTemplate>
  22.     </ListView.ItemTemplate>
  23. </ListView>


我们还可以通过IsPullToRefreshEnabled="True"属性设置刷新效果,还可以通过RefreshControlColor="Red"设置为红色。

  1. <ListView ItemsSource="{Binding ItemList}"
  2.                       HasUnevenRows="True"
  3.                       SeparatorColor="Blue"
  4.                       SeparatorVisibility="None"
  5.                       IsPullToRefreshEnabled="True"
  6.                       >


接着我们还可以设置ListView的头部与尾部。(在ListView标签下一级添加)

  1. <ListView.Header>
  2.     <StackLayout Orientation="Horizontal" HorizontalOptions="Center">
  3.         <Label Text="Product Info" FontSize="Large" TextColor="Gray"></Label>
  4.     </StackLayout>
  5. </ListView.Header>
  6. <ListView.Footer>
  7.     <StackLayout Orientation="Horizontal" HorizontalOptions="Center">
  8.         <Label Text="Load More" FontSize="Large" TextColor="Gray"></Label>
  9.     </StackLayout>
  10. </ListView.Footer>


接下来我们还可以添加删除与修改选项。

  1. <StackLayout VerticalOptions="Center" HorizontalOptions="EndAndExpand">
  2.     <Image Source="edit.png" WidthRequest="30" HeightRequest="30"></Image>
  3.     <Image Source="sanchu.png" WidthRequest="30" HeightRequest="30"></Image>
  4. </StackLayout>


我们可以在我们的右上方添加Add标签。

  1. <ContentPage.ToolbarItems>
  2.     <ToolbarItem Text="Add"/>
  3. </ContentPage.ToolbarItems>

注意：需要在App.xaml.cs有导航栏包裹。

  1. MainPage = new NavigationPage(new MyListView());

欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739

评价

是伍尚金哇_v

2020/7/8 16:28:43

秀儿

回复
剑轩:@是伍尚金哇_v这个拿来整个啥音乐播放还可以

2020/7/8 19:39:59 回复

瑾语

2020/7/10 11:06:41

好看哎

回复

Xamarin： android.permission.CALL_PHONE 的权限问题
写个电话拨号器，很简单就一个Edittext和一个button,用来输入号码并且点击按钮拨打电话，但是写好以后报的是安全错误，我上...

Xamarin 开发环境注意事项
Xamarin 开发环境注意事项[TOC] 配置Android SDK创建一个Blank的Xamarin项目，打开Open Android SDK Manager管理，添加7.0...

Xamarin.Forms UI 与 XAML的简单应用(一)
Xamarin.Forms UI 与 XAML的简单应用(一)[TOC] XAML简介XAML代表可扩展应用程序标记语言，你可以以声明式定义到你的用户界...

Xamarin.Forms MVVM 与 XAML(二)
Xamarin.Forms MVVM 与 XAML（二）[TOC] MVVM简介MVVM是Model-View-View-Model的简写。它与常常使用的MVC有些相似。Model...

Xamarin.Forms 导航栏 Navigation (三)
Xamarin.Forms 导航栏 Navigation (三)[TOC] 添加导航栏一个常规的App是由多个Page组成的，出现多个Page就会涉及页面跳转...

Xamarin.Forms Label
Xamarin.Forms Label[TOC] 简介与属性列表标签用于显示单行文本元素以及文本的多行块。（下面是相关常用属性列表） ...

Xamarin.Forms Entry 文本框
Xamarin.Forms Entry 文本框[TOC] Entry简介Xamarin.Forms Entry 控件允许对单行文本进行编辑。 本文演示了如何为 Entry ...

Xamarin.Forms Button
Xamarin.Forms Button[TOC] Button标签就是按钮标签。下面将列出常用属性： 属性与事件 描述 Text 获取或...

Xamarin.Forms Image
Xamarin.Forms Image[TOC] Image标签简单来讲就是图片标签，我们有四种创建图片来源的方式：本地图片加载、后台图片定义、...

c winform ListView显示数据
这样一个小小的问题坑了我好久啊....................好多年没有用winfrom了，居然因为一个listview显示数据问题坑了那么那...

android 漂亮的ListView
效果如下：首先在drawable下定义选择器shape_bg_listview.xml 实现圆角：&lt;?xmlversion=&quot;1.0&quot;encoding=&quot;...
这一世以无限游戏为使命！
博主信息
排名
2
文章
634
粉丝
44
评论
93
文章类别
最新文章
最新评价
docker中Sware集群与service
尘叶心繁 : 想学呀！我教你呀
一个bug让程序员走上法庭 索赔金额达400亿日元
叼着奶瓶逛酒吧 : 所以说做程序员也要懂点法律知识
.net core 塑形资源
剑轩 : 收藏收藏
映射AutoMapper
剑轩 : 好是好，这个对效率影响大不大哇,效率高不高
ASP.NET Core 服务注册生命周期
剑轩 : http://www.tnblog.net/aojiancc2/article/details/167
关于我们
ICP备案 ：渝ICP备18016597号-1
网站信息：2018-2025TNBLOG.NET
技术交流：群号656732739
联系我们：contact@tnblog.net
公网安备：50010702506256
欢迎加群
欢迎加群交流技术