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.

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.
 

Creating a WrapPanel

Recently I saw a friend, Glenn Versweyveld, write a blog about showing a “tags” (eg blog tags) within an app. The blog documents how to create a horizontal list of tags that are not formed into columns and rows. The list would let the items flow naturally. He used something I never would have thought of to accomplish this. He used a RichTextBlock. This was a rather cool idea that again, I would have never thought of.

 

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.

Hey! The future of WPF?

How about a quick chat with the Windows Presentation Foundation team? Not sure what that road map article really meant. We’ll get to the bottom of it. Spoiler alert, it’s awesome and you’ll walk away smiling.

Ready to learn? Developing Universal Windows Apps with C# and XAML. A new, free course on Microsoft Virtual Academy.

I’m back with my buddy Daren May to develop a Universal App on the Windows platform using X# and XAML. Yep. It’s how to deal with the problems you might hit; it’s how to use Prism MVVM for Store Apps, and strategies for implementing common scenarios like Security, Notifications, Local data, Code generation, telemetry, and more.

See you at TechEd in Barcelona

I feel pretty luck to have spoken at Build in San Francisco, TechEd in Houston, and now TechEd in Barcelona, Spain.

It’s in October, and I will be speaking on XAML and the Prism Framework. If you are headed to TechEd Europe this year, I hope you find me and say hi.

Best of luck!

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.

Designing Universal Experiences

With the release of Windows 8.1 Update 1, Windows Phone 8.1, and Visual Studio 2013 Update 2, developers can now choose a different modern project type, the Windows Universal App. But with the Universal App comes three orientations, two platforms, and several new design considerations.

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.

More Free Training: Developing Windows Store 8.1 Apps using XAML

Daren May and I are back to walk through the core C# and XAML concepts of Windows Store development, in our Microsoft Virtual Academy courses on the subject, refreshed from Windows 8.0 to Windows 8.1. Sit back and relax for nearly 16 hours of free developer training. 

The most Comprehensive Blend for Visual Studio training you will ever receive – for Free; you’re welcome!

November 2013, immediately after the release of Visual Studio 2013, I sat down for an all-day session with Unni Ravindranathan, the Senior Program Manager for Blend. Who better to walk through, not the new features of Blend, but all the core features of Blend – and the new features, too. In some cases, Blend for Visual Studio 2013 returned some of the features removed in Blend for Visual Studio 2012. But in many cases, it’s just candy tooling for the XAML developer.

Is this for you?

Do you want to see Blend in action and learn how to incorporate its bountiful power easily into your current projects? Windows 8 projects, you bet! Silverlight projects, you bet! Windows Presentation Foundation (WPF) projects, too? You bet! Blend is a tool for XAML developers, not just Windows 8 developers. In fact, in some cases, Blend does more for the Silverlight and WPF developer. So, enjoy.

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.