0 Comments

image There’s some cases where SemanticZoom in an UWP app provides a nice way of quickly navigating your app’s content. On the other hand SemanticZoom is something which can be hard for your app’s users to find so one should use it sparingly.

I’ve posted one sample app about SemanticZoom to GitHub. It’s a C# / MVVM app which shows how to combine GridView with SemanticZoom. To get the zoomed out view, you can use CTRL+Mousewheel:

image

Get the code from here:

https://github.com/mikoskinen/UWP-SemanticZoom-GridView

To learn more about SemanticZoom, you can visit Microsoft’s documentation.

0 Comments

imageThe first part of our Aurelia & UWP tutorial showed us how to get started. As mentioned in the end of that post, it was easy to get started but when you start using the Aurelia app using desktop, you’ll notice that you can’t navigate backwards.

This second part of our tutorial will show you how to add back button into your app.

The back button in UWP apps

If you’ve built UWP apps using C# & XAML, you’ve quite likely encountered SystemNavigationManager. Through it, you can add the standard backward navigation button into your app:

image

More about this from the MSDN: Navigation history and backwards navigation for UWP apps

The back button in Aurelia UWP app

So if we can use SystemNavigationManager in C#, what can we do in our Aurelia app? We can use the same SystemNavigationManager!

var systemNavigationManager = Windows.UI.Core.SystemNavigationManager.getForCurrentView();

That’s one big nice thing in UWP: You can access the same WinRT classes and methods from Javascript in addition to C# and C++.

To add the back button, add backbutton.js into your app with the following content:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
(function () {
var systemNavigationManager = Windows.UI.Core.SystemNavigationManager.getForCurrentView();
systemNavigationManager.addEventListener("backrequested", handleSystemNavigationEvent.bind(this));
window.onpopstate =function () {
var systemNavigation = Windows.UI.Core.SystemNavigationManager.getForCurrentView();
if (endsWith(window.location.href,"index.html")) {
systemNavigation.appViewBackButtonVisibility = Windows.UI.Core.AppViewBackButtonVisibility.collapsed;
}else {
systemNavigation.appViewBackButtonVisibility = Windows.UI.Core.AppViewBackButtonVisibility.visible;
}
};
})();
function handleSystemNavigationEvent(args) {
args.handled =true;
window.history.back();
}
function endsWith(str, suffix) {
return str.slice(-suffix.length) === suffix;
}

Then reference backbutton.js in index.html:

image

That’s it. You should now see the back button in your app’s title bar when you navigate away from the home page.

image

You can find the full example from GitHub: https://github.com/mikoskinen/aurelia-uwp/

In part three of Aurelia and UWP tutorial we look how to integrate more UWP app features inside your Aurelia app: The goal is to integrate the Aurelia app with Windows 10 and to make it behave like a standard C#/XAML based UWP app.

0 Comments

imageLately we’ve been writing some apps using Aurelia. Aurelia isn’t the only Javascript framework out there but it’s easily the most productive we have encountered. For someone who has been writing XAML/C# apps for the last seven years or so, Aurelia is the first platform which gives us the same kind of a feeling of productivity as the XAML/C#.

Some of the apps we’ve been building have been such that it would be great if we could release them to the Windows Store. Here’s a step-by-step tutorial on how to package the Aurelia app as an UWP app.

Requirements

Before starting, make sure that you have aurelia-cli up and running. For sample app we can use Aurelia’s “official” todo example app. You can get it from GitHub.

1. Create new UWP app

First, let’s create a new UWP app using the “Blank App (Universal Windows)” template:

image

2. Copy the Aurelia app inside the UWP app’s folder

Now get your Aurelia app or the todo-example app and copy its source code inside the UWP app’s root folder. This should override the default index.html and your folder should now look like the following:

image

3. Build Aurelia app

Next step is to build the Aurelia app. If you’ve just copied the example app from GitHub, you must first install its dependencies:

npm install

When you have the dependencies installed, build the app using aurelia-cli:

au build

image

4. Include required files in Visual Studio

Last step is to include the required files using Visual Studio. Select “scripts” folder and “Include in project”:

image

And you’re all set! Just use F5 to run the app:

image

Conclusion

This tutorial showed you how to “port” Aurelia app to an UWP app.

The source code is available from GitHub.

When you start using the app, you’ll quite likely notice a big problem quickly: There’s no back-button. The part 2 of this series shows how you can add the standard back-button, allowing desktop users to navigate back in your Aurelia app.

0 Comments

NXMLFormatter is an open-source XML Formatter and beautifier written with C#. The DLL is available as a portable class library, so you can use it from UWP, ASP.NET etc.

Usage

  1. Add reference to NXMLFormatter.dll.
  2. var formattedXML = NXMLFormatter.Formatter.Format(originalXML);

Project doesn't have any external references and it uses only the features provided by the .NET Framework.

NuGet

NXMLFormatter is available through the NuGet with the package name NXMLFormatter. Type "install-package NXMLFormatter" to install it.

Example

Input
<catalog><book id="bk101"><author>Gambardella, Matthew</author>
<title>XML Developer's Guide</title>
<genre>Computer</genre><price>44.95</price><publish_date>2000-10-01</publish_date><description>An in-depth look at creating applications with XML.</description>
</book>
<book id="bk102">   <author>Ralls, Kim</author>   <title>Midnight Rain</title>
<genre>Fantasy</genre>
<price>5.95</price>
<publish_date>2000-12-16</publish_date>
<description>A former architect battles corporate zombies, an evil sorceress, and her own childhood to become queen of the world.</description></book>
<book id="bk103">   <author>Corets, Eva</author>   <title>Maeve Ascendant</title>   <genre>Fantasy</genre>
   <price>5.95</price>   <publish_date>2000-11-17</publish_date>
   <description>After the collapse of a nanotechnology society in England, the young survivors lay the 
   foundation for a new society.</description></book></catalog>
Output
<catalog>
  <book
    id="bk101">
    <author>Gambardella, Matthew</author>
    <title>XML Developer's Guide</title>
    <genre>Computer</genre>
    <price>44.95</price>
    <publish_date>2000-10-01</publish_date>
    <description>An in-depth look at creating applications with XML.</description>
  </book>
  <book
    id="bk102">
    <author>Ralls, Kim</author>
    <title>Midnight Rain</title>
    <genre>Fantasy</genre>
    <price>5.95</price>
    <publish_date>2000-12-16</publish_date>
    <description>A former architect battles corporate zombies, an evil sorceress, and her own childhood to become queen of the world.</description>
  </book>
  <book
    id="bk103">
    <author>Corets, Eva</author>
    <title>Maeve Ascendant</title>
    <genre>Fantasy</genre>
    <price>5.95</price>
    <publish_date>2000-11-17</publish_date>
    <description>After the collapse of a nanotechnology society in England, the young survivors lay the 
   foundation for a new society.</description>
  </book>
</catalog>

Implementation

Under the covers the library uses XmlWriter to format the code.

Licenses

The library is distributed under the terms of the MIT License (see mit.txt).

Source code

NXMLFormatter’s source code is available from GitHub.

0 Comments

Problem

When you create a Universal Windows Platform app and run it in Windows 10, you may notice that the logo displayed on taskbar is not full size.

For example, if you have this beautiful 24x24 logo:

image

And you set that as your taskbar logo:

image

And then run the app, you’ll notice that it looks out of place:

image

Two problems:

  1. The logo is not full size
  2. The remaining space is filled with your accent color

Solution

The problem can be fixed by renaming the logo file. When you set the logo through Package.appxmanifest’s designer, the asset will receive file name Square44x44Logo.targetsize-24.png:

image

Just rename the file to Square44x44Logo.targetsize-24_altform-unplated.png:

image

And now when you ran the app, you should see that your icon fits the taskbar nicely:

image