UWP


How to Remove Default FDS Effects in UWP Apps

The Fluent Design System introduced by Windows 10 from v1709 is very beautiful, the latest v1809 further refined FDS, many UWP built in controls got FDS effect by default while developers do not need to do anything. This is usually a good thing, but it can also cause performance problems for some apps. My Character Map UWP is one of the victimized apps, and let's take a look at how to remove the …


Build a Pixel Ruler with UWP

In certain applications, we may need an on-screen ruler that indicates pixels on the screen. However, the only built-in ruler in UWP is within the InkToolbar control, we are not able to use it elsewhere. So, I will teach you how to build a pixel ruler which can be used anywhere in your UWP applications. The Demo App Create a new blank UWP application called PixelRulerUwp with minimal runtime …


Fix AcrylicBrush Missing on NavigationView in Windows 10 SDK 17763

Microsoft released a new version of Windows 10 UWP SDK Build 17763, you can check the What's New document for more details. But when I retarget my App to version 17763, something unexpected happens, the AcrylicBrush gone missing if I change my App runtime to version 17763. I am not sure if this is by design on 17763 or it is a bug, I am trying to contact Microsoft product group on this …


How to Fix Extended TitleBar Overlapping NavigationView PaneToggleButton

In UWP Apps, we some times extend our main view into title bar to get rid of Windows 10 default title bar. However if you are using NavigationView under extended title bar, you will find your PaneToggleButton overlapped by the title bar. And the user won't be able to click on the upper part of the button because it is where the title bar need to respond to window drag actions. This image shows …


Windows Community Toolkit: Use CameraPreview to Take Photos

In UWP Apps, if we want to use the device's camera to take photos and save to a file, it is used to be some how complicated, the developer need to know about quite a lot things and also write quite a few code to get it down (As you can find the Camera examples from Microsoft offical sample code). In fact, in many cases, we just want to take a photo by the most easy and default options via the …


Read System Certificates in UWP

In Windows, we can view and manage the certificates using certmgr.msc, which is a system management console included in Windows itself.  However, what if we want to view the certificates information in an UWP app? Here is the answer. First thing first, the method I use does not apply to UWP only. In fact it is from a WPF app I wrote. As Microsoft released .NET Standard 2.0, which allows …


Send Feedback in UWP Apps by Windows 10 Feedback Hub

After our app has been put on Microsoft Store, there are a lot of ways to get users to send feedback, such as email, store reviews, or even write our own API collect feedback. But in fact, Windows 10 Feedback Hub can also be used to send feedbacks for our own Apps. Those who are familiar with Windows Insider know that when Windows 10 is installed, the system has a Feedback Hub, which is usually …


Customize Acrylic Brush in UWP Applications

Windows 10 Fall Creators Update (Build 16299) added acrylic brush, this is a UI brush that similar to Windows 7 Aero effect. A lot in box Windows Apps, such as Calculator are updated with the acrylic brush. However, the built in brushes will not always meet our own requirments. Especially when Windows automatically disable render of acrylic, such as low power mode, or with an inactive window, …


Apply Keyboard Short Cuts in UWP

A greate Windows App requires not only mouse and touch screen friendly, but also need to think about keyboards. Especially for some common short cuts, like Undo (CTRL + Z). So that the App can provide better user experience.  So how can we define short cut keys in UWP? Take my App Tracing as example, I need to implement short cuts for Undo (CTRL + Z). First, we need to consider which …


Show Confirm Dialog When User Close UWP App

When our UWP Application deal with user data in it, e.g. like drawings or documents, we usually want to make sure user won't close the App by accident and lose their work. Just like what you see in a Office application, it will ask you if you want to save your document before close the App. For a long time, UWP could not do that in a normal way. Because it is not a general public API and it is …


Automatically Set Text Color on Accent Background in UWP

Windows 10 allows users to set accent color for the system, and in UWP apps, we usually honor those settings by using XAML pre-defined resource keys like {ThemeResource SystemControlBackgroundAccentBrush}. But regardless of how the user set default app mode to dark or light, when we apply text on accent colors, it may have some problems. For example, when the App is in light mode, the …


Configure VSTS Build for UWP Apps

UWP Apps usually require a lot of time to compile a "release" package for submitting to Windows Store, and if you are working in a team, TFS/VSTS can help your team ensure that each check-in has a success build, and make it easier for deployment and testing. Let's see a basic example of how to setup a CI build for a UWP App on VSTS. Important Pre-condition: Before you do that, please …


Windows 10 UWP: Switching Languages in Your App

By default, a UWP App's UI language is automatically fits the system current language settings. However, what if the user need the ability to set a particular UI language just for your App without having to change system language? In my App, I supports Simplified Chinese and English. The user can override the system language in App's settings page: So how to do it? First, you need to have …


Windows 10 UWP: How to Read and Save Settings Easily

In the UWP Application model, reading and saving settings are very similar to WinRT API. The class we are using is ApplicationData.Current.LocalSettings It is using key-value-pair to store settings. LocalSettings will stay on the user's current computer, and not being synced with thier Microsoft account. The API to save settings is: LocalSettings.Values[key] = value; To read settings:  …


Windows 10 UWP: How to Debug OnFileActivated Launch Failure

Today I am working on my Image Portray App, and I get my code blown up. The problem is, when the App is already started, it can open .ink file with double click from a file. But when the App is not launched, opening a .ink file to start the App will make it crash. As other UWP that supports file type association, I also use OnFileActivated event to launch my App. This kind of problem could …


10 Tricks and Tools for Windows 10 UWP Development

After Windows 10's launch. More and more UWP applications are coming as well as more Windows developers. I am doing UWP development besides my job for more then 2 years. Today, I will share some tips and tricks from my UWP development experience as well as some handy tools, so that you can do your development more quicker and easier. 1. Automatically Set Color to Title Bar The default color …


Windows 10 UWP: Undo / Redo Ink with Surface Dial

The Surface Dial is the first wheel device in a new input device class. I got my hand on one as soon as it came to market in China. I have a UWP App named "Image Portray", as a drawing app that can make use of the Surface Dial. One of it's useful application to undo / redo the ink by turning the Surface Dial. You can download it from Windows Store these days to see the changes. So, let's begin …


Windows 10 UWP: Undo / Redo on InkCanvas

The InkCanvas in UWP only got pens by default, it can not perform Undo or Redo. To implement this, we will need to code for ourselves. Official document covered Undo functionalilty, but not redo. Today, I have successfully done it, and I'd like to share with you. First, you need to add two custom buttons on the InkToolbar for Undo / Redo <InkToolbarCustomToolButton Name="undoButton" …


Remote Deploy and Debug UWP Apps

These days I am developing an App that need to be tested on multiple languages environment. I can set my local dev box to different language, and restart or sign out / sign in to Windows again to test different languages. But this is very inconvenient. I want to setup a Windows 10 virtual machine with Chinese language and let Visual Studio 2017 deploy and debug the App right into the VM. …


How to Save InkCavas to Image in Windows 10 UWP

The InkCanvas control in Windows 10 UWP is not like WPF where you can save as image file easily. If you want to save user ink to an image file, there's by far only one way to do it: 1. Install Win2D.UWP via NuGet into your project. PM> Install-Package Win2D.UWP 2. Because we need to access user's picture library, so we need to apply the permission in manifest file. Select "Pictures …


Create QR Code in Windows 10 UWP

A year ago, I wrote an UWP application that can generate QR Code. However, at that time, the QR Code library I used was ZXing.Net, the last update for this package was in 2014. Now, time has changed, the author of ZXing.Net seems not to update the package any more. However, we have to move on, so I found a fantastic new library to generate QR Code in .NET applications: QRCoder To use that …


Get system font and characters in Windows 10 UWP

There used to be a {x:Static Fonts.SystemFontFamilies} in WPF that can bind to system font list very easy. However, this is gong in UWP! How stupid it is! These days I wrote a character map UWP application, that would use system fonts, so I did some research. In order to get system font in UWP, we must use DirectX. Install these 3 NuGet pacakges into your project: "SharpDX": "3.0.1", " …


How to Remove ListView Default Selection in Windows 10 UWP

A lot of people including me has encounter a problem where on UWP apps, if a ListView control is being data binded, it will get a default selected item like this: It not only will display as selected item, it also fires SelectionChanged event. However, if we want to make ListView clickable, a popular way is to write the SelectionChanged event handler like this: private void StationsList_ …


How to make a modal progress dialog in Windows 10 UWP

Windows 10 Mobile上的文件管理器有这样一个进度指示器,它是一个模态框,不带任何按钮,只有进度条和文本: 今天我琢磨了很久,绕了一些弯路,发现其实要做一个这样的模态进度指示器很简单。只要用ContentDialog就行。 平时我们用ContentDialog有些思维定势,就觉得这个对话框一定要提供按钮给用户操作。其实它是可以不设置任何按钮的,这样就有了初步的雏形: XAML <ContentDialog x:Name="ModalProgressDig"> <ContentControl.Content> <StackPanel Margin="0,10,0,10"> <ProgressBar IsIndeterminate="True" /> …


Windows 10 UWP开发:拼音首字母分组如何去掉“拼音”前缀并支持切换系统语言

Windows 10里面有个脑残设计,就是系统默认的CharacterGroupings类型在中文版系统上会产生除了A-Z字母以外的带“拼音”前缀的另外24个分组。比如开屎菜单里就是这样: 如果我们用这个CharacterGroupings类型去创建带分组的ListView,就会变成这样: 更蛋疼的是,如果用户的系统是英文语言的,他就会发现分组变成空白了,没有任何数据。用户不知道这是微软干的,又得给我们的APP打1星,还要骂我们傻逼。 今天经过研究,终于把这个问题给解决了,不仅去掉了“拼音”前缀,也不用担心用户系统是什么语言的,都能正常显示分组列表。 我们先看看原来的代码。 public class AlphaKeyGroup<T> : List<T> { …


Sharing Images in Windows 10 UWP

Starting from Windows 8, one big feature for Windows Store Apps is to share data using Charm Bar across Apps. Although the Charm Bar is removed in Windows 10, but the API for sharing is still in the fight.  For example, in my "Image Portray" App, I can share ink to OneNote or Outlook. Today, I added same capability for my "Shanghai Metro" App. Here's how to do it. First, to share data …


Sound Controlled Light by Windows 10 IoT Core

In many buildings, there are sound controlled light in use. When you clap your hands, the light turns on. Now, with Raspberry Pi 3 and Windows 10 IoT, we can make a sound controlled light ourselves. The sound sensor I use is FC-04. As other sensors, the first step is calibration. 1. Calibration for FC-04 Sound Sensor In quiet environment. Connect VCC to DC 3.3V,GND to Ground. At that time, …


Windows 10 IoT开发:HC-04超声波传感器测距(树莓派3)

HC-04是树莓派上用的比较广泛的超声波传感器,可以用来测量设备和物体之间的距离。可惜网上的资料很少有针对Windows 10的,几乎都是Python和C在Linux上的例子。 hackster.io上有一篇用HC-04做雷达的例子,但是设计的部件太多了,对单纯学习HC-04传感器的使用来说这个例子比较复杂。搜了一圈,英文资料最好的是这篇:http://www.guruumeditation.net/en/digital-io-with-windows-10-iot-raspberry-pi-2-and-the-ultrasonic-ranging-module-hc-sr04/ 国内中文资料介绍Windows 10上HC-04传感器的文章似乎还没有,所以就简单总结一下步骤。 一、物理连接 对于没有多少物理和电子知识基础的人(比如我)来说,第一步连线是比较难的。很多文章 …


Windows 10 IoT Development: Moisture Sensor for Raspberry Pi 3

I bought a moisture sensor like this recently. After some research, there seem no articles to indicate how to use it in Windows 10. So I figured out myself. This sensor has 4 Pins, which are: PIN Usage AO Analog Out DO  Digital Out GND  Ground  VCC  Power So, let's connect VCC to DC3.3v on RPi, I use PIN 01. Connect GND to any ground …


GY-30 (BH1750FVI) Light Sensor with Windows 10 IoT

I purchased a GY-30 light sensor recently, this model is also known as "BH1550FVI". There seems no sample for this sensor on Windows 10 yet, so I tried to make one. The light sensor looks like this: My board is a Raspberry Pi 3, the GPIO layout is shown in this table: Because GY-30 is an I2C device, so we can not use GPIO to drive it directly, we must use the I2C ports. In addition, …


Windows 10 IoT开发:UWP应用调用关机和重启命令

UWP通常是没有让设备关机和重启的权限的。但是在Windows 10 IoT Core中是有办法实现的。安装Windows 10 Iot Core之后默认启动的那个欢迎页面右上角是有关机和重启按钮的。其实就是个UWP,它的源代码在:https://github.com/ms-iot/samples/tree/develop/IoTCoreDefaultApp  分析源代码可以发现,关机和重启是通过ShutDownManager这个class实现的。 #region Assembly Windows.System.SystemManagementContract, Version=2.0.0.0, Culture=neutral, PublicKeyToken=null, ContentType=WindowsRuntime // C:\Program Files (x86) …


Windows 10 UWP开发:如何不让界面卡死

自从.NET 4.5开始,C#多了一对新的异步关键词 async 和 await,如果不了解的朋友可以简单的看下下面的示意图。 简单的说,就是在通常情况下,用户在界面上进行的操作,比如点击一个按钮之后,如果进行大量的计算,或者读写文件、网络请求等耗时的操作,那么程序的界面就会卡住,在这段时间里,任何交互都不会响应,直到后台的代码执行完毕才会继续响应用户操作。 这种现象和你的应用是不是UWP没有什么卵关系,WinForm,WPF,Windows Phone SL/RT应用都会有这个问题。 这个问题的原因是因为这些耗时的操作和界面(UI线程)没有关系,但却在UI线程上执行了。解决办法就是另起一个线程,让它在UI线程之外去执行代码,这样就不会锁死UI。就像这图: 在.NET 4.5以前,要进行一个异步操作写法有点繁琐,.NET 4.5以后。我们只要把一个方法的签名声明为 …


Windows 10 UWP开发:页面导航及后退的处理技巧

这篇文章主要总结一下Windows 10 UWP开发中关于页面导航及后退按钮的一些省时省力的技巧。 一、页面导航 导航到另一个页面,用的是Frame的Navigate方法,parameter参数是可选的: public System.Boolean Navigate(Type sourcePageType, System.Object parameter); 比如你的目标页面是TargetPage.xaml,通常类型就是TargetPage,所以就可以这样搞: Frame.Navigate(typeof(TargetPage), ParametersObject); 在目标页面接受参数,用的是OnNavigatedTo,然后把e.Parameter转换成你的参数类型,再自己撸一下就好,比如: protected override void OnNavigatedTo( …


How to Make Circular Avatar in Windows 10 UWP

Once upon a time, all user's avatar used to be square. Since Apple's design, now a lot of apps and websites would use a circular avatar instead of a squre one. This is how we used to make square avatar: <Grid Width="200" Height="200"> <Image Source="Assets/ndl.jpg" /> </Grid> Starting from Windows 10, Microsoft became the biggist Apple fans, so they changed avatars …


Windows 10 UWP开发:支持异步的全局异常处理和堆栈信息

我们写UWP应用的时候难免遇到未处理的异常,不然你的应用就会在用户面前闪退,非常没有逼格。然而Windows.UI.Xaml.Application的UnhandledException事件里面有个巨坑,就是它不能处理async异步方法里的异常。注释里也没提到这回事: // // Summary: // Occurs when an exception can be handled by app code, as forwarded from a native-level // Windows Runtime error. Apps can mark the occurrence as handled in event data. public event UnhandledExceptionEventHandler UnhandledException; 处理 …


Windows 10 UWP开发:报错和反馈页面的实现

我的《上海轨道交通》应用里有个允许用户报告错误的页面,会把当前视图(xaml页面名称)、页面摘要、用户反馈的内容以及设备的软硬件信息生成邮件发给应用作者,界面如下: 生成的邮件如下: 问题描述:测试 (程序版本:3.2.0.0, 所在页面:StationDetail, 页面摘要:宜山路, 设备名:ISAAC, 操作系统:WINDOWS, SKU:Surface_Pro_3, 产品名称:Surface Pro 3, 制造商:Microsoft Corporation, 固件版本:, 硬件版本:) 要实现这样的报错页面非常容易 1.获取软硬件信息 我们要用的类是: Windows.Security.ExchangeActiveSyncProvisioning.EasClientDeviceInformation 比如获得设备名称,就可以直接: var …


Windows 10 UWP开发:如何本地化APP名称

我们在设计APP的时候,可能会考虑到不同国家和地区的用户使用,并在界面里针对不同的语言写资源文件做本地化。但是,如何让你的APP名称也本地化?比如在简体中文的系统上显示在程序列表里的是“调色板”,而在英文系统上显示的是“Color Palette”。 做法很简单,首先,和通常做本地化一样,你得有个"Strings\语言\Resources.resw"的文件夹结构。比如简体中文用的是“zh-CN”,美国英语是“en-US” 然后分别在resw文件里加一个key,比如AppName,然后针对不同语言填写不同的名称。这里简体中文是“调色板”,英语是“Color Palette” 最后这部最关键,打开你的Package. …


How to save image to file in Windows 10 UWP

My UWP application "Shanghai Metro" has an option to allow user save the metro graph to local file system. The image file is located under project directory, "Assets\shanghaimetro-xl.jpg", and will ask the user to choose a location when saving the image. This is a very common functionality, it's also easy to achieve in UWP applications. The most easy way to do it is to use my library "Edi.UWP. …


Windows 10 UWP开发:更新VS2015 Update 1后无法加载旧工程的解决办法

今天更新了VS2015 Update 1,然后打开以前的UWP工程就爆炸了。这是因为Update 1里的UWP SDK是10586的,以前是10240的。所以我们需要手工改一下工程文件,把运行时的版本号指向10586。不过要注意,这样编译出来的应用就只有Windows 10 TH2的用户能用了。 1. 在工程上右键选择“Edit 工程名字.csproj” 2. 把10240替换成10586 3. 保存工程文件 4. 右键,选择“Reload Project”重新加载工程 5. 成功加载


Windows 10 UWP开发:如何定时触发后台任务

今天在爆UWP的定时后台任务,坑有点多,爆出屎来了。有的坑在很多网上的文章里都没提到,非常的坑。刚刚开荒成功了,把经验写出来分享: 1. 写一个后台任务的类,继承IBackgroundTask接口 通常,在设计应用程序结构的时候,我们会建类库项目(Class Library)放这些类。比如 FarkBackgroundTask.Core 因为是UWP工程,所以建的类库也要是Universal Windows的。注意,这里我们已经埋下了一个巨坑,稍后会解释。 我们的类代码如下: public class SayFarkTask : IBackgroundTask { public void Run(IBackgroundTaskInstance taskInstance) { Debug.Write("================ …


Windows 10 UWP开发:如何弹出消息通知

在UWP的App中,弹出消息通知的方法和WinRT一致,注意是App内的消息通知(toast notification)而不是从服务器端推送的通知。主要有几个步骤: 1. 创建XML定义 // 1. create element ToastTemplateType toastTemplate = ToastTemplateType.ToastImageAndText01; XmlDocument toastXml = ToastNotificationManager.GetTemplateContent(toastTemplate); 这里面的消息模板有好几种: // // Summary: // 指定要在消息通知中使用的模版。 [ContractVersion(typeof(UniversalApiContract), 65536)] public …


Windows 10 UWP开发:如何实现WP8的Pivot效果

UWP的Pivot控件动画效果和以前Windows 8, Windows Phone 8的Pivot不一样,在切换PivotItem的时候,当前选择的Item的Header并不会跑到第一个去,而是单纯的像Tab选项卡那样高亮当前的Tab而已。 我个人喜欢Windows 8的Pivot,即下面这个GIF这样的(这是我正在开发的一个UWP应用)。如果你也喜欢传统风格的Pivot,可以参考以下方法。 实现方法特别简单,只要拿Blend从WP8.1 Runtime的Pivot里把默认样式导出来,稍微改下就行: <Style x:Key="Windows8PivotStyle" TargetType="Pivot"> <Setter Property="Margin" Value="0"/> <Setter Property=" …


Windows 10 UWP开发:自定义标题栏

UWP和WPF以及以前Windows 8.1的WinRT应用有些不一样的地方。首先就是标题栏,以前Windows 8.1的应用都是全屏的,没有标题栏,Windows 10里面应用可以窗口化运行,所以我们也能够利用标题栏做一些定制。本文针对初学者,可能写的比较啰嗦。 一、首先是最基本的,如何改变标题栏及按钮的颜色 标题栏的对象位于Windows.UI.ViewManagement.ApplicationView类里,有个属性是 public ApplicationViewTitleBar TitleBar { get; } 为了能够访问这个属性,我们需要先取得当前应用窗口的view: var view = ApplicationView.GetForCurrentView(); 拿到view对象后,就能对TitleBar属性操作了,标题栏的活动和非活动状态的前景色和背景色可以这样 …