In a software, user controls are the building blocks of the user interface. A user control is basically a piece of interface and code mixture that is designed for a specific action or purpose, and they provide the interaction between users and our app. They range from simple textblocks to more complex ones such as buttons, sliders, scrollbars, lists and grids, or to even more complex ones such as webviews, maps, pie charts or graphs. As developers, we can customize these user controls as much as they allow, like changing their texts, colors, sizes or even events (like what happens when we click a button or move a slider).

Another aspect of user controls is this: They are repeated a lot. Think what would happen if you wanted to put a button to your app but there weren’t any button controls. You would need to put a rectangle first, then a textblock in front of it, then set a click event, then arrange it’s animations for clicking and so on. Just for one button. Then if you wanted to put another button, you would need to copy all that you’ve prepared and paste it to the place you want, which would result in an absurdly big markup code composed completely of basic controls and a maintenance nightmare.

Ok then, now that we know what user controls are and why they’re nice, we’ll come to the custom user control part. Well, apart from default user controls, you can broaden the number of your user controls via adding other libraries (for Windows Store apps, like WinRT XAML Toolkit, Telerik RadControls for Windows 8 or Bing Maps control). However, you might still have a specific part of your interface (unique to your needs) that you need to repeat a lot. If this is the case, we can create a custom user control composed of other user controls that will make our work a lot easier.

Before going on to make an example app, I’d like to make it clear how custom controls are useful in Windows Store apps:
– They increase maintainability. If you want to change how it looks or works later, just make your changes to the custom user control, instead of not using a user control and changing it in every place you’ve used.
– Combined with data binding, they can be very powerful and dynamic.
– Especially useful in places where you don’t have a codebehind file, such as the item templates for gridviews or listviews. Without them, you will not be able to easily put buttons or other interactive user controls in your item template.

Alright alright, enough ranting, let’s create an example app. 🙂 We’ll now create a Windows Store app which will have a custom user control in a GridView item template. It will be a mockup app, where we will show the user his/her incoming friendship requests and the user will either accept or ignore them. 🙂

➤ For bonus points, you can create custom controls and put them on the internet for other people to use…

When developing a Windows Store app, you get to set the default theme of you app, Dark or Light. This value determines the system brush resources for your app – therefore the colors of your controls. The theme is set in the App.xaml file, and can not be changed in runtime; so we need to pick a theme and stick with it.

This is generally not a problem, but as you can guess sometimes you may need to mix things up a little. For example, in your Dark themed app, you may need to have a page with a white background, or if you have a custom background (like a picture), some of your controls may be unseen on a specific part of the picture. When this happens, it can result in your control not being easily seen (or not being seen at all).

To fix this for simple controls that do not have states (like a textblock), just setting the foreground will be enough. However, if you wish to change the color of a more complex control, such as a button, after changing it’s foreground – background – border colors you’ll see that either a) it partially works but the button is not entirely visible when you hover over it, click it, or when it is disabled and thus looks bad, or b) it doesn’t work at all.

After spending 2 hours just for the color of single button, I have found a solution (which is definitely not elegant, but it works), and in this article we will make an example app that demonstrates how we can mix these two themes.

➤ Let’s make our app look like Yin Yang ☯☯☯☯☯☯☯☯☯☯☯☯☯☯☯