Win10 IoT C#開發 1.5 - 建立基於XAML的UI程式 及 應用的三種部署方法

標籤：

Windows 10 IoT Core 是微軟針對物聯網市場的一個重要產品，與以往的Windows版本不同，是為物聯網裝置專門設計的，硬體也不僅僅限於x86架構，同時可以在ARM架構上運行。

上一章我們講了Raspberry安裝Win10 IoT系統及搭建Visual Studio 2015開發環境的方法(http://www.cnblogs.com/cloudtech/p/5562120.html) , 這次我們來看如何將開發好Win10 IoT程式部署到Raspberry的環境上。

分別使用Remote Machine、Windows IoT Core Web Management、Power Shell命令 三種方式部署。

準備工作:

Raspberry Pi 2

刷好Win 10 IoT Core系統的 Raspberry Pi 2

部署Visual Studio 2015開發環境的PC

支援HDMI的顯示器

 

目標：通過顯示應用程式的介面來證明部署成功。

首先建立一個Universal Windows應用程式，開啟 VS 2015 點擊 New Project 在Visual C# -> Windows -> Universal 中找到 Blank App (Universal Windows) 項目模板，選中模板輸入項目名稱後點擊OK按鈕建立項目。

修改主介面的MainPage.xaml檔案，在中間位置加入TextBlock標籤用於顯示啟動時間。(XAML是eXtensible Application Markup Language的英文縮寫，在WPF技術中用以定義介面樣式，並可以實現MVVM結構，Windows Universal Project 中的XAML相當於WPF中的一個子集提供了一部分功能，XAML的內容比較多我們會在後面的章節中詳細說明)

這裡為了簡便把MainPage.cs作為ViewModel，來實現INotifyPropertyChanged介面完成一個簡易的MVVM架構。

完整代碼:

<Page    x:Class="CloudTechIot1dot5.MainPage"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:CloudTechIot1dot5"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    mc:Ignorable="d">    <Page.Resources>        <Style TargetType="TextBlock">            <Setter Property="HorizontalAlignment" Value="Center"></Setter>            <Setter Property="VerticalAlignment" Value="Center"></Setter>            <Setter Property="FontSize" Value="60"></Setter>            <Setter Property="FontWeight" Value="Bold"></Setter>        </Style>    </Page.Resources>    <!--http://www.cnblogs.com/cloudtech        [email protected]>    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">        <Grid.RowDefinitions>            <RowDefinition></RowDefinition>            <RowDefinition></RowDefinition>            <RowDefinition></RowDefinition>        </Grid.RowDefinitions>        <TextBlock Foreground="LightBlue" Text="[email protected]"></TextBlock>        <TextBlock Grid.Row="1" Foreground="Red" Text="{Binding CurrentTime,UpdateSourceTrigger=PropertyChanged}"></TextBlock>        <TextBlock Grid.Row="2" Foreground="Yellow" Text="Remote Machine"></TextBlock>    </Grid></Page>

 

namespace CloudTechIot1dot5{    //http://www.cnblogs.com/cloudtech    //[email protected]    public sealed partial class MainPage : Page, INotifyPropertyChanged    {        public event PropertyChangedEventHandler PropertyChanged;        private string _currentTime;        public string CurrentTime        {            get            {                return _currentTime;            }            set            {                _currentTime = value;                OnProperityChanged("CurrentTime");            }        }        public MainPage()        {            this.InitializeComponent();            this.DataContext = this;            CurrentTime = DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss");        }        public void OnProperityChanged(string propertyName)        {            PropertyChanged?.Invoke(propertyName, new PropertyChangedEventArgs(propertyName));        }    }}

為Raspberry串連電源及網線，串連HDMI顯示器。

接通電源待系統啟動完成後顯示器上會顯示當前IoT裝置的IP地址。

下面我們來部署IoT程式

第一種方法 : Remote Machine 部署

在 Visual Studio 2015 的工具列中選擇 Remote Machine 進行調試，IP地址輸入裝置對應地址。點擊運行後會自動部署到裝置上。

程式啟動完成顯示器顯示預期介面。

第二種方法：Windows IoT Core Web Management 部署

首先要將程式打包，Visual Studio 2015 的解決方案瀏覽器中右擊要打包的項目，在Store功能表項目中選擇Create App Packages。

在詢問是否上傳至Windows Store時選擇No(我們現在還用不到這個功能)，Generate app bundle一項選擇Never。

點擊Next按鈕後開始編譯檔案。編譯完成後顯示輸出路徑。

開啟瀏覽器輸入IoT裝置的IP地址和連接埠號碼進入 Windows IoT Core Web Management 登入介面 (後面我們會有文章專門介紹 Windows IoT Core Web Management)，輸入初始使用者名稱 Administrator 和密碼 [email protected] 進入主介面。

在左側菜單中選擇Apps功能表項目，App Manager面板中會顯示安裝的程式及啟動並執行程式等資訊，最下面是安裝App功能。

App package在剛才的發布目錄下選擇.appx檔案。

點擊Go按鈕開始安裝程式，安裝結束後在Installed apps中選擇剛才安裝的應用，點擊Start按鈕啟動程式，程式啟動完成顯示器顯示預期介面。點擊Set Default按鈕會把程式設定為預設程式，每次系統啟動後會預設啟動。

第三種方法：Power Shell 命令部署

首先將程式打包，方法同第二種方法的打包過程。

Win10 IoT預設支援FTP，使用FTP用戶端將剛才產生的程式目錄上傳至Win10 IoT的根目錄下。

使用管理員權限啟動PowerShell，輸入如下命令串連Win10 IoT並進入目錄。

net start WinRM
Set-Item WSMan:\localhost\Client\TrustedHosts -Value 192.168.1.2
Enter-PsSession -ComputerName 192.168.1.2 -Credential 192.168.1.2\Administrator

找到剛才上傳的檔案夾，使用cd命令進入檔案夾，找到.appx檔案使用Add-AppxPackage命令安裝，這裡我們執行Add-AppxPackage CloudTechIot1dot5_1.0.2.0_ARM.appx。

程式啟動完成顯示器顯示預期介面。

到這裡建立Win10 IoT UI程式和使用三種方式部署的過程就完成了，如果對代碼有最佳化的建議，歡迎留言或發郵件給我([email protected])。也可以掃描下面的二維碼加我的號查看以前的文章。

項目源碼 GitHub https://github.com/CloudTechx/CloudTechIot 的 CloudTechIot1dot5 目錄下。

Win10 IoT C#開發 2 - GPIO Pin 控制發光二極體 http://www.cnblogs.com/cloudtech/p/5617902.html

Win10 IoT C#開發 1.5 - 建立基於XAML的UI程式 及 應用的三種部署方法