Cardinal XAML: a reflection

In 2014, at the VS Live in Chicago, Ben Dewey, a Microsoft MVP for Windows Client at the time, presented the session: XAML Anti-patterns. Not to be confused with Markus Egger’s excellent series with the same name in Code Magazine (also in 2014); Ben’s session had the playful subtext: The Seven Deadly Sins of XAML Development.

Between the two authors, they saw a regular set of common developer practices that harmed the efficiency and maintainability of XAML applications. In this article, I wanted to iterate those insights, consider the actuality of them, and review if they remain relevant to modern developers using newer, evolved XAML technologies and tooling.

Set up Xbox One for UWP development

Since Anniversary Update (Windows 10 1607) Xbox One has supported UWP developers and the Windows Store has supported UWP apps targeting Xbox One. You can use any Xbox One as a developer machine. This blog will walk you through the process of setting it up. It's a lot of steps, but pretty easy.

First, what are the prerequisites?

1. An Xbox One with local, shared network access
2. Visual Studio 15 Preview 5 (or VS 2015 Update 3+)

Search for the Dev Mode Activation app in the Store

Let’s code! Build a custom progress ring in Windows XAML

There are several controls that ship for free in the Visual Studio XAML toolbox. One of them is the ProgressRing, a neat, animated ring of dots that goes round and round and round. Developers use the ProgressRing to indicate to the user that something is working, loading, or just doing something where the user should wait.

But what if you wanted to do more without splitting the atom? Could you build your own, custom progress in that super-charges the branding of your Windows app?

Implementing an Awesome Hamburger Button with XAML’s new SplitView control in Windows 10

Warning NUMBER 1! This is a Windows 10 Preview (pre-RTM) article written in 2015. Though the concepts remain 100% valid, the overall implementation is different. This is my only article describing the SplitView control, and I think you will benefit from the discussion herein. However, if you would like a complete implementation, I have written one in the Minimal project for Template 10. The code for Template 10 is completely free for you to view, steal, and use. :)

Warning NUMBER 2! Since the release of Windows 10 Fall Creators Update (2017), there is a native control giving developers a beautiful Hamburger Menu in their UWP apps. You can review my article on this control in MSDN Magazine: here. Again, this blog article remains accurate, but a hand-made Hamburger Menu is no longer the suggested approach anymore. That said, there are plenty of things to learn in this article. Read on, but remember the Navigation View control. 

Windows 10 introduces the universal app platform for Windows apps. Windows XAML apps, specifically, enjoy several new members to their Visual Studio toolbox including the SplitView. This control is like the Grid in that it has no visible interface until something is put inside it. The purpose of the SplitView is to help developers build popular navigation experiences.
 

Let’s code! Data binding to a Radio Button in XAML

In XAML, RadioButton is like CheckBox (they both inherit from ToggleButton) with 2 differences: 1) they look different, and 2) when grouped together, checking one RadioButton will uncheck the others. But how should a developer implement the RadioButton? It is a little confusing, especially when data binding. I will demonstrate three approaches. 

Aside: I will also point you to this article which discusses the problems of a three-state CheckBox and how binding to a nullable type in WinRT-XAML can create a lot of developer consternation. I realize that article is about CheckBox and this article is about RadioButton, but it’s tangentially relevant.

Reading and Writing Base64 in the Windows Runtime

Sometimes it’s super-valuable to take an image and convert it to text – let’s call this encoding. This text is base64 and it’s a well-established standard for such things. It can be inserted into JSON, XAML, and even used in CSS. Conversely, it’s important to convert that text back into an image – let’s call this decoding. And, developers can do it all in the Windows Runtime.

Let’s begin by recognizing that how binary information is translated into and out of text isn’t important. It’s all settled by the standards nerds – we’re just leveraging their hard work.

Let’s Code! Strongly-typed Experiences in Prism MVVM for Windows Store

Microsoft Patterns and Practices has created Prism MVVM for Windows Store Apps. This lightweight framework/toolkit gives you what you would get with MVVM Light but with some helper classes specific to Windows Store Apps – like app lifecycle management, extended splash screen, and orientation detection. 

Navigation Service

One key to Prism and every MVVM framework is the Navigation Service. Prism’s Navigation Service has a Navigate(string, object) method into which you do not pass the page type, no. You pass the Experience.

Let’s Code! Handling validation in your Windows Store app (WinRT-XAML).

Many Windows Store apps are content presenters; they require very little data entry and, consequently, very little data validation. But data validation is a core component to a business apps. Is there validation built into the platform? No.

In several XAML frameworks data validation was baked-in. DataAnnotation and ExceptionValidationRule for bindings in WPF. IDataErrorInfo, INotifyDataErrorInfo, and BindingValidationError for setter exceptions in Windows Phone, Silverlight, et al. But these are not an option for a Windows Runtime developer, especially the Universal App developer. And, as we will see in this article, they were never really enough anyway. But, we have options.

Let’s code! In WinRT-XAML you cannot bind to a nullable type. Or can you?

In WinRT, you cannot bind to a nullable type. It’s just the way it is. This is strange when you consider the ComboBox and ToggleButton; they both have an IsChecked property of type bool?. Binding to them with a simple true or false works great. Attempting to bind the third state (null) doesn’t work – it is ignored by the control altogether. You can’t work around it with a converter. And, should you peek at your Output window, you will see a silent error that reads:

Error: Converter failed to convert value of type 'Boolean' to type 'IReference1<Boolean>'; BindingExpression: Path='State' DataItem='App4.MainPage'; target element is 'Windows.UI.Xaml.Controls.CheckBox' (Name='checkBox'); target property is 'IsChecked' (type 'IReference1').

Let’s Code: Build your own FlipView Page Indicator

XAML data binding is pretty powerful. One of the benefits of XAML data binding is that it lets different elements on one UI use the same data. The WinRT-XAML FlipView inherits from ItemsControl, the base class for all XAML repeaters. It shows a single record at a time.

But how many records are before the current record? How many records are after it? Without some type of page or context indicator, the FlipView is a mystery to the user. And, that’s what we’re after today – building our own page indicator for the FlipView control.

15 Easy Ways to Screw Up Your Next User Group Talk. And, a little advice.

In college, a millennia ago, I spent a summer serving Philadelphia’s inner city children with Bart Campolo. As a leader, he was an effervescent, tireless motivator; an excellent writer as much a speaker. As he verbalized his process he forever transformed my approach to public communication.

He explained two reasons for communication. The first, information. This practical, utilitarian task comes up from time to time, but isn’t the reason the world needs excellent communicators. It simply set a level across participants. If you were successful, people knew more. It’s as simple as that.

Decorate your tree with XAML

Next week is Christmas. I know most of you are scrambling to find the perfect gift for that special someone. Here’s an idea: a custom app built just for her. What could she love more than vector-based graphics on a touch screen? How she’ll remember this year and bring it up again and again, reminding you of what you gave her. And, what’s better than Christmas leftovers? How about a post-Christmas bug/fix/triage session in the comfort of your own home!

Seriously, I am not being serious. But if you are wanting to build a Windows 8.1 app that uses the new Render Target Bitmap capability, then look no further than this simple demo that will walk you through creating a Christmas tree, arranging the ornaments and saving the result.

Make it snow with XAML

XAML is a very flexible technology platform. This time of year, some of the nicest things you can do is release apps that contain the character of the season. Since I am in Colorado, a lot of that character surrounds the weather. Snow is an easy ambiance to add to any XAML app.

In this article we’ll discuss how to create the assets you need, and how to use those assets to simulate a Winter Wonderland. This will include the dynamic creation of controls and their animations.

The two ways to handle orientation in your Windows 8.1 app

Ah, elegance. Handling orientation basically means adjusting your app to account for real estate changes when the user pivots their device from Landscape to Portrait, or when the user adjusts your app’s width.

In Windows 8.0, there were four possible orientations: FullView (1366x768), FillView (1024x768), SnapView (320x768), and Portrait (768x1366). In Windows 8.1 there are two possible orientations: Landscape (width > height) and Portrait (width < height).

CAVEAT: In either case, screen size (inches) can vary across devices. An increase in screen size (not to be confused with resolution), introduces new (or less) real estate for your app’s UX. As a result, developers should build responsive layouts to handle increases and decreases in screen real estate.

Nostalgia: Yonder SnapView?

Kids today don’t even know what we’re talking about when we say SnapView. We might as well be talking vacuum tubes and punch cards. So, where’s SnapView? Here’s the secret: it’s still there! In Windows 8.1 the minimum app width is 500 pixels. However, with a simple setting in your app’s manifest the 320 pixel width comes right back! You just don’t have SnapView enum anymore.

XAML: How to add ItemsSource to the Windows 8.1 MenuFlyout

With Windows 8.0, Flyout options for developers were constrained to 1) custom development to get what you wanted or 2) using my Settings and Flyout helpers to shortcut the custom work, or using Tim’s Callisto Flyout to do it for you. They all worked, but none was ideal.

With Windows 8.1 there are several new Flyout options for developers. There’s very little for need custom development because the platform Flyout is very flexible and prescriptive.

Windows 8.1: How to use Visual States in your XAML App

There’s no question that XAML’s résumé has a few items in bold. It’s ability to data bind sets it apart from any other technology. It ubiquity across the Microsoft portfolio of products establishes it as the go-to for developers. But, perhaps it is visual states in XAML that ironically provide developers with remarkable capabilities, and remains one of the least used features.

This is the most important control you may ever use

There are two version of PianoTime for Windows 8 – a successful title from a Colorado publisher. The free version sponsored by ads, and the $3.48 ad free version. Do people purchase their way out of ads? Yes, they do. Do most people. No, they don’t. So, is it worth it?

Freemium

Freemium is a booming business model for apps. Because of digital production, product copies can be given away. They are done so without an expectation that all or most users will buy. Instead, a single-digit percentage will purchase. But, the wealth of free functionality drives market penetration. As a result, that small percentage surpasses traditional pay-for-what-you-get purchase.

For example, a durable consumer purchase is the ad-free version. Similarly, an in-app purchase hiding ads is the same. Both provide users the full fidelity of an app. They can use it. They can love it. They can rely on it. All for free. Market penetration grows. Respect for the app and annoyance around ads are the purchase motivators. The percentage is small, but the number is large.

Walkthrough: Create a whiteboard app in 10 minutes using XAML

Recently, I updated my Timer App to version 2. And, one feature I added was a whiteboard. Letting your user draw a picture is cool. It’s also quite useful if they need to express a thousand words quickly. Anyway, I wrote it and thought, “this is easy!”. So, I thought I would share the technique.

Understanding pointer events

There are several input devices supported by Windows 8. In fact, it’s because Windows supports the Pen (stylus) that I think it beats every other platform. There’s no better inking platform than Windows, but that’s not the point of this article. Other than the Pen, there’s touch (finger), and, of course, the mouse.

Walkthrough: Let’s build a control like that awesome new one in Windows 8.1.

If you are like me, then every time you get a new MSDN magazine, you flip to the advertisements first. There’s nothing cooler than looking to see what component and control vendors come up with and present as next-gen UI. I have my own ideas on UX, but I would be dishonest if I didn’t admit those ads, over the years, haven’t influenced me.

So, when new apps were included in the Windows 8.1 update, I immediately opened them to see if I could glean some UX ideas. Many of them are quite nice. But the timer app is particularly distinctive in its look and interaction. The interesting dial control is quite usable – it’s intuitive and flashy looking. I like both of those.

Windows 8 apps need 28 logo varietals; enter Expression Design

One of the best parts of Expression Design transitioning to a free download is that it is now free. Design is awesome to create complex vector art and export it as XAML. Design can also create various sizes of the same design so your Store app can be successful.

Note: You can download Design here.

A Windows Store app needs a logo. As a matter of fact, a Windows Store app needs a logo, a wide logo, a small logo, and a store logo. That’s not so bad, right? Trust me when I say, creating your logo in Design or a tool like Design will save you a lot of heart ache.

Since I just did this for my Free Timer app, I’ll share my technique.