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.

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.

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').

A closer look at the BirdBox app

When you take photos with your phone or home camera, how are they organized? How are they shared? What if there were a service out there that let you organize your photos, share your photos, and do it all for free. Welcome Birdbox. A simple Windows 8 app that lets you create nests of photos to share with groups of friends.

From holidays and parties to vacations and topics of interest, Birdbox is the easiest way to share and collect photos with groups of people. Choose which photos to share and invite friends to contribute theirs, all in one place.

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.

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.

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.

Students can make real cash this holiday season on Windows 8.

Introducing the Windows 8 Holiday App Challenge!

Build an App Build your Windows 8 App and publish it to the Windows Store. Submit the app link HERE to be eligible to win a $50 gift card.

Promote the App Promote your app and get 100 downloads. Find tips and tricks on how to promote your app at (COMING SOON).

Win Big! Confirm that your app has reached 100 downloads HERE to be eligible to win an additional $100 gift card.

Read more here.

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.

Everything I know about Behaviors in Blend for Visual Studio 2013

When Visual Studio 2012 was released, it supported a new way of building apps – Windows Store apps using the Windows Runtime. These apps could be built in XAML, of course. But, unlike previous Microsoft developer tooling, Expression Blend was not shipped separately; it was moved out of the Expression Suite (which was discontinued), and bundled as part of Visual Studio – forevermore.

This meant all developers completing developer tasks could use Visual Studio with comprehensive coding features. Moreover, all developers completing design tasks could use Blend for Visual Studio with comprehensive animation and styling features. It was a brilliant union. Today, still, a Visual Studio installation includes Blend by default. Developers have the best of both worlds.

Aside: this article does not talk about custom behaviors. It’s not that custom behaviors are too complex, it’s that there’s too much to say about the built-in behaviors first. I’ll try to follow-up with a custom behaviors article. In the meantime, enjoy.

Walkthrough: Is your Windows 8 app too square and boxy? Here are some options.

There are some really great features in XAML that some developers either 1) do not know they are there or 2) never leverage. Well, in this article, I want to talk about techniques you can leverage to move your Windows app away from the tempting, yet commonplace, square and rectangular design. As it turns out, you can accomplish this feat with very little effort. Just turn on your design mind and continue reading.

Windows 8.1 design principles hand developers back their sanity

When the computer mouse was new, it was simple to use but unfamiliar to users. As a result, user manuals could not say “click the red X”. Instead, they had to say, “move the mouse on your desk to control the pointer on your screen”. The idea of the mouse was new – the conversation had to start several steps back. After the mouse was successfully socialized and established as an input modality, user manuals could confidently say “click the red X”.

How Apple’s new IPhone 5S bald-faced copied Microsoft Windows Phone

There is no shame in copying excellence. In fact, I would say that a core tenet of excellence is its ability to inspire excellence in others. Microsoft had the first smartphone, that doesn’t diminish Apple. Microsoft had the first smart watch, that doesn’t diminish Google. Microsoft had the first DVR, that doesn’t diminish Tivo. You see, standing on other’s shoulders (not their necks) is a harmonious succession of advancements and innovations in the marketplace. Long live compound innovations.

Am I the only one thinking it? If Microsoft was the first, why does everyone else get credit? The reason is clear and irrefutable. History rewards the successful. Creators may innovate an idea (say, a GUI and a mouse) but whoever brings it to market successfully receives that historical reward. Of course, nobody would believe Microsoft invented the smartphone; like, nobody would believe Microsoft didn’t invent Windows – clear and irrefutable. Sort of.

Let’s start this out on the right foot. Is “bald-faced” a loaded word? I think what I meant was “seemingly”. :)

There is an abundance of excellence in the Apple, Android, and Windows Phone products. Excellence in engineering comes from people, and each of them employs people. Excellence in design comes from people, and each of them employs people. No single person “owns” innovation. Concurrently, no single company does either.

I believe when companies fight to be the most innovative, consumers win.  

Having said that, today was the reveal of Apple’s IPhone 5S. A truly beautiful offering. Not one that I plan to invest in, but one I can appreciate. As I admired it, I suddenly realized why I liked it. Imitation is the best form of flattery. And, the new IPhone 5S (and IOS7) has some particularly flattering features – especially when you consider them next to a Microsoft Windows Phone.

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.

When Windows 8 copies Windows Phone, we are all winners

Windows 8 is the reimagining of Windows. Sure. But, let’s not forget, Windows 8 didn’t invent the new design language, Windows Phone did. To be fair Windows Media Center introduced the first low-chrome Microsoft UI for the 10 foot experience. Zune, then, adopted that clean approach and adjusted it for a small touch screen.

But, it was Windows Phone that took what we used to call the Metro style to the limit. That team created a crisp and clean design language that was magically pervasive and universally appreciated. Windows 8.0 adopted it, Windows 8.1 gets even more like Phone.

Windows 8: XAML Manipulation using Attached Properties

In this previous article I discussed methods using XAML Manipulation Events with gestures to transform your UI, making it interactive. I talked about the different approaches you can use to leverage fingers and mouse.

In this article, I want to show a simple implementation that encapsulates some Manipulation logic into a XAML attached property. Attached properties are one of my favorite things in XAML. They allow developers to extend objects much like extension methods in C#.

Simply set my new attached property called “CanMove” to true, and your UI element can be dragged around the screen like it’s glued to your finger (or mouse). It’s pretty cool.