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

Posted 2020-08-02 CloudTech

Win10 IoT 使用C#创建基于XAML的UI程序，MVVM框架。分别使用Remote Machine、Windows IoT Core Web Management、Power Shell命令 三种方式部署到 Raspberry。

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
        [e-mail]-->
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <TextBlock Foreground="LightBlue" Text="[e-mail]"></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
    //[e-mail]
    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程序和使用三种方式部署的过程就完成了，如果对代码有优化的建议，欢迎留言或发邮件给我([e-mail])。也可以扫描下面的二维码加我的微信号查看以前的文章。

项目源码 GitHub https://github.com/CloudTechx/CloudTechIot 的 CloudTechIot1dot5 目录下。

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