Platform.Uno介紹

編者語：Xamarin國內很多人說缺乏可用的實例，我在寫書過程中在完善一些常用場景的例子，希望幫到大家。Build 2018結束一周了，善友問我要不要談談Xamarin的一些變化，但礙於時間有限一直沒有付諸行動。想想總得寫點什么給大家，其實之前也談過一些，具體就等日后我的書吧。今天我反而想談一個在Build上一個引起關注的框架Platform.Uno.

 

      XAML在微軟推了快10年，主要應用場景是在WPF , Silverlight, UWP ,當然也擴展到Xamarin,Forms. 如果你有碰過Xamarin.Forms的開發，而你又是一個傳統的WPF/UWP程序員，你會發現它們的語法有很多的不同。就以文本標簽的控件來說，就有不同的表述，Xamarin.Forms中表述是這樣的<Lable />,而在UWP/WPF中就是<TextBlock />，更奇怪的是布局Xamarin.Forms是<StackLayout /> 而在UWP/WPF 中就是<StackPanel />.這種語法差異，讓開發人員有很大的疑問，為何一個XAML，有不同表述呢？特別是你是一個傳統的WPF/UWP程序員，你去學習Xamarin.Forms就像一個語法堂一樣.不少人一直期待XAML Standad盡快出現，從去年Build到現在XAML Standard在我眼里進展是緩慢的, 如果你感興趣可以去微軟官方文檔看看(點擊進入).   不少人看到Xamarin.Forms，就不由自主地想把自己原來的UWP/WPF界面直接遷移過去，可是因為上面的原因導致失敗了，這也讓很大部分優秀的XAML程序員放棄。

       
       Platform.Uno(進入官網)就是這群優秀XAML程序員的大救星了。 Platform.Uno是一個第三方的框架，他可以讓你的UWP XAML無縫接入iOS/Androd,更可以延申到WebAssembly(我一直覺得這就是Silverlight的新變體)。換句話說你可以把不少優秀的XAML自定義控件和一些XAML的特性引入到iOS,Android開發中，我們先來看看官方的一個架構圖
           
      Platform.Uno其實是把UWP XAML通過自身封裝好的Uno.UI轉換成不同平台的界面，並通過Xamarin實現跨平台的代碼遷移。一句話就是實現了寫Win10 UWP就可以生成iOS/Android/WebAssembly應用了(當然你如果要訪問底層API還是需要用到Xamarin的特性的)。
      這是官方針對Platform.Uno，和主流的開發工具的比較，你可以看到Platform.Uno的界面開發是全套全面的XAML語言，並且把我一直喜歡用的Trigger屬性帶回來了。

       

      如果你要做Platform.Uno的開發你需要去https://github.com/nventive/Uno.QuickStart  下載Visual Studio 模板，安裝成功后就可以創建基於Platform.Uno項目了。
       

       接下來會生成一個Solution,包括iOS/UWP/Android/WebAssembly的項目，更有一個Shared Project是用來放共享的XAML和一些圖片資源文件。
       
       我們先來構建一個簡單的Model
       Video.cs

using System;
using System.Collections.Generic;
using System.Text;
using Uno;

namespace HiUnoApp.Shared.Model
{
#if __ANDROID__ || __IOS__ || __WASM__
    [Preserve]
#endif
    public class Video
    {
        public int VideoID { get; set; }
        public string VideoName { get; set; }
        public string Teacher { get; set; }
        public string VideoImage { get; set; }
    }

    public class VideoContent
    {
        public static IList<Video> GetVideoList()
        {
            var videos = new List<Video>
            {
                new Video { VideoID = 1, VideoName = "Demo1", Teacher = "A", VideoImage = "http://jpkc.gdou.com/wechatlive/content/img/cover/th1006402.png" },
                new Video { VideoID = 2, VideoName = "Demo2", Teacher = "B", VideoImage = "http://jpkc.gdou.com/wechatlive/content/img/cover/th1006402.png" },
                new Video { VideoID = 3, VideoName = "Demo3", Teacher = "C", VideoImage = "http://jpkc.gdou.com/wechatlive/content/img/cover/th1006402.png" }
            };

            return videos;
        }
    }
}

 

       來關注MainPage.xaml 我們用UWP的xaml來秀一段

<Page
    x:Class="HiUnoApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:HiUnoApp"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:data="using:HiUnoApp.Shared.Model"
    xmlns:toolkit ="using:Uno.UI.Toolkit"
    xmlns:ios="http://uno.ui/ios"
    xmlns:android="http://uno.ui/android"
    xmlns:xamarin="http://uni.ui/xamarin"
    mc:Ignorable="d">

    <Grid Background="Black">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <StackPanel Margin="15,15,15,0">
            <TextBlock Text="Platform.Uno  Demo"
                       FontSize="30" FontWeight="Bold"
                       Foreground="White" />
            <TextBlock Text="Platform.Uno" Foreground="White" />
        </StackPanel>

        <ListView Name="MyListView" Grid.Row="1"
                  SelectionMode="None"
                  HorizontalAlignment="Center"
                  Width="1000"
                  Margin="20"
                  ItemsSource="{Binding}">

            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Margin="8">
                        <Image Source="{Binding VideoImage}"  Width="160" Height="90" />
                        <TextBlock Text="{Binding VideoName}" Foreground="White" HorizontalAlignment="Center" />
                        <TextBlock Text="{Binding Teacher}" Foreground="White" HorizontalAlignment="Center"  />
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

    </Grid>
</Page>

            MainPage.xaml.cs

using HiUnoApp.Shared.Model;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409

namespace HiUnoApp
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();

            DataContext =  VideoContent.GetVideoList();
        }
    }
}

            運行一下，當然先走UWP

 

         

 

       如果你是UWP程序員肯定對下面的操作抱以掌聲，因為接下來你的UWP可以無縫地過度到iOS/Android/WebAssembly中
       

 

 

    

 

 

     可能你會質疑我的例子比較簡單大家可以去看官方的Sample(https://github.com/nventive/Uno.Playground),我這里主要是普及為主. 關於Platform.Uno, 對於Xamarin.Forms有很深的意義，畢竟Win10 UWP程序員其實有不少（或者是隱世），這對在這個生態圈工作的人有了更多工作選擇，通過Platform.Uno去補齊了Xamarin.Forms的XAML缺陷，再通過Xamarin實現跨平台。

       Demo 下載地址：https://github.com/lokinfey/HiPlatformUnoDemo