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

Windows 10 IoT Core 是微軟針對物聯網市場的一個重要產品,與以往的Windows版本不一樣,是爲物聯網設備專門設計的,硬件也不單單限於x86架構,同時能夠在ARM架構上運行。html

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

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

準備工做:

Raspberry Pi 2express

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

部署Visual Studio 2015開發環境的PC微信

支持HDMI的顯示器架構

 

目標:經過顯示應用程序的界面來證實部署成功。app

首先建立一個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
        cloudtechesx@gmail.com-->
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <TextBlock Foreground="LightBlue" Text="cloudtechesx@gmail.com"></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
    //cloudtechesx@gmail.com
    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地址和端口號8080進入 Windows IoT Core Web Management 登陸界面 (後面咱們會有文章專門介紹 Windows IoT Core Web Management),輸入初始用戶名 Administrator 和密碼 p@ssw0rd 進入主界面。

在左側菜單中選擇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程序和使用三種方式部署的過程就完成了,若是對代碼有優化的建議,歡迎留言或發郵件給我(cloudtechesx@gmail.com)。也能夠掃描下面的二維碼加個人微信號查看之前的文章。

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

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

相關文章
相關標籤/搜索