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

简介: 原文:Win10 IoT C#开发 2 - 创建基于XAML的UI程序 及 应用的三种部署方法Windows 10 IoT Core 是微软针对物联网市场的一个重要产品,与以往的Windows版本不同,是为物联网设备专门设计的,硬件也不仅仅限于x86架构,同时可以在ARM架构上运行。
原文: 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按钮创建项目。

修改主界面的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

目录
相关文章
|
13天前
|
前端开发 编解码 数据格式
浅谈响应式编程在企业级前端应用 UI 开发中的实践
浅谈响应式编程在企业级前端应用 UI 开发中的实践
14 0
浅谈响应式编程在企业级前端应用 UI 开发中的实践
|
29天前
|
Java 调度 C#
C#学习系列相关之多线程(一)----常用多线程方法总结
C#学习系列相关之多线程(一)----常用多线程方法总结
|
29天前
|
C#
C#学习相关系列之数组---常用方法使用(二)
C#学习相关系列之数组---常用方法使用(二)
|
1月前
|
Web App开发 数据采集 前端开发
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
15 0
|
1月前
|
XML 存储 数据格式
SAP UI5 控件 customData 属性的应用介绍
SAP UI5 控件 customData 属性的应用介绍
29 0
|
1月前
|
存储 C# 数据库
C# 生成唯一ID,有哪些方法?
【2月更文挑战第12天】
143 0
|
2月前
|
Web App开发 前端开发 JavaScript
乱花渐欲迷人眼 - 让 SAP UI5 应用的日志输出不再素面朝天
乱花渐欲迷人眼 - 让 SAP UI5 应用的日志输出不再素面朝天
45 0
|
2月前
|
Web App开发 JSON JavaScript
SAP UI5 应用程序小技巧 - 一键将 JSON 对象导出成本地 json 文件
SAP UI5 应用程序小技巧 - 一键将 JSON 对象导出成本地 json 文件
24 0
|
2月前
让 SAP UI5 应用的日志打印变得五彩缤纷试读版
让 SAP UI5 应用的日志打印变得五彩缤纷试读版
97 2
|
9天前
|
XML 开发工具 Android开发
构建高效的安卓应用:使用Jetpack Compose优化UI开发
【4月更文挑战第7天】 随着Android开发不断进化,开发者面临着提高应用性能与简化UI构建流程的双重挑战。本文将探讨如何使用Jetpack Compose这一现代UI工具包来优化安卓应用的开发流程,并提升用户界面的流畅性与一致性。通过介绍Jetpack Compose的核心概念、与传统方法的区别以及实际集成步骤,我们旨在提供一种高效且可靠的解决方案,以帮助开发者构建响应迅速且用户体验优良的安卓应用。

热门文章

最新文章