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?

12 things you should teach your daughters about Microsoft Word

My daughters are getting into typing their homework, so I am making sure they understand OneDrive, OneNote, and Word. These are like Visual Studio for the student. OneDrive is their source control. OneNote manages their assets. And Word guides them away from simple, stupid errors without writing their papers for them.

I’ve been giving them some small tutorials, and thought I would take a little of the lesson and put it here. This is, as far as I am concerned, the basics of what you should teach your daughters (or sons) about Microsoft Word. Lots of these features are part of the web version of Word that comes in OneDrive – only a few of them are parts of Google Docs (yuck) some of their classes use. 

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. 

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.

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.

Walkthrough: Reordering items in a GridView with Drag and Drop

So, you have some data showing in a GridView. You have ordered it programmatically. Now, you want to let the user reorder it, manually, by dragging and dropping GridView items anywhere they want. Is it easy? It sure is.

GridView inherits from ListViewBase, which ultimately inherits from ItemsControl – the core repeater for the XAML framework. GridView is a horizontally-oriented data presenter that is, easily, the most common control used in Windows Store Apps on Windows 8. It gives a lot of functionality to developer right out-of-the-box. This includes grouping, selection, animations, and reordering.

Walkthrough: Windows 8 Extended Splash Screen

So we have two real problems:

1. If your app does not present a UI to the user in a given time, Windows 8 will assume your app is frozen and will terminate it.
2. If your app does not present a UI to the user in a given time, the user will assume your app is frozen and will terminate it.

And, fortunately, we have solutions!

Walkthrough: Dynamically Skinning your Windows 8 App

One powerful feature of XAML is the ability to make any control look however the developer or designer wants without having to change the control itself. Similar to, but far more powerful than CSS, skinning a control in XAML lets you change how it looks, change the type of control, and even inject behavior.

You can change its behavior, customize it’s API, and even add properties as needed. Taken to the extreme, it can actually be a little confusing. But used appropriately, it’s a powerful, time-saving feature.

Walkthrough: A Custom Control in XAML isn’t a User Control

Catnip to developers is truly reuse. Redundant code is a source of continual agony to architects and maintenance developers alike. In XAML we have a few ways to reuse our code that aren’t just C# strategies like inheritance and static methods.

XAML Reuse Strategies

1. Higher Resources

The <Resources /> property of a page or control is within the scope of any child element. As a result, this raises the scope of styles, templates, and variables to more than one UI element. The Page resources property is the highest scope available in a single UI.

Walkthrough: Implementing SnapView in your Windows 8 App

There are four supported orientations in Windows 8. There is Full View, Snap View, Fill View and Portrait View. Each is important in the overall strategy of Windows 8. In order to get your app into the Windows Store, you must support the Full, Snap and Fill view. And to support them, XAML uses ViewStates that easily execute custom animations and show your tailored content.

What view?

The different views in Windows are something developers have to deal with but are fundamentally one of Windows 8’s core differentiators in the marketplace. Since a Windows 8 is only active when it is visible it means that only one app can run at a time – similar to the IPad. But because of SnapView, Windows 8 allows users to view more than one app at a time, even if the second app is in a narrow format. As a result, the user can enjoy more than one app at a time, increasing the opportunity for productivity.

The image above shows the Full, Snap, and Fill View on a slate device, respectively. It is an important note to say that Snap is not a touch-only mechanism. I run on a desktop that has no touch input. I use snap. It allows me to have more than one Windows 8 app up at one time. It also allows me to have a desktop app and a Windows 8 app running at the same time. It’s nice.

Walkthrough: using Windows 8 Custom Protocol Activation

Protocol activation, what is it? Well, when you run “http:{something}” you expect a browser to launch, right? When you type “mailto:{something}” you expect a mail client to launch, right? What if you could create “custom:{something}” that launched your app? That’s custom protocol activation!

Walkthrough: Monetize Windows 8 with the Microsoft Advertising SDK

An interstitial advertisement is traditionally recognized as a full-page ad appearing between two pages. Interstitial, which means “gap” perceives a gap between to parts of the UI (especially pages on a web site) and fills it with an advertisement.

Wiki: On the World Wide Web, interstitials are web pages displayed before or after an expected content page, often to display advertisements or confirm the user's age (prior to showing age-restricted material). Most interstitial advertisements are delivered by an ad server. Full-screen interstitial ads are referred to as hyperstitials.

I am sure we have all experienced this type of advertising. And, I think I can speak for everyone, we all hate this type of advertising. These ads make apps or sites feel slow; we spend most of the time hunting for “skip this ad”, not reading it. So, what’s this article about then?

Walkthrough: The Windows 8 AppBar, you might as well have the coolest! (feat. Expression Design)

Windows 8 apps don’t have a ribbon. Windows 8 apps don’t have a top menu. Instead, Windows 8 apps have AppBars. An AppBar on the bottom of your app is where you place command buttons. An AppBar on the top of your app is where you place navigation elements.

Walkthrough: Adding Text Translation to your Windows 8 App

The Microsoft Translator is a powerful service that developers can leverage in their Windows 8 apps. It’s core functions are to detect the language of some text. To translate text from one language to another. And, to read text to you – that’s right! The API is hosted on Azure’s Data Marketplace. It has a pricing schedule, including a free tier that developers can leverage to develop with the API.

ADM: Microsoft Translator delivers automatic translation (Machine Translation) of a text into a specified language. It is a state-of-the-art statistical machine translation system translating between any of the supported languages, and powering millions of translations every day. It also provides additional functionality such as detection of the language of a given text. For more technical information about Microsoft Translator, please visit http://api.microsofttranslator.com.

Windows 8 Beauty Tip: Using a VariableSizedWrapGrid in a GridView makes Grids Prettier

Using a GridView in XAML is the primary way to show lists of data. The GridView inherits ItemsControl and behaves like the ListView which behaves like a classic ListBox. The GridView scrolls horizontally, handles selection, rearrangement, and (as we see in this article) also allows for variable sited items.

The GridView’s ItemsPanel is a WrapGrid by default. Unlike a VariableSizedWrapGrid, the WrapGrid creates a strictly uniform grid of items. It’s beautiful, actually. The VariableSizedWrapGrid, on the other hand, lets developers create custom and create UI.

How to Create a Windows 8 Settings Pane in XAML

There are five charms in Windows 8: search, share, start, devices, and settings. The reason for the charms is to create a single point of invocation for common tasks. What could be more common and more ubiquitous than settings or options or personalization or preferences? But how do we leverage the setting charm in our Windows 8 apps?

Note: The settings charm is not for desktop apps.

UPDATE 2/21/14

It appears that with Windows 8.1, developers will get a conversion exception in its CommandsRequested handler when the SettingsPane initialized the control. The workaround is to supply a GUID string as the item key.

// Identify control for StartPage settings
new SettingsHelper()
    .AddCommand<StartPageSettingsDisplay>
    ("Settings",
     "{E285A7C7-9101-4E4E-8826-38E0CC7EE1CE}");

When the user invokes the settings charm by tapping it, the operating system raises an event in your app. Your event handler updates the event arguments with the different setting command links you want to display in the native settings dialog. When the user taps one of those commands, you can handle the event and reveal a flyout.

In XAML, the flyout is actually accomplished with the popup control. Unlike the flyout in JavaScript, however, the XAML popup must be manually implemented for placement, dismissal, animations, et al. As a result, I wrote the SettingsHelper which I demonstrate in the following video. This self-contained class handles all that and makes settings a matter of one or two lines.

Here we go!

In the video above, I implement my SettingsHelper to show settings in a Windows app. Take my code, learn from it, steal from it, use it, whatever helps most! If you use it, send me a note and let me know!

One more thing

I would be remiss not to mention Callisto on GitHub and available through NuGet in Visual Studio. This is a set of controls (including Flyout) that do a lot of what my helper does. It provides other controls (like DateControl) and is a fine contribution from Tim Heuer here at Microsoft.

Best of luck!

Adding Location, Geocoding, and Bing Maps to Windows 8 Apps

Did you know that the Windows 8 Location service does not require a GPS? It’s totally true. So many applications have to use location and so many applications should. With Windows 8, sensors and location isn’t a “what if” it’s a standard service that “just works”.

MSDN: Computers today are more mobile than ever. From small laptops to Tablet PCs, many computers can go wherever the user wants to go. Programs that take advantage of the computer's mobility can add significant value to people's lives. For example, a program that can find nearby restaurants and provide driving directions would seem to be a natural fit for a portable computer. But while the technology to determine the user's current location is common and affordable, building solutions on this technology can be a daunting task.

Use Expression Design to create a Windows 8 ‘Ratings’ control

If you are not aware of Expression Design, you are missing a powerful tool in your toolbox. Expression Design allows designers and developers to create original vector assets or edit existing, including those created in other tools (like those from Adobe).

An update to Expression Design 4 was recently released. You can download the June 2012 preview here. (learn more) As the capabilities of Design continue to bloom, in this article we’ll use the basic functions to create a vector-based ratings solution that anyone can add to their Windows application.