win10iotc#开发1.5-创建基于xaml的ui程序及应用的三种部署方法

CloudTech CloudTech     2022-07-31     179

关键词:

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

基于wpf&prism&avalonedit的xaml轻量编辑器(代码片段)

...量编辑器1.写在前面    一直从事WPF的相关开发工作,有时为了尝试或演示某些仅仅基于XAML的效果时,但又不想大动干戈打开VS去创建项目,所以一个轻便简单,集编辑与预览于一身的XAML编辑器就显得格外重要。Kax... 查看详情

基于wpf&prism&avalonedit的xaml轻量编辑器(代码片段)

1.写在前面    一直从事WPF的相关开发工作,有时为了尝试或演示某些仅仅基于XAML的效果时,但又不想大动干戈打开VS去创建项目,所以一个轻便简单,集编辑与预览于一身的XAML编辑器就显得格外重要。Kaxaml,集编... 查看详情

win10应用开发在代码中加载文本资源

...本资源的博文,但一直拖到今天,因为老周前阵子在忙着开发自己的UWP应用,已经向应用商店提交了一个版本,昨天刚提交完一次更新。好,今天咱们就聊聊代码加载文本资源的事情。在XAML中使用 查看详情

iotcs+ekuiper搭建物联网边缘计算平台

...f0c;通过简单修改几行配置文件,就可以快速搭建一个基于IOTCS+MQTTSERVER+Ekuiper+TDengine边缘计算平台。架构如下图:边缘计算方案整体测试技术选型:ProsysOPCUA模拟器IOTCS自研物联网网关MQTTSERVER=》mosquittoekuiper=&g... 查看详情

win10uwp开发系列:实现master/detail布局

原文:Win10UWP开发系列:实现Master/Detail布局在开发XX新闻的过程中,UI部分使用了Master/Detail(大纲/细节)布局样式。Win10系统中的邮件App就是这种样式,左侧一个列表,右侧是详情页面。关于这种样式的说明可参看MSDN文档:https://... 查看详情

win10应用开发uicomposition札记:基于表达式的动画

上一篇烂文中,老周给大伙伴们介绍过了几个比较好玩的动画。本篇咱们深化主题,说一说基于表达式的动画。这名字好理解,就是你可以用公式/等式来产生动画的目标值。比如,你想让某个可视化对象的高度减半,你的表达... 查看详情

用于设计 Windows 10 应用程序的 GUI?还是仅通过 XAML?

...,我正在学习如何使用VS2015创建Windows10应用。最近有机会开发一个在7英寸Windows10平板电脑上运行的简单应用程序。我没有花钱请人去做,而是决定自己试一试。使用 查看详情

wpf入门基础(代码片段)

WPF(WindowsPresentationFoundation)是由微软开发的桌面应用程序框架,用于创建现代化、高度交互和具有视觉吸引力的用户界面。它是.NETFramework的一部分,提供了一种基于XAML(ExtensibleApplicationMarkupLanguage)语言的声明性编程模型,可... 查看详情

如何将 xaml 模板打包成 nuget 包以供其他开发人员重用?

】如何将xaml模板打包成nuget包以供其他开发人员重用?【英文标题】:HowcanIpackageaxamltemplateintoanugetpackageforotherdeveloperstoreuse?【发布时间】:2021-08-2809:10:58【问题描述】:我从一些可重用的代码和框架中创建了一个nuget,这些代码... 查看详情

win10应用开发uicomposition札记:用xamllight制作灯光效果

前面老周已介绍过灯光的使用,如果你忘了,请用九牛二虎之力猛点击这里去复习一下。本篇老周再介绍另一种添加灯光的方法,这种方法是专为XAML元素而设计的,可以很方便地为可视化元素添加灯光效果。不知道大伙伴是否... 查看详情

什么是xaml?简单给我说一下吧

简介  也就是说在开发一个应用程序时,我们可以将开发工作分成开发人员和设计人员两个团体分别进行,各自负责后台程序代码逻辑和前台程序界面的设计,这样就使得开发人员和设计人员之间的协作更通畅,也极大地发挥... 查看详情

windows phone 8 和 10 的 windows phone 应用程序开发

】windowsphone8和10的windowsphone应用程序开发【英文标题】:windowsphoneapplicationdevelopmentforwindowsphone8and10【发布时间】:2016-04-1510:44:29【问题描述】:我想开发在windowsphone8和10上运行的windows应用程序。我的依赖只在windowsphone上,而不... 查看详情

初步测试vs2017+win10iot,基于worldmapofmakers

 测试WorldMapofMakers Demo,创建一个简单的internet连接应用程序来查询webAPI的状态(目测是一个延时时间),并使用该信息切换LED。官方仓库的Solution是基于VS2015的,本人VS2017下编译报错,故新建工程,把代码拷贝到新工程中... 查看详情

wpf入门教程:helloword及布局

...,并由硬件负责渲染;声明式编程:引入新的XAML语言来开发界面,分离前后台;易于部署:除了可以发布为普通的桌面应用程序,还可以稍加改动发布为基于浏览器的应用程序。1.3常用工具KAXAML:轻量级的XAML编辑器,使用它我... 查看详情

cx_freeze 创建 EXE 时没有基于命名的“Win32GUI”错误

】cx_freeze创建EXE时没有基于命名的“Win32GUI”错误【英文标题】:cx_freezenobasednamed\'Win32GUI\'errorwhencreatingaEXE【发布时间】:2021-10-1212:50:42【问题描述】:我想将应用程序转换为可执行文件并为此目的使用cx_freeze。但我收到了这个... 查看详情

在 Win 10 Mobile 上返回屏幕尺寸的 Splashscreen Rect 坐标

...描述】:我正在尝试在需要SplashScreen图像坐标的UWP应用上创建扩展SplashScreen。我在App.xaml.cs中使用以下代码:protecte 查看详情

Angular 1.5 组件示例

...】:我在使用Angularpre-1.5方面经验丰富,但我目前正开始开发基于1.5组件的Web应用程序。经过多次故障排除后,我似乎仍然无法使基本模板正常工作-我可以换一双眼睛告诉我以下简单菜单组件有什么问题吗?感谢您提供的任何帮... 查看详情

当我基于 Key-ed 版本时,隐式 XAML 样式停止工作

...被隐式拾取。如果我改为给它一个键,然后尝试基于that创建一个 查看详情