Xamarin.Forms Views介绍(三)

Picker使用

Picker是一个列表选择器。点击Picker弹出一个选择列表,供用户选择,不同平台渲染效果不同。

Items展开效果

Picker属性

  • Title :定义Picker的标题,起到提示说明作用。
    不同平台Title渲染效果不同,Windows Phone会单独提供一个Label显示Title。
    Title展示效果
  • TextColor :选中某项后,文本显示在Picker上的颜色。
  • ItemsIList<string>类型 ,表示Picker提供的可选集合,XAML中定义Items借助<x:String>节点。
  • SelectedIndex :int类型,表示选择项索引,由0开始,默认值-1。

XAML定义:

<Picker Title="Picker Title" TextColor="Aqua" HorizontalOptions="Center" VerticalOptions="Center">
    <Picker.Items>
        <x:String>Item 1</x:String>
        <x:String>Item 2</x:String>
        <x:String>Item 3</x:String>
        <x:String>Item 4</x:String>
    </Picker.Items>
    <Picker.SelectedIndex>
        2
    </Picker.SelectedIndex>
</Picker>

同时赋值Items和SelectedIndex属性,SelectedIndex赋值应再Items之后。

Picker事件

  • SelectedIndexChanged :SelectIndex值发生改变时触发,响应SelectedIndexChanged事件时应对SelectIndex的-1值进行判断。

DatePicker使用

DatePicker提供日期选择功能。

DatePicker不同平台效果

DatePicker属性

  • Date :DateTime类型,DatePicker当前日期。
  • Format :string类型,设置所选日期显示格式。
  • MaximumDate :DatePicker最大可选日期,默认值1900-1-1。
  • MinimumDate :DatePicker最小可选日期,默认值2100-12-31。
  • TextColor :同Picker属性。

Date、MinimumDate、MaximumDate不同赋值方式参考本文示例

DatePicker事件

  • DateSelected :用户选择新日起即Date发生改变时触发。

XAML定义示例:

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
        xmlns:local="clr-namespace:views" 
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        x:Class="views.viewsPage">
    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness" 
        iOS="0, 20,  0, 0" />
    </ContentPage.Padding>

    <DatePicker TextColor="Red" Format="yyyy-MM:dd" MaximumDate="2022-2-22" Date="{x:Static sys:DateTime.Today}">
        <DatePicker.MinimumDate>
            <sys:DateTime x:FactoryMethod="Parse">
               <x:Arguments>
                  <x:String>2000-1-1</x:String>
               </x:Arguments>
            </sys:DateTime>
         </DatePicker.MinimumDate>
    </DatePicker>

</ContentPage>

这里提供了整个XAML页面的定义代码。通过x:Static调用DateTime的静态属性为Date赋值,x:FactoryMethod调用DateTime的静态方法为MinimumDate赋值,要访问DateTime类,应该在跟节点ContentPage中添加System命名空间定义xmlns:sys="clr-namespace:System;assembly=mscorlib"


TimePicker使用

TimePicker提供时间选择功能。

TimePicker不同平台效果

TimePicker属性

  • Time :TimeSpan类型,TimePicker当前日期。
  • Format :string类型,设置所选事件显示格式。。
  • TextColor :同Picker属性。

XAML定义参考DatePicker。

TimePicker事件

TimePicker并没有自定义事件,不知道为什么没有提供TimeSelected事件。如何监听TimePicker的Time改变事件?PropertyChanged事件同样可以监听Time的变化,PropertyChanged事件由BindableObject提供,当BindableProperty类型属性改变时会触发PropertyChanged事件。

timePicker.PropertyChanged += (sender, e) =>
{
    if (e.PropertyName.Equals("Time"))
    {
        DisplayAlert("Time Alert", $"{timePicker.Time.ToString()}", "OK");
    }
};
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容