且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

Win10 IoT C#开发 2 - 创建基于XAML的UI程序 及 应用的三种部署方法

更新时间:2022-10-02 16:37:38

原文:Win10 IoT C#开发 2 - 创建基于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按钮创建项目。

Win10 IoT C#开发 2 - 创建基于XAML的UI程序 及 应用的三种部署方法

修改主界面的MainPage.xaml文件,在中间位置加入TextBlock标签用于显示启动时间。(XAML是eXtensible Application Markup Language的英文缩写,在WPF技术中用以定义界面样式,并可以实现MVVM结构,Windows Universal Project 中的XAML相当于WPF中的一个子集提供了一部分功能,XAML的内容比较多我们会在后面的章节中详细说明)

Win10 IoT C#开发 2 - 创建基于XAML的UI程序 及 应用的三种部署方法

这里为了简便把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显示器。

Win10 IoT C#开发 2 - 创建基于XAML的UI程序 及 应用的三种部署方法

接通电源待系统启动完成后显示器上会显示当前IoT设备的IP地址。

Win10 IoT C#开发 2 - 创建基于XAML的UI程序 及 应用的三种部署方法

下面我们来部署IoT程序

第一种方法 : Remote Machine 部署

在 Visual Studio 2015 的工具栏中选择 Remote Machine 进行调试,IP地址输入设备对应地址。点击运行后会自动部署到设备上。

Win10 IoT C#开发 2 - 创建基于XAML的UI程序 及 应用的三种部署方法

Win10 IoT C#开发 2 - 创建基于XAML的UI程序 及 应用的三种部署方法

程序启动完成显示器显示预期界面。

Win10 IoT C#开发 2 - 创建基于XAML的UI程序 及 应用的三种部署方法

第二种方法:Windows IoT Core Web Management 部署

首先要将程序打包,Visual Studio 2015 的解决方案浏览器中右击要打包的项目,在Store菜单项中选择Create App Packages。

Win10 IoT C#开发 2 - 创建基于XAML的UI程序 及 应用的三种部署方法

在询问是否上传至Windows Store时选择No(我们现在还用不到这个功能),Generate app bundle一项选择Never。

Win10 IoT C#开发 2 - 创建基于XAML的UI程序 及 应用的三种部署方法

点击Next按钮后开始编译文件。编译完成后显示输出路径。

Win10 IoT C#开发 2 - 创建基于XAML的UI程序 及 应用的三种部署方法

打开浏览器输入IoT设备的IP地址和端口号8080进入 Windows IoT Core Web Management 登录界面 (后面我们会有文章专门介绍 Windows IoT Core Web Management),输入初始用户名 Administrator 和密码 p@ssw0rd 进入主界面。

Win10 IoT C#开发 2 - 创建基于XAML的UI程序 及 应用的三种部署方法

在左侧菜单中选择Apps菜单项,App Manager面板中会显示安装的程序及运行的程序等信息,最下面是安装App功能。

App package在刚才的发布目录下选择.appx文件。

Win10 IoT C#开发 2 - 创建基于XAML的UI程序 及 应用的三种部署方法

点击Go按钮开始安装程序,安装结束后在Installed apps中选择刚才安装的应用,点击Start按钮启动程序,程序启动完成显示器显示预期界面。点击Set Default按钮会把程序设置为默认程序,每次系统启动后会默认启动。

Win10 IoT C#开发 2 - 创建基于XAML的UI程序 及 应用的三种部署方法

Win10 IoT C#开发 2 - 创建基于XAML的UI程序 及 应用的三种部署方法

第三种方法:Power Shell 命令部署

首先将程序打包,方法同第二种方法的打包过程。

Win10 IoT默认支持FTP,使用FTP客户端将刚才生成的程序目录上传至Win10 IoT的根目录下。

Win10 IoT C#开发 2 - 创建基于XAML的UI程序 及 应用的三种部署方法

使用管理员权限启动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

Win10 IoT C#开发 2 - 创建基于XAML的UI程序 及 应用的三种部署方法

找到刚才上传的文件夹,使用cd命令进入文件夹,找到.appx文件使用Add-AppxPackage命令安装,这里我们执行Add-AppxPackage CloudTechIot1dot5_1.0.2.0_ARM.appx。

Win10 IoT C#开发 2 - 创建基于XAML的UI程序 及 应用的三种部署方法

程序启动完成显示器显示预期界面。

Win10 IoT C#开发 2 - 创建基于XAML的UI程序 及 应用的三种部署方法

到这里创建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

Win10 IoT C#开发 2 - 创建基于XAML的UI程序 及 应用的三种部署方法