.NET-3.Xamarin2.学习与总结

Xamarin2

• 前言
• 组件
• • 1.ScrollView
  • 2.ListView控件
• 一、数据绑定
• • 1.基本绑定
  • 2.绑定模式
• 二、Xamarin.Forms 触发器
• 三、MessagingCenter(还是很有意思)
• 四、样式（统一风格）
• • 使用 XAML 样式设置应用样式
  • 使用 Xamarin.Forms CSS 级联样式表
• 五、使用堆叠和选项卡导航创建多页 Xamarin.Forms 应用
• • 1.使用 NavigationPage 实现堆叠导航
  • 2.选项卡导航创建多页
• 推荐好看的组件UI
• • 1.第三方控件推荐[Xamarin Community Toolkit](https://docs.microsoft.com/zh-cn/xamarin/community-toolkit/get-started)
  • 2.[jsuarezruiz/xamarin-forms-goodlooking-UI](https://github.com/jsuarezruiz/xamarin-forms-goodlooking-UI)
  • 3.[FabriBertani/XFShapeAnimatedTransitions](https://github.com/FabriBertani/XFShapeAnimatedTransitions)

---

前言

更加高阶的内容深入学习

---

组件 1.ScrollView

官方文档
ScrollView 是能够滚动其内容的布局。 ScrollView类派生自 Layout 类，默认情况下，它会垂直滚动其内容。 ScrollView只能有一个子级，尽管这可以是其他布局。

2.ListView控件

官方文档
ListView 是用于显示数据列表的视图，特别是需要滚动的长列表。

页眉和页脚
页眉和页脚组件显示在列表的开头和末尾，独立于列表的数据。 页眉和页脚可以绑定到 ListView 的数据源中的单独数据源。
组
可以对中的 ListView 数据进行分组，以便于导航。 组通常是数据绑定的。 以下屏幕截图显示了具有分组数据的 ListView ：
单元
中的 ListView 数据项称为 “单元格”。 每个单元对应于一个数据行。 有一些内置单元可供选择，也可以定义自己的自定义单元。
1.通过请求刷新，用户可以请求 向下移动以刷新内容。
2.上下文操作 允许开发人员指定单个列表项的自定义操作。 例如，你可以在 3.iOS 上实现 “轻扫到操作” 或 “Android 上的长点击操作”。
4.选择 允许开发人员将功能附加到列表项的选择和 deselection 事件。

ItemsSource :
//此属性可接受任何实现 IEnumerable 的集合,用来指定列表中显示的数据
ItemTemplate ：
//定义 ItemsSource 中每
//内置单元格一行的数据模板
TextCell //控件用于显示文本，其中包含可选的第二行详细信息文本。
ImageCell// 控件类似于， TextCell 但在文本左侧包含一个图像。
SwitchCell //控件用于显示和捕获开启/关闭或真/假状态。
EntryCell //控件用于显示用户可编辑的文本数据。
事件
ItemSelected //选择新项时激发。
ItemTapped //点击项时激发。
var listView = new ListView();
            listView.ItemsSource = Constants.Items;
            Content = listView;//重点
//一、数据源
1.简单的数据绑定

      
          
            mono
            monodroid
          
      

//等效于：
var listView = new ListView();
listView.ItemsSource = new string[]{ "mono","monodroid"}
//2.稍微复杂点的数据绑定
//Employee
public class Employee
{
     public string DisplayName { get; set; }
 }
//MainPage.cs
ObservableCollection employees = new ObservableCollection() { new Employee() { DisplayName = "zhouyi" } };
employees.Add(new Employee() { DisplayName = "zzl" });
ObservableCollection names = new ObservableCollection();
foreach (Employee employee in employees)
{
    names.Add(employee.DisplayName);
}
listView.ItemsSource = names;
DisplayAlert("Item Selected", e.SelectedItem.ToString(), "Ok");

    
    
        
            
                
                    
                        
                    
                
            
        
    


//三、定义 ListView 单元格外观
//可通过使用 ViewCell 元素进行自定义。 ViewCell元素可以显示文本和图像，指示真/假状态和接收用户输入
1.TextCell 控件用于显示文本，其中包含可选的第二行详细信息文本。
2.ImageCell 控件类似于， TextCell 但在文本左侧包含一个图像。
3.SwitchCell 控件用于显示和捕获开启/关闭或真/假状态。
4.EntryCell 控件用于显示用户可编辑的文本数据。
5.SwitchCell和 EntryCell 控件更常见地用于的上下文 TableView 中。
//TextCell(Text ,Detail ,TextColor ,DetailColor )
//ImageCell(Text ,Detail,TextColor ,DetailColor,ImageSource  )

//footer、header

    
        
    


    
        
    

一、数据绑定

数据绑定将两个对象的属性链接起来，如此，对某一属性的更改将自动反映在另一个属性中。
官方文档

1.基本绑定

Xamarin.Forms 数据绑定连接两个对象之间的一对属性，其中至少有一个通常是用户界面对象。 这两个对象称为“目标”和“源” ：

“目标”是设置数据要绑定的对象（和属性）。
“源”是数据绑定引用的对象（和属性）。

//一.使用上下文绑定
//BindingContext 属性指定源对象。
//SetBinding 方法指定目标属性和源属性。
 //1.基本代码绑定

 
label.BindingContext = slider;
label.SetBinding(Label.RotationProperty, "Value");
// label.SetBinding(Label.RotationProperty, new Binding("Value", source: slider));//另一种方法
//2.基本 Xaml 绑定1


//3.基本 Xaml 绑定2

       //Scale="{Binding Value, Source={x:Reference slider}}" />第二种
       //第三种
        //
        //

//4.绑定上下文继承


    

    



//5.反向绑定
//Label 是数据绑定源，而 Slider 是目标。 绑定引用 Label 的 Opacity 属性，其默认值为 1。
//Slider 从 Label 的初始 Opacity 值初始化为值 1。 



//6.StringFormat 属性


                      //StringFormat='The Entry text is "{0}"'
//F2 的格式设置规范导致值在显示时会带两个小数位数。

2.绑定模式

使用 BindingMode 枚举的成员指定绑定模式：

Default
TwoWay –数据在源和目标之间的双向
OneWay –数据从源到目标进行
OneWayToSource –数据从目标到源
OneTime – data 从源到目标进行处理，但仅当 BindingContext 更改

//大多数可绑定属性的默认绑定模式都是 OneWay，但以下属性的默认绑定模式为 TwoWay：
//DatePicker 的 Date 属性
//Editor、Entry、SearchBar 和 EntryCell 的 Text 属性
//ListView 的 IsRefreshing 属性
//MultiPage 的 SelectedItem 属性
//Picker 的 SelectedIndex 和 SelectedItem 属性
//Slider 和 Stepper 的 Value 属性
//Switch 的 IsToggled 属性
//SwitchCell 的 On 属性
//TimePicker 的 Time 属性

二、Xamarin.Forms 触发器

触发器

//1.属性触发器 单个组件
//TargetType - 触发器适用的控件类型。
//Property - 要监视的控件上的属性。
//Value-出现监视属性时的值，这会导致触发器激活。
//Setter - Setter 元素的集合，可进行添加且在满足触发条件时使用。 必须指定要设置的 Property 和 Value。

    
        
            
            
        
    

//2.使用 style 应用触发器
//还可将触发器添加到控件、页面或应用程序 ResourceDictionary 中的 Style 声明。 下面的示例声明隐式 style（即未设置 Key）；也就是说，它应用于页面上的所有 Entry 控件。

    
        
    

//3.数据触发器
//当输入为空时，触发器将禁用该按钮。


    
        
            
            
        
    

//4.事件触发器
//触发器操作实现应该：
1.实现泛型 TriggerAction 类，并且泛型参数对应于触发器将应用到的控件类型。 可以使用 VisualElement 之类的超类编写适用于多种控件的触发器操作，或指定 Entry 等控件类型。
2.Invoke重写方法-只要满足触发器条件，就会调用此方法。

    
        
            
        
    

//local:NumericValidationTriggerAction.cs
public class NumericValidationTriggerAction : TriggerAction 
{
	protected override void Invoke (Entry entry)
	{
		double result;
		bool isValid = Double.TryParse (entry.Text, out result);
		entry.TextColor = isValid ? Color.Default : Color.Red;
	}
}
//5.多触发器(我觉得很难)
//触发 Setter 前，所有条件必须为 true。





    
		 
			
				
				
			
				
            
        
    

//生成“全部需要”的多触发器
MultiTriggerConverter.cs
public class MultiTriggerConverter : IValueConverter
{
	public object Convert(object value, Type targetType, 
		object parameter, CultureInfo culture)
	{		
		if ((int)value > 0)
			return true;	// data has been entered
		else
			return false;	// input is empty
	}

	public object ConvertBack(object value, Type targetType, 
		object parameter, CultureInfo culture)
	{
		throw new NotSupportedException ();
	}
}
MultiTriggerXaml.xaml

	
     	
     
 



    
    
		 
			
				
				
			
				
            
        
    


//6.EnterActions 和 ExitActions
//全局的

    
        
    

//单个

	
		
            
                
            

            
                
            
        
	

FadeTriggerAction.cs
public class FadeTriggerAction : TriggerAction
{
    public int StartsFrom { set; get; }

    protected override void Invoke(VisualElement sender)
    {
        sender.Animate("FadeTriggerAction", new Animation((d) =>
        {
            var val = StartsFrom == 1 ? d : 1 - d;
            // so i was aiming for a different color, but then i liked the pink :)
            sender.BackgroundColor = Color.FromRgb(1, val, 1);
        }),
        length: 1000, // milliseconds
        easing: Easing.Linear);
    }
}
//7.比较状态触发器


    
        
    
    
        
            
                
                
            
        
    

三、MessagingCenter(还是很有意思)

MessagingCenter

发布-订阅模式是一种消息传递模式，在此模式下，发布者可在无需知道任何接收方（称为订阅方）的情况下发送消息。 同样，订阅方可在不了解任何发布方的情况下侦听特定消息。

//发布方使用 MessagingCenter.Send 方法发送消息，而订阅方使用 
//MessagingCenter.Subscribe 方法侦听消息。 此外，订阅方还可以使用 
//MessagingCenter.Unsubscribe 方法取消消息订阅（如果需要）。

//MainPage.xaml

    
    
    
    
    

//MainPage.cs
 public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        BindingContext = new MainPageViewModel();//这里很是重点。

        // Subscribe to a message (which the ViewModel has also subscribed to) to display an alert
        MessagingCenter.Subscribe(this, "Hi", async (sender, arg) =>
        {
            await DisplayAlert("Message received", "arg=" + arg, "OK");
        });
    }

    void OnSayHiButtonClicked(object sender, EventArgs e)
    {
        MessagingCenter.Send(this, "Hi");
    }

    void OnSayHiToJohnButtonClicked(object sender, EventArgs e)
    {
        MessagingCenter.Send(this, "Hi", "John");
    }

    async void OnUnsubscribeButtonClicked(object sender, EventArgs e)
    {
        MessagingCenter.Unsubscribe(this, "Hi");
        await DisplayAlert("Unsubscribed", "This page has stopped listening, so no more alerts. However, the ViewModel is still receiving messages.", "OK");
    }
}

MainPageViewModel.cs
public class MainPageViewModel
{
    public ObservableCollection Greetings { get; set; }

    public MainPageViewModel()
    {
        Greetings = new ObservableCollection();
        MessagingCenter.Subscribe(this, "Hi", (sender) =>
        {
            Greetings.Add("Hi");
        });
        MessagingCenter.Subscribe(this, "Hi", (sender, arg) =>
        {
            Greetings.Add("Hi " + arg);
        });
    }
}

四、样式（统一风格）

官方文档

使用 XAML 样式设置应用样式
传统上， Xamarin.Forms 设置应用的样式是使用 Style 类将属性值集合分组到一个对象中，然后可应用于多个可视元素实例。 这有助于减少重复标记，并允许更轻松地更改应用外观。

使用 设置应用样式级联样式表
Xamarin.Forms 支持使用 CSS 设置级联样式表 (设置) 。 样式表由规则列表组成，每个规则由一个或多个选择器以及声明块组成。

使用 XAML 样式设置应用样式

全局样式<页面级别<控件级别
通过对控件类型进行分组和设置属性来创建自定义控件外观的样式。

• 显式样式
  显式样式是通过设置 控件的属性有选择地应用于控件的样式。

• 隐式样式
  隐式样式是指所有相同 的控件使用的样式，无需每个控件都引用该样式。

• 全局样式
  可以通过将样式添加到应用程序的 ResourceDictionary 来全局使用样式。 这有助于避免跨页面或控件的样式的重复。

• 样式继承
  样式可以从其他样式继承，以减少重复并实现重复使用。

• 动态样式
  样式不会对属性更改做出响应，并在应用程序持续时间内保持不变。 但是，应用程序可以使用动态资源在运行时动态响应样式更改。

• 设备样式
  Xamarin.Forms在类中 包含六个Xamarin.Forms样式，称为设备样式。 所有六种样式只能应用 Label 于实例。

• 样式类
  Xamarin.Forms 样式类可以将多个样式应用于控件，而无需采用样式继承。

//一、显示样式
//页面级别

	
     
     
 

//控件级别

    
        
            
                                 
            
        
        
    


//二、隐式样式
//页面级别

    
        
    


    
        
        
        
           
            
    //不接受样式

//CustomEntry.cs
public class CustomEntry : Entry
{
}
//控件级别

    
        
            
                
            
        
        
    

//将样式应用于派生类型

//将此样式置于页面级别ResourceDictionaryButton将导致它应用于页面上的所有实例，以及从 派生的任何控件Button。 
//但是，如果 ApplyToDerivedTypes 属性保持未设置，则样式将仅应用于 Button 实例。
//三、全局样式
//应用程序级别app.xaml

      
	         
          
          
         


//四、样式继承
//遵循继承链
//应用程序级别资源只能继承自其他应用程序级别资源。
//页面级别资源可以继承自应用程序级别资源和其他页面级资源。
//控制级别资源可以从应用程序级别资源、页面级别资源和其他控制级别资源继承。
//属性设置为 BasedOn 实例实现的 Style

    
        
        
        
    


    
        
        
    

//遵循继承链

    
        
    


    
        
            
                
                
            
        
        ...
    

//五、动态样式

     
         
         
         
         ...
     
 
 
     
         
         ...
     
 
 DynamicStylesPage .cs
 public partial class DynamicStylesPage : ContentPage
{
    bool originalStyle = true;

    public DynamicStylesPage ()
    {
        InitializeComponent ();
        Resources ["searchBarStyle"] = Resources ["blueSearchBarStyle"];
    }

    void OnButtonClicked (object sender, EventArgs e)
    {
        if (originalStyle) {
            Resources ["searchBarStyle"] = Resources ["greenSearchBarStyle"];
            originalStyle = false;
        } else {
            Resources ["searchBarStyle"] = Resources ["blueSearchBarStyle"];
            originalStyle = true;
        }
    }
}
//动态样式继承
//使用 属性无法从动态样式派生 Style.BasedOn 样式。 相反， Style 类包含 BaseResourceKey 属性，该属性可设置为其值可能会动态更改的字典键。

    
        
            
            
            
            
            ...
        
    
    
        
            
            ...
        
    

//六、设备样式
//在 Device 类中包含六种动态样式，称为设备样式。
//BodyStyle
//CaptionStyle
//ListItemDetailTextStyle
//ListItemTextStyle
//SubtitleStyle
//TitleStyle

    
        
            
        
    
    
        
            
            
            
            
            
            
            
            
        
    

//七、样式类
1.创建样式类

    
        

            

        

                
    
    
               
        
        
    

使用 Xamarin.Forms CSS 级联样式表 五、使用堆叠和选项卡导航创建多页 Xamarin.Forms 应用

官方文档

1.使用 NavigationPage 实现堆叠导航

导航堆栈上还必须至少有一个页面。 NavigationPage 类提供了一个构造函数，该函数使用堆栈的初始或根页面参数。 在此代码中，我们将传递 HomePage 类的一个实例作为要显示的初始页面，然后将新的 NavigationPage 设置为应用的初始页面。

//提供的方法，，模式导航的方法（需要实践去理解）
Task PushAsync(Page page, bool animated);
Task PushAsync(Page page); // 'animated' is true
Task PopAsync(bool animated);
Task PopAsync(); // 'animated' is true
-------------------------
IReadOnlyList ModalStack { get; }
Task PushModalAsync(Page page);
Task PopModalAsync();
IReadOnlyList NavigationStack { get; }
Task PushAsync(Page page);
Task PopAsync();
//app.cs根页面
 MainPage = new NavigationPage(new MainPage());
//调用方法，调用模式导航方法
 await this.Navigation.PushAsync(new Page1());
 await this.Navigation.PopAsync();
 await Navigation.PushModalAsync(new EditPage());
 await Navigation.PopModalAsync();
//MainPage()页面

    ...
    
    
    
    

public MainPage()
{
    InitializeComponent();
//初始化添加导航
    btnSunrise.Clicked += (s, e) => Navigation.PushAsync(new SunrisePage());
    btnMoonPhase.Clicked += (s, e) => Navigation.PushAsync(new MoonPhasePage());
    btnSpaceInfo.Clicked += (s, e) => Navigation.PushAsync(new AstronomicalBodiesPage());
    btnAbout.Clicked += (s, e) => Navigation.PushAsync(new AboutPage());
}

//处理设备后退按钮（用处巨大）
//替代该方法可以让我们在页面关闭前完成一些工作。 由我们决定应执行的操作。
protected override bool OnBackButtonPressed()//方法重写
{
    ...
}

2.选项卡导航创建多页

小案例

推荐好看的组件UI 1.第三方控件推荐Xamarin Community Toolkit

许多好用得组件值得一试

2.jsuarezruiz/xamarin-forms-goodlooking-UI

这个仓库集成了许多多好看的UI仓库的总结与介绍。

3.FabriBertani/XFShapeAnimatedTransitions

这个仓库是有关页面切换的动画效果（值得参考，可以当做轮子来使用）